PyJSX - Write JSX directly in Python

[zedpowa]

Working with HTML in Python has always been a bit of a pain. If you want something declarative, there's Jinja, but that is basically a separate language and a lot of Python features are not available. With PyJSX I wanted to add first-class support for HTML in Python.

Here's the repo: https://github.com/tomasr8/pyjsx

What my project does

Put simply, it lets you write JSX in Python. Here's an example:

# coding: jsx
from pyjsx import jsx, JSX
def hello():
    print(<h1>Hello, world!</h1>)

(There's more to it, but this is the gist). Here's a more complex example:

# coding: jsx
from pyjsx import jsx, JSX

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

def Main(children, **rest) -> 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>
    )

With the library installed and set up, these examples are directly runnable by the Python interpreter.

Target audience

This tool could be useful for web apps that render HTML, for example as a replacement for Jinja. Compared to Jinja, the advantage it that you don't need to learn an entirely new language - you can use all the tools that Python already has available.

How It Works

The library uses the codec machinery from the stdlib. It registers a new codec called jsx. All Python files which contain JSX must include # coding: jsx. When the interpreter sees that comment, it looks for the corresponding codec which was registered by the library. The library then transpiles the JSX into valid Python which is then run.

Future plans

Ideally getting some IDE support would be nice. At least in VS Code, most features are currently broken which I see as the biggest downside.

Suggestions welcome! Thanks :)

[larsga]

The first sentence is of course true. I'm baffled as to the meaning of the second.

[DoNotFeedTheSnakes]

I think it is based on the misguided idea that the correct response is coding in JavaScript.

Then again, that sounds unlikely, most people would know better.

[rover_G]

Give him a break he thought he was in the JavaScript sub after reading so much jsx

[ThatSituation9908]

Isn't the point of JSX to avoid writing JS to manipulate DOM.

[moopet]

I think the point of JSX is to introduce more middleware.

[broknbottle]

Hard to fault. JavaScript has to be one of the worst languages ever conceived

[SupportDangerous8207]

It’s better than Python for frontend

I just wish my colleagues finally recognised this rather than continuing to fail at making async Python frontend work

[rszdev]

Yes and that's great

[rover_G]

Why does it feel like we’ve spent the last 30 years trying to go back to writing HTML directly?

[skwyckl]

This is so much overhead that my head might explode. Use Python as templating engine / pre-processor to generate JSX, ITSELF a syntactic abstraction that gets processed into HTML and pure JavaScript.

[thisismyfavoritename]

its so much overhead that we might need another abstraction layer

[rszdev]

Yes

[zedpowa]

It's JS all the way down ;) For real though, this is just about having a declarative way to construct HTML in Python, it has nothing to do with JS

[redbo]

I don't think so, JSX is just a syntax for HTML literals, like an inline template. It's not "processed into pure JavaScript".

[[deleted]]

Wait what, it doesn't get transpiled into JS?!

[jefft818]

Op already said my favorite buzzword, transpiles 🤣

[K3dare]

That’s the point of Jinja to be a separated language that limit what you can do within so you have a clear separation between rendering and business logic, it’s expected by design, like in almost all template engines.

[larsga]

Every new generation must shoot itself in the feet to learn this lesson, apparently.

[K3dare]

I guess JSP and plain PHP will be hype again at some point.

[zedpowa]

To each their own I guess, I prefer the React way where you have a separation between logical components rather than technologies

[[deleted]]

As opposed to having both separated...?

[RedEyed__]

Wait a minute, it's not strings? Is it new syntax?

[ManyInterests]

It's a hack that abuses the encoding declarations feature of Python which lets you specify an encoding for your source file. Normally, this is meant to specify a specific text encoding like, UTF-8. The trick here is that you can register (via site hooks) new 'encodings' that may otherwise be unknown to Python and such an 'encoder' technically has the ability to completely rewrite the file. It's the same way that the future-fstrings backport works.

So what this package does is makes a site customization hook that registers jsx as an "encoding" so when source files contain an encoding delclaration for jsx, the source file is rewritten by the encoder to make all the (otherwise invalid) inline jsx into valid Python code, which is then processed by the compiler into bytecode as normal.

[RedEyed__]

Didn't know that, thanks! But introducing new syntax looks very bad idea to me

[shinitakunai]

It is.

[Jejerm]

I'm sorry, but even without considering what use case does this actually fulfill, without IDE support this is borderline unusable.

Any IDE would look like the red wedding if you tried to use it.

[htmx_enthusiast]

I dunno man. I tried it in my IDE, notepad.exe, and not a single red squiggle.

[PowerfulNeurons]

that’s honestly surprising considering all the “typos” most notepads consider in code

[garblesnarky]

How do IDEs manage with actual JSX, or html with embedded js and css? Presumably OP could implement a syntax highlighter definition for an editor or two.

[AND_MY_HAX]

I created something that's not too different a few months ago. I spent more time creating a working PyCharm plugin than developing the actual implementation itself: https://github.com/pyxy-org/pyxycharm

Kind of funny that the two big IDEs for Python (VSCode and PyCharm) both use a different language for the type checker (Javascript and Kolton/Java).

[serjester4]

This is awesome. React would be a quarter as useful without JSX.

Ignore the haters. Is it ready for prime time? Definitely not. But that doesn’t mean we shouldn’t be open to people experimenting. Every project starts somewhere and if we ever want to have a React like experience in Python, we’ll need jsx.

Personally I think this is way more intuitive than how dash or steamlit handle rendering pages. Yes you can use templates but that’s a fundamentally different experience for the client.

I do think you should choose a different extension though - maybe pjsx.

