I’d like to suggest a visual block-based interface for working with HTML and code inside ChatGPT.
As someone who doesn’t have deep knowledge of programming, I sometimes ask ChatGPT to help with code — but when the answer is large or complex, I often don’t know where exactly to insert the code ChatGPT gave me, or which part of my existing code it should replace.
The idea is to present HTML (and maybe other languages later) in a block-window layout:
<html>,<head>,<body>,<script>would each be collapsible visual blocks;- A “+” button would suggest only valid tags depending on the current selection;
- Hovering or clicking a lightbulb icon would show a tooltip explanation of what that tag does;
- Users could add ready-to-use code blocks (like buttons, forms, links, etc.);
- Eventually, a preview or export feature could help validate the structure.
This kind of system would make it easier for ChatGPT to provide contextual code updates, and for people like me to understand what’s going on — visually and structurally.
It would also help non-experienced users like myself learn while doing — seeing exactly what goes where, and why — which improves understanding and builds confidence over time.
I’ve started working on a prototype in React to test this concept. I haven’t added the tooltip “lightbulb” icons yet, because I’m still figuring out the best way to position and display them inside the layout.
I’m also open to other ideas and improvements — and I’m happy to extend the concept if I understand the suggestions.