Show HN: Zap Code – AI code generator that teaches kids real HTML/CSS/JS
TL;DR
Zap Code generates working HTML/CSS/JS from plain-English descriptions, targeting kids aged 8–16.
Key Points
- Core loop: kid types something like 'make a space shooter game', AI generates the code, live preview renders immediately in-browser.
- Three interaction modes: visual-only tweaks, read-only annotated code view, and full editing with AI autocomplete.
- Tech stack: Next.js frontend, Node.js backend, simplified Monaco editor, sandboxed iframe preview with no outbound API calls from generated code.
- A progressive complexity engine uses a skill model to decide when to surface more advanced features.
Nauti's Take
The concept is solid and more honest than most EdTech: real code, real browser runtime, no candy-coloured abstraction layers. The make-or-break will be the skill model – adaptive difficulty sounds great but routinely fails in practice because frustration thresholds vary wildly between kids.
Pitching on HN with actual technical details is exactly the right move for an education product. The remaining open question is whether AI-generated code examples are pedagogically structured or just optimised for 'it runs' – two very different things.
Context
The gap between block-based tools like Scratch and real programming is a well-documented problem in CS education. Zap Code tackles it by letting kids encounter real output first and only then explore the underlying code. Using a sandboxed Monaco editor bridges toy abstractions and professional tooling.
If the skill model genuinely adapts to each user, this could meaningfully lower the barrier to text-based coding for the 10–14 age group.
Sources