RFC: streaming renderer

[volfpeter]

Hi,

Since htmy is an async framework, it could be capable of async HTML streaming, which could open up new possibilities for designing components and delivering content to the browser. It would require a moderate rewrite of the current renderer.

I'm curious what you think about this, especially if you have experience with HTML streaming.

[codetricity]

I asked about whether this exists on Reddit, but I am still not sure if it is needed. I do not have enough knowledge to have an opinion on how best to use use SSE with htmy. I am still in the early stage of analysis of htmy. It looks great so far.

It's different from Django syntax, which me and my team came from. It reminds me a little of streamlit, but more flexible. I don't like streamlit for complex apps, so htmy looks like a nice alternative. In some ways, it is a similar to the common React paradigm.

I'm currently testing htmy with tailwind, daisyui, htmx, fastapi, sse.

I'm wondering if there is in-editor syntax completion for the tailwind components inside of the htmy code such as the text-4xl in the code below? I want to type text- and have the completions come up for tailwind. Because it is a python file, it's not coming up. However, maybe there's a way to adjust the configuration? I'm using cursor/vscode, but I have the cursor tab turned off as I like to think about what is needed myself.

def hello_world():
    return html.div(   
        html.h1("hello, world"),
        class_="text-4xl",
        )

After this, I'll look at sse.

In your fastapi-htmx-tailwind-example, you use SSE, but it's using jinja. I'm looking for an example that shows the status of output of different streams and does not use jinja for proof of the concept.

I'm thinking of using data from tavily and openrouter.ai for a prototype as there appear to have free tiers, including the free LLM access in the cloud.

If I have to use jinja with FastAPI, i'm actually thinking of using asgi Django because it comes with the database, authentication and dashboards pre-built.

As I mentioned, I am at the beginning of my journey of learning about htmy. Thus, I don't have an opinion on the streaming renderer.

BTW, is there a short snippet of how I can use htmy with a stream?

Thanks for all your work.

[volfpeter]

Hi,

I remember your Reddit post. It's nice to have you here.

First of all, this discussion is about a totally different topic: whether (how) it makes sense to stream HTML content as it's made available by the htmy renderer (basically to try to improve time to first byte), or the current solution (render the entire HTML and then send it in an HTML response) is good enough.

But on to your questions.

Yes, htmy has a React or NextJS server component-like feel (by design), with option for async components. Patterns obviously don't translate 1:1 to htmy (partly because of the fundamental differences between JavaScript and Python), but it's not that different either. I should mention that if you're happy with Django templating, then FastHX with Jinja could be an easier transition (with all the pros and cons of these templating solutions).

On the IDE auto-complete for TailwindCSS topic, the answer is probably no (with an asterisk). I'm not using such an extension for JSX/HTML either, so I may be wrong. I'm also not aware of such a Python IDE extension for any "HTML in Python" framework, but if one exists, then it should also work with htmy. But I must add two things:

• Since you mentioned Cursor, I should note that because of the similarities to JSX, LLMs can pick up patterns fairly well, especially if you give them access to the project's documentation (for example through Context7 htmy, fasthx).
• The Snippet component lets you write parts of your HTML in plain HTML files (without any custom syntax), and for those you can have first-class TailwindCSS experience if you need it (as I said, I personally never needed this).

The IDE auto-complete comments above also apply to DaisyUI, HTMX or AlpineJS for example.

I have several comments on the SSE topic:

• First of all, this is a FastHX question, the goal of rendering is not a concern for htmy. FastHX doesn't have an sse decorator yet. Conceptually it shouldn't be complicated to implement, but creating the correct API design, implementing the feature (the base decorator plus the Jinja and htmy versions), adding documentation and examples is not an insignificant amount of work. I like the idea of having such a decorator in FastHX, but I will likely only have time to get it done if I need it for a project I work on or someone sponsors the development.
• If you don't know that you need it, then you probably don't. You need it if you have an event source on the backend whose output you want to display on the frontend as the event is emitted (or just trigger HTMX event based on that event source).
• The linked Jinja example basically directly renders the HTML content and then sends it in a SSE (using sse-starlette). The exact same process works with htmy as well, the only difference is that instead of triggering the Jinja renderer, you must run the htmy renderer (either through fasthx.htmy.HTMY.htmy or through a separate htmy.Renderer instance).

Personally, I strongly prefer the philosophy of Flask/FastAPI over Django, and I like to have the option to choose all my tools, but I understand not everyone is like that 🙂

[volfpeter]

The htms Rust create implements a pretty elegant solution using only a tiny bit of JS (a simple webcomponent). Similar behavior could be achieved by adding a Delayed (it could be similar in terms of the API to ErrorBoundary, but the delayed bit would need to be rendered one by one after all the normal content has been rendered and sent to the browser).