Code Canvas
Code Canvas is OpenCharts’ in-browser coding workspace — a Sandpack-powered live preview, multi-file editor, terminal, file tree, AI iterations, and a per-project Postgres database.
In depth
Code Canvas is where Theo-generated code projects live. The web version provides Sandpack live preview, a code editor, runtime error surfacing, and a “Try-to-fix” one-click repair flow. The desktop (Theo Desk) version adds a real PTY terminal, a multi-tab file tree, a CodeMirror editor, and a local working directory mirrored to disk.
Every project optionally enables a managed Neon Postgres database with per-project credentials, SDK helpers (window.__db, window.__auth), and an end-user auth surface — so AI-built apps can ship with real persistence and login.
Examples
- A todo app with login
- A leaderboard with real-time data
Also known as
Want to put this concept to work in OpenCharts?
Open Code CanvasRelated terms
Code Canvas Database
The Code Canvas Database is a managed per-project Postgres instance — accessible from generated apps via window.__db, with end-user auth, seeds, CSV import, schema history, and one-click revert.
Code Share Artifact
A code share artifact is a public link to a Theo AI code project — recipients see a live preview, an HTML render, and the source files, no signup required.
Code Mode
Code Mode generates live, multi-file code artifacts with an in-browser preview — share, fork, and iterate on React, Vue, vanilla JS, Python, or full-stack apps without leaving chat.
Try-to-Fix
Try-to-Fix is the one-click repair button in Code Canvas — when runtime errors appear, it sends the last 20 errors back to Theo to patch the code automatically.