A visual canvas playground for vision-language models. Draw sketches, describe what you want, and the model generates complete HTML/CSS/JS — rendered live in a side-by-side preview.
BYOK (Bring Your Own Key). No backend. Runs entirely in the browser.
A demo recording is available at
screenshot/rec.mp4.
- Draw — Sketch wireframes, paste screenshots, drop reference images onto an Excalidraw canvas
- Describe — Type a prompt: "Turn this into a landing page", "Generative art piece", or just "Make it beautiful"
- Generate — The model sees your canvas + prompt and streams a complete, self-contained HTML file
- Refine — Click Refine to iterate. The model sees the original sketch, a screenshot of the current output, and your feedback
| Provider | Models | Get a key |
|---|---|---|
| z.ai | GLM-5V Turbo | z.ai |
| Gemini 3.1 Pro, Flash, Flash Lite | AI Studio | |
| Fireworks | Kimi K2.5 Turbo (Fire Pass) | Fire Pass |
| OpenRouter | Claude 4.6, Gemini 3, Grok 4.1, Qwen 3.5, MiMo V2, Kimi K2.5 | OpenRouter |
| Custom | Any OpenAI-compatible endpoint | — |
OpenRouter also supports searching and selecting from 100+ vision models via the API.
npm install
npm run devOpen http://localhost:5173. Click the model button in the header to configure your provider and API key.
# Default (base path /)
npm run build
# For deployment at /vcanvas/
npm run build:gh
# Custom base path
VCANVAS_BASE=/your/path/ npm run build- Multi-provider — Switch between providers and models in one click. Keys stored per-provider in localStorage.
- Frame selection — Create named frames on the canvas to send specific regions to the model instead of the full canvas.
- Plan mode — Three-phase generation: Gaze (deep image analysis) → Dream (creative ideation) → Create (implementation). Slower but more intentional results.
- Thinking visualization — Models that use chain-of-thought reasoning (DeepSeek, Kimi, Gemini) show their thinking process in a collapsible panel during streaming.
- Live streaming — Watch the HTML stream in with token count, speed graph, and phase detection.
- Refinement loop — The model captures a screenshot of the current output and uses it alongside your sketch for iterative improvement.
- Save/Load — Export and import canvas drawings as JSON.
src/
App.tsx — Main orchestrator, state management
main.tsx — Entry point
components/
Canvas.tsx — Excalidraw instance
FramePicker.tsx — Frame thumbnail strip, selection
PromptBar.tsx — Text input, Generate/Refine, Plan toggle
Preview.tsx — Sandboxed iframe renderer
StreamOverlay.tsx — Live code viewer, thinking, speed graph
PlanOverlay.tsx — Gaze/Dream/Create phase viewer
ProviderModal.tsx — Provider/model settings popup
Header.tsx — App header, model status
MessageStrip.tsx — Chat history chips
ResizeHandle.tsx — Panel resize
lib/
api.ts — Streaming (OpenAI-compat + Gemini), HTML extraction
providers.ts — Provider configs, model lists, state persistence
export.ts — Canvas → PNG export
store.ts — Shared types
styles/
globals.css — Design tokens, base styles
app.css — Layout, overlays
Built on Excalidraw — the open-source virtual whiteboard that powers the drawing canvas. Excalidraw is licensed under MIT.
MIT