A Python package for creating and manipulating HTML components. It is working similar to React.js, but in Python
Project description
Python JSX
JSX is a Python package for creating and manipulating HTML components. It is working similar to React.js, but in Python.
Usage
from jsx import Div, H1, P, Component, Style
class MyComponent(Component):
def render(self):
return Div(
H1(
"Hello, World!",
style=Style(
color="#33343c"
),
),
P(
"Welcome to JSX!"
),
style=Style(
text_align="center"
)
)
from .components import MyComponent
from jsx.renderer import render
@app.get("/")
def hello_world():
return render(MyComponent())
Server actions
It's possible to pass a python function as component props.
The current version works only with ASGIApp
.
class Person(Component):
def __init__(self, name: str, age: float):
self.age = age
self.name = name
def render(self):
return Form(
Div(f"Update the age for {name}"),
Label(
"Age: ",
html_for="age"
),
Input(
type="text",
on_change=self.set_age
),
Button(
"Submit Age",
type="submit"
),
on_submit=self.save_age
)
def set_age(self, event_data: JSXChangeEvent):
self.age = event_data.value
def save_age(self, event_data: JSXSubmitEvent):
user = get_user()
user.age = self.age
save(user)
To call a function on the server include this script in your file
<script src="/_jsx/all.js"></script>
In your ASGI app call the mount
function from the jsx.server
module
from fastapi import FastAPI
from jsx.server import mount
app = FastAPI()
mount(app)
You can pass the following config to the mount
to change the path of all jsx endpoints.
mount(app, socket_path="/jsx.io", scripts_path="/static/jsx")
The actions use socket.io to communicate between server and client.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
jsx-0.2.0.tar.gz
(12.6 kB
view hashes)
Built Distribution
jsx-0.2.0-py3-none-any.whl
(24.7 kB
view hashes)