Code Canvas

Describe it. Ship it.

Say what you want and watch Theo build it in a live preview at a real URL — or start from one of 164 real templates. Add a database and user accounts when you need them, then publish with one click.

Build your first appBrowse 164 templates
serenity.preview.opencharts.com
Build chat
  • Scaffolding index.html
  • Styling the treatment menu
  • Wiring booking and gift cards
  • Preview synced
Theo is building your site

That's a real template from the library rendering its actual code — open it live to click around.

Live preview at a real URL✳164 real templates✳Built-in Postgres✳User accounts and auth✳Four coding tiers✳Game Canvas✳One-click publish✳Brand-aware builds✳Live preview at a real URL✳164 real templates✳Built-in Postgres✳User accounts and auth✳Four coding tiers✳Game Canvas✳One-click publish✳Brand-aware builds✳
Template library

Start from a real site, not a blank file.

Code Canvas ships with 164 templates — every one built in the editor itself. The tiles below render each template's actual code. Open one live, click around, then make it yours by chatting.

164 templates · 8 categories · every tile is live code, not a screenshot

Browse them all in the editor
Iterate in plain English

Ask for a change. Watch it land.

Every request is a real edit to real files. Pick one and see what changes in the preview and in the code.

Live preview
What Theo changed

Restyled the hero section and added a primary button.

  • styles.css+14-6
  • index.html+4-1
Visual editNo rebuild needed
+18 -7 across 2 files, validated before it shipped
Pick your engine

One dial from fast to frontier.

Every build has a right speed. Stay on Fast for a flurry of small tweaks, drop to Max for a rewrite, reach for Ultra when a build fights back. Switch any time — it is one control in the editor.

Theo Code

Default

The everyday workhorse

Handles most of what you ask for — multi-file changes, auth scaffolding, new pages — with balanced speed and reasoning. Where most builds live.

Speed
Speed: 75%
Depth
Depth: 75%
Best for
  • Most edits and new features
  • Auth and data wiring
  • Multi-file changes
Code Canvas building a web app with a live preview
A real URL, not a mockup

What you see is what publishes.

Every project serves at its own preview subdomain with real multi-page navigation, working forms, storage, and database queries.

Game Canvas

Type a game. Play it.

Game Canvas is Code Canvas with a game engine attitude: two dedicated Theo Yoyi tiers, sprites and sound generated to order, and a build you can play the moment it lands. Don't take our word for it — press play.

whack-a-mole.preview.opencharts.com
Build chat
a whack-a-mole arcade game with combo scoring and juicy hit effects
  • game.js — core loop + combo scoring
  • sprites/ — 8 sprites drawn to order
  • sfx/ — 3 hit sounds + a score loop
Playable build ready

This is the real whack-a-mole template from the library, running its real code. Tap the moles, chase the combo.

sandboxed · starts only when you press play · your keyboard stays yours

Theo Yoyi

Fast engine

Rapid game iteration and live tweaks — nudge the difficulty, juice the hit effects, rebalance a level in seconds.

Theo Yoyi Max

Deep engine

Full game builds and complex mechanics — physics, state machines, enemy AI, and multi-level progression.

Assets included

  • Sprites drawn to order
  • Sprite sheets cut to exact frames
  • Sound effects + music loops
  • Phaser and Three.js under the hood

More games you can play right now

From the arcade

Node Blaster was built here too.

Our arcade shooter — sprites, sound, scoring, screen shake, the lot — was designed and developed in Game Canvas. It lives in the OpenCharts arcade, and it is exactly what your prompts can grow into.

Play Node BlasterHow the arcade works
Capabilities

From prompt to product.

Everything you need to go from an idea to a shipped app, without leaving the chat.

Build by chatting

Describe the outcome in plain English. Theo plans the build, writes the code, and iterates on your feedback.

Live preview at a real URL

Every project runs at its own preview subdomain with true multi-page navigation, not a sandboxed toy iframe.

Built-in database

Each project can provision its own Postgres database. Theo creates tables, seeds data, and wires your app to it.

User accounts and auth

Turn on authentication and your app gets sign-up, sign-in, and per-user data scoping with no backend work.

One-click publish

Ship the finished site to a public link instantly. Keep iterating, and updates republish in seconds.

Brand-aware builds

Drop in a brand guide, a logo, or your website URL and the build uses your real palette, fonts, and imagery.

Self-healing edits

Runtime errors are caught and fixed automatically, and every change is validated before it reaches your preview.

A template head start

164 real templates — landing pages, dashboards, stores, portfolios, and games. Open one live and make it yours by chatting.

Real code, yours

A full file tree, code editor, version history, and diffs. Inspect or hand-edit anything Theo writes.

1
Click to publish
0
Lines you have to write
1
Postgres database per project
100%
Of the code is yours
$theo build --preview --database --publish
How it works

Four steps to a shipped app.

01

Describe your app

“A booking site for my day spa” is enough. Start from scratch or from a template, and attach brand assets if you have them.

02

Theo builds a working first version

A complete, navigable site lands in the live preview with pages, styling, interactions, and data wired up.

03

Iterate in plain English

“Make the hero darker,” “add a contact form,” “store signups in the database.” Every change lands in seconds.

04

Publish and share

One click ships it to a public URL. Add a database and auth when you are ready to go from site to product.

An app being built and previewed inside Code CanvasCode Canvas

The whole loop, in one window

Chat, code, preview, database, and publish live side by side.

Open Code Canvas
Questions

Everything before your first build.

Do I need to know how to code?
No. You describe what you want and Theo writes the code. If you do code, everything is inspectable through a full file tree, editor, and version history, so you can hand-edit anything.
Can my app store data and have user accounts?
Yes. Every Code Canvas project can provision its own Postgres database, and authentication can be enabled with a click, including sign-up, sign-in, and per-user data scoping. Theo creates tables, seeds data, and wires the app to them for you.
Is the preview real or a mockup?
Real. Each project serves at its own preview URL with true multi-page navigation, working forms, storage, and database queries. What you see is what publishes.
How do I put my site live?
Click Publish and your project ships to a public link. You can keep iterating afterward, republishing takes seconds, and you can make previews private if you are not ready to share.
Can it match my brand?
Yes. Attach a brand guide or logo, paste your website URL, or specify exact colors. Builds use your real palette, typography, and imagery instead of generic styling.
Do I have to start from a blank page?
No. Code Canvas ships with 164 real templates across landing pages, SaaS sites, dashboards, stores, portfolios, blogs, web apps, and games. Every template is a working site you can open live, click through, and then reshape by chatting — the template becomes your project, not a locked theme.
Which coding tier should I pick?
Theo Code, the default, is right for most builds. Theo Code Fast is for quick copy and style tweaks, Theo Code Max digs into multi-page apps with data and auth, and Theo Code Ultra brings maximum reasoning for the gnarliest builds and refactors. You can switch tiers per message, so start on the default and reach for Max or Ultra when a change is genuinely hard.
Can it really build games?
Yes. Game Canvas builds run on dedicated game engines with the Theo Yoyi tiers, and Theo generates the sprites, sound effects, and music to go with your code. Games are playable right in the live preview — this page has a few you can play, all built as Code Canvas templates.
Soft clouds drifting across a bright sky

Your next app is one sentence away.

Start on the free plan, build in the live preview, and publish when it looks right.

Build your first appRead the docs
Free plan No credit card Export your code anytime