Streamlit Google Blockly Component

Custom Components
,
1

Hi everyone :waving_hand:

I’m sharing a custom Streamlit component I built a while ago: streamlit-blockly — it lets you embed Google Blockly(drag-and-drop visual programming blocks) inside a Streamlit app.

Repo: GitHub - hasaniqbal777/streamlit-blockly: Streamlit Google Blockly Component

What it does

  • Adds a Blockly editor to your Streamlit UI
  • Lets users build logic visually (great for demos, education, simple workflows)
  • Returns the generated output back to Streamlit (e.g., code/JSON depending on your setup)

Why it might be useful

If you’re building:

  • interactive learning apps / coding education tools
  • visual rule builders
  • data/automation workflows where non-technical users can “compose” logic…Blockly can be a nice way to make the experience more approachable.

Quick notes

This component was developed some time ago, so if you try it out and run into any friction with newer Streamlit versions, please let me know — I’d love feedback and suggestions (or PRs!) to improve compatibility and polish.

Feedback welcome :folded_hands:

  • Would you use something like this in your apps?
  • Any features you’d want (themes, custom blocks, better serialization, examples, etc.)?
  • If anyone has tips for modern Streamlit component packaging/testing, I’m all ears.

Thanks, and hope it’s helpful!

— Hasan

3 Likes
2

Cool!! Do you have a demo app?

1 Like
3

Currently not. Will make and deploy one tomorrow. :sparkles:

1 Like
4

This looks really interesting :+1:
I can see a practical use for this on my site “Tipos de Flores” as well.

For example, Blockly could be used to let users visually build flower filters (season, color, type, meaning) or even create simple logic like “show summer flowers with red color” without writing code. That would be great for educational and beginner-friendly apps.

A visual builder like this could also help in learning projects, especially for students exploring nature or botany with Streamlit apps.

Nice work — would love to see a small demo or example use case