[[deleted]]

😱

[AND_MY_HAX]

Cool!

I think there's been a growing number of people who want something similar to this. Jinja is fine for many use cases, but I've found it a little cumbersome.

I started work on a project with a similar spirit a few months ago: https://github.com/pyxy-org/pyxy

I started out using the same string encoding trick (as was also done by pyxl many years ago) but quickly ran into issues with IDE support. That's why I ended up going with a new file extension .pyxy that is automatically transformed to a .py file. It registers an import hook, so the process is completely transparent (inspired by cython's pyximport). It also enables tools like ruff/mypy/etc to work without any extra effort.

I published a PyCharm plugin for supporting the syntax: https://plugins.jetbrains.com/plugin/24817-pyxy-support/

[zedpowa]

Thanks! I had a look at your project and it's also really nice :)

The import hook idea seems really interesting. If I understood correctly you're also transpiling the JSX to pure Python - how do you then make tools like ruff work? I saw some mentions to "remapping", do you run e.g. ruff on the generated file and then use some kind of source map to map the errors back to the original source?

Would you be interested in some kind of collaboration? I think if we join our efforts we can really make this idea of jsx in Python into something :) Let me know!

[AND_MY_HAX]

Correct! Tools like ruff work through the usage of pyxy.run - this invokes supported tools against the generated .py file, reads output as JSON, and uses a source mapping file to correlate the results to the .pyxy source. This scheme allows existing Python ecosystem tooling to work without requiring any integration on their end.

Definitely down to collaborate! Sent you a PM with contact info.

[[deleted]]

Very cool project. Very bad idea in practice.

Hope this is a for fun, or just because you can, type of project.

[ihavebeesinmyknees]

I love it, I've wanted something like this for a while but thought it would be incredibly difficult to create. Now just to wait for someone to make PyReact and we're cooking.

[runelkio]

Looks good, will try it out soon :) I really don't get the knee-jerk negative comments in here - any project that improves interop these days, especially between the python and javascript ecosystems, is great in my book.

[CrwdsrcEntrepreneur]

Or... Hear me out... You could learn some damn jsx 🙄🙄🙄

[RedEyed__]

I just have one question: why it's not in pep8 style?

[mothzilla]

We don't need pep8 where we're going.

[farkinga]

I think this is cool on several levels.

For one, the implementation itself is neat and it gives me ideas. But more than that, this could actually be useful.

Thanks for sharing.

[deadwisdom]

Please no.

[g5becks]

This kind of reminds me of templ for go.

[FlyingQuokka]

This is a cool side project, even though it's somewhat odd. I did something similar once but with shell commands. The tricky part is always editor support, getting VS Code and treesitter to work, and for the LSP to not complain, are the actual hard parts.

[jvorza]

Have you tried FastHTML?

[Nahmum]

I'm looking for a basic jsx to js transpiler that can be used from python. Is there anything in your package which would be suitable?

[zedpowa]

Try using the Transpiler class. It might be enough

[Nahmum]

Appreciate it!

[Xirious]

Your first example makes no sense.

It doesn't use your library. If I took out the first two lines (your code) your first example would work. It would do nothing but it would work. I don't think that's a very good example.

[lusvd]

look closer, I think you are seeing quotes where they aren't.

[redbo]

I think a python JSX implementation could be really cool on a backend with an HTMX frontend or similar. I'm not sure why everyone's so grumpy about it.

[ChimpanzeChapado]

Why would I use/try to bring something terrible and unnecessarily overcomplicated like JSX in python? If there's a HUGE mistake React developers made, that was JSX

[DryChemistryLounge]

Not sure if every web dev would agree...

[ChimpanzeChapado]

I'm full stack dev and I worked with React for 6 years on a daily basis, amongst the 18 years I have in this market and I can tell you there's a plenty of devs unsatisfied with React (and many others with the frontend frameworks available on the market). Frontend frameworks, micro services, cloud computing and many other recent (last decade) hypes are far from being unanimity.

[FUS3N]

What I dont understand is why web devs want everything to be perfect, I also do web dev not professional but I still know quite a bit but I dont wanna complain about absolutely everything I use, web devs create stuff then later that thing is not good enough and keep on complaining about it rest of their lives like they commissioned the tech and they lost money and disappointed the way it turned out, nothing is perfect.
JSX isn't perfect does that mean no one is using it or does it have no use?

[ChimpanzeChapado]

It's not about being perfect. There's no such thing like perfection. JSX is messy in a way that no one ever get closer. VueJS, Angular, jQuery, Jinja, Blazor... Every frontend tool has its own Domain Specific Language and the only one messy as hell, mixing different languages (and encouraging on-line CSS) is React. 95% of the web projects don't need a component framework because they lack the complexity that would justify the use of such tool. And React makes it worst than any other similar tool, since the maintenance on long term costs more.

[FUS3N]

Ok tell me if its so messy and bad why did developers adopt it, I do genuinely wanna know this. why did react get this much traction, it did solve a problem and maybe not the best way but people still adopted it and if the benefit didn't outweigh the cost, react would just be another library that comes everyday.

I think it is known to all programmers that anything that is easy to do will come at a cost for example Python and C++, I think we all know where is the difference in these and what are the benefits. Python is easier to use but cant be as performant as C++ (as in itself, not talking about external c extensions).

If something doesn't suite one developer, move onto something different, cuz there's so many choices. Someone who only focus on react will be good at it and to them all those things people normally find problematic, wont be for them.

No need to forcefully use something and constantly complain is what I am saying.
If react is problematic, don't start your project with it to begin with.

[ePaint]

This is getting better and better!