Skip to content

HTML

Overview

We supply some pre-generated that HTML nodes can be used to help simplify development.

PyScript

Primitive HTML tag that is leveraged by reactpy_django.components.pyscript_component.

This can be used as an alternative to the reactpy.html.script tag to execute JavaScript and run client-side Python code.

Additionally, this tag functions identically to any other tag contained within reactpy.html, and can be used in the same way.

 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: June 22, 2024
Authors: Mark Bakhit