Sketch UI wireframes on an infinite canvas, and convert them instantly into production-ready React + Tailwind CSS, Vue 3, Svelte, or HTML5 code.
Quickstart · Features · Architecture · CLI Usage
CanvasCode is a self-hostable, open-source alternative to proprietary visual AI tools like v0.dev and Bolt.new. It provides an intuitive drawing whiteboard equipped with wireframe components (buttons, input fields, container cards, text headers, freehand sketch elements) and synthesizes clean, responsive frontend code in real-time.
https://github.com/user-attachments/assets/demo.mp4
- 🎨 Interactive Wireframe Canvas: Sketch freehand UI ideas, place pre-built buttons, inputs, and container cards, or drag & drop component primitives.
- ⚡ Instant Code Synthesis: Synthesize clean, responsive code in < 100ms using our offline synthesis engine or connect your own LLM API key.
- 🛠️ Multi-Framework Export:
- ⚛️ React + Tailwind CSS
- 🌐 HTML5 + Modern CSS3
- 🟢 Vue 3 (Composition API)
- 🧡 Svelte 4/5
- 📱 Responsive Live Sandbox: Preview generated components in real-time inside an isolated sandbox with device viewport switches (Desktop, Tablet, Mobile).
- 🚀 Pre-Built Starter Templates: Instant wireframe presets for Hero sections, SaaS Analytics Dashboards, 3-Tier Pricing Tables, and Login Modals.
- 💻 Command-Line Executable (
v0-cli): Launch the workspace instantly from your terminal withnpx canvascode. - 🔒 Privacy-First & Offline Ready: Runs 100% locally on your machine with zero external tracking or mandatory API dependencies.
graph TD
A["🎨 Interactive Canvas (HTML5 / React)"] --> B["🧠 AI Compiler Engine"]
B --> C1["⚡ Built-in Offline Engine"]
B --> C2["✨ Gemini 2.5 / 3.5 API"]
B --> C3["🧠 Claude 3.7 Sonnet API"]
B --> C4["🤖 OpenAI GPT-4o API"]
C1 --> D["📦 Unified Code Synthesizer"]
C2 --> D
C3 --> D
C4 --> D
D --> E1["⚛️ React + Tailwind"]
D --> E2["🌐 HTML5 / CSS"]
D --> E3["🟢 Vue 3"]
D --> E4["🧡 Svelte"]
E1 & E2 & E3 & E4 --> F1["📱 Sandboxed Live Preview"]
E1 & E2 & E3 & E4 --> F2["💻 Code Editor & Download"]
npx canvascode# Clone repository
git clone https://github.com/Nithinfgs/canvascode.git
cd canvascode
# Install dependencies
npm install
# Start local development server
npm run devOpen http://localhost:3000 in your browser.
CanvasCode includes a built-in CLI binary executable (bin/canvascode.js).
# Launch interactive web app
canvascode
# Launch on custom port
canvascode --port 8080
# View command help
canvascode --helpCanvasCode works out-of-the-box with zero configuration using the built-in offline compiler. If you prefer to use state-of-the-art vision models:
- Click the Offline Engine button in the top navigation bar.
- Select your provider (Gemini API, Claude API, or OpenAI API).
- Paste your API key and specify your desired model ID (e.g.
gemini-2.5-flashorclaude-3-7-sonnet). - Click Save Settings. (Keys are kept strictly in browser local storage).
Contributions are warmly welcomed! Please check out open issues or submit a pull request.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.