![\"\"](\"\/images\/6\/6\/e\/2\/3\/66e235c3d20efa9b095321369d9b8d05136d760a-thumbnail.webp\")
<\/p>\nThis short reference article shows how to stream data from a Flask web app to HTMX using server-side events (SSE).<\/p>\n\n
<\/p>\n
I have been trying to create a web app with Flask<\/a> and HTMX<\/a> that updates the page periodically with data streamed from the Flask backend.\nThe Flask documentation suggests that this should be possible<\/a> if the response wraps a generator function and they show this example:<\/p>\n However, this doesn't work with an HTMX request.<\/p>\n I joined the HTMX Discord and I was told this is because HTMX buffers the complete response.<\/p>\n So, I went looking for other options and I found server-side events.<\/p>\n To be able to stream data back to HTMX and have it update in real-time, the original request needs to connect to SSE with the appropriate HTMX tags.<\/p>\n Then, the Flask backend must return a response with a generator, and the generator itself must return messages that follow the SSE specification.<\/p>\n The following example works with Flask 2.2.3, HTMX 1.8.6, and the SSE extension from HTMX:<\/p>\n If you run your Flask app and open it in your browser, you should see something like this:<\/p>\n The second paragraph should update every second with an increasing counter.<\/p>\n The button “Pong” below is to show that the Flask app still works and clicking the Ping \/ Pong buttons should POST a request to Flask that returns the other button.<\/p>\n The example below connects as soon as the page loads but you may want to use SSE to stream data back from a specific request, instead of on page load.<\/p>\n To do that, what you can do is return the HTML that connects to SSE when that<\/em> event is triggered.\nThe example below shows another simple page with a button that says “Connect”.\nWhen you click that button, we return the HTML that establishes the SSE connection with Flask and then we start streaming the data:<\/p>\n Today I learned how to use JavaScript functions in PyScript.<\/p>\n\n@app.route('\/large.csv')\ndef generate_large_csv():\n def generate():\n for row in iter_all_rows():\n yield f\"{','.join(row)}\\n\"\n return app.response_class(generate(), mimetype='text\/csv')<\/code><\/pre>\nHow to stream data from Flask to HTMX in real-time<\/a><\/h2>\n
templates\/index.html<\/code>:<\/li>\n<\/ul><!DOCTYPE html5>\n<head>\n <script src=\"https:\/\/unpkg.com\/htmx.org@1.8.6\"><\/script>\n <script src=\"https:\/\/unpkg.com\/htmx.org\/dist\/ext\/sse.js\"><\/script>\n<\/head>\n<body>\n <p>Here.<\/p>\n <div hx-ext=\"sse\" sse-connect=\"\/connect\" sse-swap=\"message\">\n Contents of this box will be updated in real time\n with every SSE message received from the chatroom.\n <\/div>\n <button hx-post=\"\/pong\" hx-swap=\"outerHTML\">Pong<\/button>\n<\/body><\/code><\/pre>\nmain.py<\/code>:<\/li>\n<\/ul>import itertools\nimport time\n\nfrom flask import Flask, render_template, Response\n\napp = Flask(__name__)\n\n@app.route(\"\/\")\ndef index():\n return render_template(\"index.html\")\n\n@app.route(\"\/connect\")\ndef publish_hello():\n def stream():\n for idx in itertools.count():\n msg = f\"data: <p>This is {idx}.<\/p>\\n\\n\"\n yield msg\n time.sleep(1)\n\n return Response(stream(), mimetype=\"text\/event-stream\")\n\n@app.post(\"\/ping\")\ndef route_clicked():\n return \"\"\"<button hx-post=\"\/pong\" hx-swap=\"outerHTML\">Pong<\/button>\"\"\"\n\n@app.post(\"\/pong\")\ndef route_pong():\n return \"\"\"<button hx-post=\"\/ping\" hx-swap=\"outerHTML\">Ping<\/button>\"\"\"\n\nif __name__ == \"__main__\":\n app.run(debug=True)<\/code><\/pre>\n![\"Screenshot](\"\/user\/pages\/02.blog\/streaming-data-from-flask-to-htmx-using-server-side-events\/_demo_screenshot.webp\" "\\"HTMX")
Start streaming on request<\/a><\/h2>\n
index.html<\/code>:<\/li>\n<\/ul><!DOCTYPE html5>\n<head>\n <script src=\"https:\/\/unpkg.com\/htmx.org@1.8.6\"><\/script>\n <script src=\"https:\/\/unpkg.com\/htmx.org\/dist\/ext\/sse.js\"><\/script>\n<\/head>\n<body>\n <p>Here.<\/p>\n <button hx-post=\"\/start-connection\" hx-swap=\"outerHTML\">Connect<\/button>\n <button hx-post=\"\/pong\" hx-swap=\"outerHTML\">Pong<\/button>\n<\/body><\/code><\/pre>\nmain.py<\/code>:<\/li>\n<\/ul>import itertools\nimport time\n\nfrom flask import Flask, render_template, Response\n\napp = Flask(__name__)\n\n@app.route(\"\/\")\ndef index():\n return render_template(\"index.html\")\n\n@app.post(\"\/start-connection\")\ndef start_connection():\n return \"\"\"<div hx-ext=\"sse\" sse-connect=\"\/connect\" sse-swap=\"message\">...<\/code><\/pre>","summary":"This short reference article shows how to stream data from a Flask web app to HTMX.","date_modified":"2025-11-22T09:33:35+01:00","tags":["flask","programming","python","web development"],"image":"\/user\/pages\/02.blog\/streaming-data-from-flask-to-htmx-using-server-side-events\/thumbnail.webp"},{"title":"TIL #045 \u2013 using JavaScript functions in PyScript","date_published":"2022-05-01T00:00:00+02:00","id":"https:\/\/mathspp.com\/blog\/til\/045","url":"https:\/\/mathspp.com\/blog\/til\/045","content_html":"