My first 4 Streamlit components: Kanban Board, Real Time Audio Editor, Multi-Step Wizard, Node Editor

:rocket: Just published my first four custom Streamlit components!

Hey everyone β€” I’ve been building with Streamlit for a while and finally got around to packaging some components I kept wishing existed. All four use React 18 + streamlit-component-lib, ship with pre-built frontends (no Node.js needed), and return structured JSON back to Python on every interaction.

Would love bug reports, feature requests, or just to hear if you find them useful.


:card_index_dividers: streamlit-kanban β€” Drag-and-drop Kanban board

Move cards between columns, add/edit cards with tags and priority levels, get the full board state back as JSON. Uses pointer events so drag works smoothly inside Streamlit’s iframe.

pip install streamlit-kanban
GitHub Β· PyPI


:studio_microphone: streamlit-audio-editor β€” Browser-based audio editor & jam session recorder

Load any audio file, visualize the waveform, trim it, and run it through a real-time effects rack: 3-band EQ, LP/HP/BP/notch filter, compressor, delay, chorus, distortion, tremolo, reverb, stereo pan, speed/pitch control. You can also route your mic through the chain and record your session. All client-side via Web Audio API β€” no ffmpeg needed.

pip install streamlit-audio-editor
GitHub Β· PyPI


:footprints: streamlit-stepper β€” Multi-step wizard with validation

Define steps with typed fields (text, textarea, select), built-in required-field validation, animated progress connectors, and an auto-generated review step. Collected values come back in Python. Supports horizontal and vertical orientations.

pip install streamlit-stepper
GitHub Β· PyPI


:electric_plug: streamlit-node-editor β€” Node graph editor (ComfyUI-style)

Define typed node definitions in Python, let users build graphs by dragging and connecting ports. Color-coded typed ports, inline parameters (dropdowns, numbers, text), searchable node palette, collapsible nodes, pan + scroll-to-zoom, animated dot-grid background.

pip install streamlit-node-editor
GitHub Β· PyPI


:video_game: Live demo β€” all four in one app

:backhand_index_pointing_right: https://demo-components.streamlit.app

Early releases, actively iterating β€” all feedback welcome. Thanks for checking them out! :folded_hands:

7 Likes

Some screenshots




1 Like