What to build
A working example of real-time audio transcription using htmx and server-sent events (SSE) — demonstrating live transcript updates in the browser with zero JavaScript framework. The server captures microphone audio via a simple WebSocket, transcribes it with Deepgram streaming STT, and pushes transcript fragments to the page via SSE + htmx swap.
Why this matters
Many developers — especially those in the Python, Ruby, and Go ecosystems — prefer hypermedia-driven architectures over JavaScript-heavy SPAs. htmx has grown rapidly (35K+ stars) as the go-to library for adding interactivity without writing JavaScript. A real-time transcription example using htmx demonstrates that Deepgram integrates naturally into server-rendered applications, reaching developers who wouldn't consider a React-based example. This also showcases a minimal-dependency approach to live transcription UIs.
Suggested scope
- Language: Python (Flask backend)
- Frontend: htmx (CDN script tag) + minimal HTML/CSS — no build step, no npm
- Deepgram APIs: Streaming STT (Nova-3) with smart formatting
- Architecture:
- Flask server with SSE endpoint (
/stream)
- Browser:
getUserMedia() captures mic → sends audio via WebSocket to Flask
- Flask: forwards audio to Deepgram streaming STT → pushes transcripts via SSE
- htmx:
hx-sse attribute swaps transcript fragments into the DOM in real time
- Includes: Audio level indicator, connection status, final transcript export
- Complexity: Low — minimal dependencies, ~100 lines of Python, ~50 lines of HTML
Acceptance criteria
Raised by the DX intelligence system.
What to build
A working example of real-time audio transcription using htmx and server-sent events (SSE) — demonstrating live transcript updates in the browser with zero JavaScript framework. The server captures microphone audio via a simple WebSocket, transcribes it with Deepgram streaming STT, and pushes transcript fragments to the page via SSE + htmx swap.
Why this matters
Many developers — especially those in the Python, Ruby, and Go ecosystems — prefer hypermedia-driven architectures over JavaScript-heavy SPAs. htmx has grown rapidly (35K+ stars) as the go-to library for adding interactivity without writing JavaScript. A real-time transcription example using htmx demonstrates that Deepgram integrates naturally into server-rendered applications, reaching developers who wouldn't consider a React-based example. This also showcases a minimal-dependency approach to live transcription UIs.
Suggested scope
/stream)getUserMedia()captures mic → sends audio via WebSocket to Flaskhx-sseattribute swaps transcript fragments into the DOM in real timeAcceptance criteria
pip install, run)Raised by the DX intelligence system.