Build real web apps visually — on real component libraries, real Tailwind theming, and real reactive logic. Every prop is a live expression. And an AI can build all of it right alongside you.
// no credit card · one real page, free forever
Not a walled garden — a thin layer over the real stack
This is the heart of Codelab. A prop value is either a literal or a {{ … }} expression resolved at render time — so your UI reads and writes live state without a single line of glue.
// bind the input to live form statevalue: {{hooks.rsvpForm.values.email}}error: {{hooks.rsvpForm.errors.email}}onChange: call-hook setFieldValue( "email", {{event.target.value}} ) // greet the signed-in visitorchildren: "Welcome back, " + {{session.user.email}}
Reactive local stores hold typed state, and actions are modular and chainable — this is the actual store editor from the builder, not a picture of one. Marketing builders stop at layout; Codelab runs the whole interaction.
Codelab isn't a fixed set of blocks. Drop in production component libraries — coss, Material UI, and more — then compose your own reusable components in the builder and use them everywhere. This is the actual component palette from the builder.
Tailwind is the design system. Edit theme variables, compose class names, and create variants — the same tokens your engineers would ship, exposed on the canvas. Change a token, and it cascades everywhere.
Everything you can do on the canvas, an AI agent can do too — through the exact same MCP tools. Chat drives the canvas live, and every edit flows through one shared path. Build with an agent, then take the controls yourself. No separate “AI mode.”
you ▸ add a pricing section with three tiers codelab add_element( Section "Pricing" )codelab add_element( PricingCard × 3 )codelab create_store( billing.period )codelab update_props( bind → {{billing.period}} )// ✓ rendered on your canvas, live
The parts that turn a demo into something you ship — and keep running.
The canvas renders through the exact same pipeline as your published site. Pixel-for-pixel render parity — no editor-vs-production drift.
A page tree with shared layouts and outlets, nested routing, and custom domains & paths. Real sites, not one-pagers.
Typed checkpoint history — step back through every change, human or AI.
Nesting rules stop invalid markup before it happens; labels are required.
Build on a dev environment, then promote to production. A real pipeline.
Other tools hand you an “eject to code” button — an escape hatch for the day you outgrow them. That day is the day their builder gave up. Codelab runs on real code from the very first click, so there's no wall to hit and nothing to escape.
Tell Codelab what you want, or start dragging. The AI scaffolds real elements on the canvas.
Bind props to live state, tune Tailwind tokens, wire actions and auth. Full control, no lock-in.
Promote to production and publish to your domain. What you saw is exactly what gets published.
Token-gated event invites, Supabase auth & data — front to back on Codelab.
Multi-page marketing with a live pricing toggle bound to a store.
Data-bound tables and forms over your own backend, behind auth.
Every prop on the canvas is a live expression. Here’s what falls out once your UI reads straight from state.
Jul 2026 · 6 min readReal code underneath means the ceiling never arrives — and you never have to leave the builder to break through it.
Jul 2026 · 4 min readThe same MCP tools you use by hand, handed to an AI: scaffold real elements, bind state, ship — live on the canvas.
Jun 2026 · 5 min readOne real page, free forever. Bring an AI, or build it yourself.