Skip to content

HTML

Overview

We supply some HTML elements can be used to help simplify development.

PyScript

PyScript code block. The text content of this tag are executed within the PyScript interpreter. This can be used as an alternative to the reactpy.html.script.

This is a primitive HTML tag that is leveraged by reactpy_django.components.pyscript_component.

The pyscript tag functions identically to HTML tags contained within reactpy.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from reactpy import component, html
from reactpy_django.html import pyscript

example_source_code = """
import js

js.console.log("Hello, World!")
"""


@component
def server_side_component():
    return html.div(
        pyscript(example_source_code.strip()),
    )

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{% load reactpy %}
<!DOCTYPE html>
<html>

<head>
    <title>ReactPy</title>
    {% pyscript_setup %}
</head>

<body>
    {% component "example_project.my_app.components.server_side_component.py" %}
</body>

</html>
You must call pyscript_setup in your Django template before using this tag!

This requires using of the {% pyscript_setup %} template tag to initialize PyScript on the client.

1
2
3
4
5
6
{% load reactpy %}

<head>
    <title>ReactPy</title>
    {% pyscript_setup %}
</head>
Last update: October 22, 2024
Authors: Mark Bakhit