PyJSX - Write JSX directly in Python

👉 We now have a VSCode plugin!

from pyjsx import jsx, JSX

def Header(style, children) -> JSX:
    return <h1 style={style}>{children}</h1>

def Main(children) -> JSX:
    return <main>{children}</main>

def App() -> JSX:
    return (
        <div>
            <Header style={{"color": "red"}}>Hello, world!</Header>
            <Main>
                <p>This was rendered with PyJSX!</p>
            </Main>
        </div>
    )

Installation

Get it via pip:

pip install python-jsx

Minimal example (using the coding directive)

Tip

There are more examples available in the examples folder.

There are two supported ways to seamlessly integrate JSX into your codebase. One is by registering a custom codec shown here and the other by using a custom import hook shown below.

# hello.py
# coding: jsx
from pyjsx import jsx

def hello():
    print(<h1>Hello, world!</h1>)

# main.py
import pyjsx.auto_setup

from hello import hello

hello()

$ python main.py
<h1>Hello, word!</h1>

Each file containing JSX must contain two things:

• # coding: jsx directive - This tells Python to let our library parse the file first.
• from pyjsx import jsx import. PyJSX transpiles JSX into jsx(...) calls so it must be in scope.

To run a file containing JSX, the jsx codec must be registered first which can be done with import pyjsx.auto_setup. This must occur before importing any other file containing JSX.

Minimal example (using an import hook)

Tip

There are more examples available in the examples folder.

# hello.px
from pyjsx import jsx

def hello():
    print(<h1>Hello, world!</h1>)

# main.py
import pyjsx.auto_setup

from hello import hello

hello()

$ python main.py
<h1>Hello, word!</h1>

Each file containing JSX must contain two things:

• The file extension must be .px
• from pyjsx import jsx import. PyJSX transpiles JSX into jsx(...) calls so it must be in scope.

To be able to import .px, the import hook must be registered first which can be done with import pyjsx.auto_setup (same as for the codec version). This must occur before importing any other file containing JSX.

Supported grammar

The full JSX grammar is supported. Here are a few examples:

Normal and self-closing tags

x = <div></div>
y = <img />

Props

<a href="example.com">Click me!</a>
<div style={{"color": "red"}}>This is red</div>
<span {...props}>Spread operator</span>

Nested expressions

<div>
    {[<p>Row: {i}</p> for i in range(10)]}
</div>

Fragments

fragment = (
    <>
        <p>1st paragraph</p>
        <p>2nd paragraph</p>
    </>
)

Custom components

A custom component can be any function that takes **kwargs and returns JSX or a plain string. The special prop children is a list containing the element's children.

def Header(children, **rest):
    return <h1>{children}</h1>

header = <Header>Title</Header>
print(header)

VS Code support

PyJSX comes with a VS Code plugin that provides syntax highlighting.

Type checking

PyJSX includes a plugin that allows mypy to parse files with JSX in them. To use it, add pyjsx.mypy to the plugins list in your mypy configuration file. For example, in mypy.ini:

[mypy]
plugins = pyjsx.mypy

Or in pyproject.toml:

[tool.mypy]
plugins = ["pyjsx.mypy"]

Prior art

Inspired by packed and pyxl4.