Overview

The AI infinite canvas

Drawva is a tile-based infinite whiteboard engine powered by a multimodal AI perception agent. You sketch freely; Drawva photographs the canvas, understands your intent, and renders professional diagrams, formulas, charts, and interactive applets directly below your ink.

Draw anything
Vector ink, text, shapes, and formulas on an infinite 2D space.
AI perceives it
A multimodal agent reads a live snapshot plus scene context of your ink.
Pro visuals appear
7 diagram formats, LaTeX math, function plots, and live-data applets.
How the AI loop works
One pipeline, every request. The AI can only request changes — strict validators decide what actually draws.
1. Draw2. Snapshot3. Prompt build4. Model picks tools5. Validators6. Render

Drawva captures a WebP photo of your viewport (max 2048px) plus a compact JSON scene — ink bounds, widgets, objects. The model receives both and replies with structured commands (write_text, draw_formula, diagram_source, html_widget…). Every command is validated — allowed tools, coordinate clamps, size caps — then rendered anchored below your newest ink.

Overview

Quick start

From blank board to your first AI-generated diagram in under a minute.

  1. 1Open the canvas. Your board autosaves locally — no account needed.
  2. 2Press the Menu button → AI Settings & Keys, pick a provider, paste your API key, and hit Connect (or apply a local preset — see Provider Setup).
  3. 3Pick a vision model from the model selector in the header.
  4. 4Sketch something with the P pen — a rough flowchart, a formula, or the words "plot sin(x)".
  5. 5Toggle Auto AI on, or press Ask AI. The result renders as a widget just below your ink.
Canvas

Tools & shortcuts

Nine tools live in the header toolbar. Every one has a single-key shortcut; the color palette and stroke-width picker sit right beside them.

ToolKeyWhat it does
SelectVClick to select an ink cluster, drag a marquee on empty canvas, then move, lift, or erase the selection.
HandHPan around the infinite canvas. Middle-mouse drag pans from any tool.
PenPDraw smooth vector ink strokes. The primary way to sketch ideas for the AI to perceive.
EraserEPrecision stroke eraser — removes whole intersecting strokes.
TextTInsert an editable text box. Double-click existing text to edit.
RectangleRDraw a vector rectangle shape.
EllipseODraw a vector ellipse shape.
ArrowADraw a directed arrow — great for pointing at things you want the AI to act on.
General shortcuts & gestures
Keys / GestureAction
CtrlZUndo
CtrlShiftZRedo (also Ctrl+Y)
DeleteDelete active marquee selection or selected object/widget
EscClear selection / close text editor
ScrollPan the canvas
CtrlScrollZoom (also trackpad pinch)
Middle-dragPan from any tool
PinchTouch: two-finger pinch to zoom & pan
Canvas

Saving & export

Drawva is local-first. Everything you draw is autosaved to your browser; nothing ever touches a server.

Autosave
Every edit is debounced into IndexedDB (drawva-canvas-db). Close the tab, come back tomorrow — your board is exactly where you left it.
Export PNG
Menu → Export PNG. Renders your board to a crisp image file, widgets included.
JSON Project
Menu → Save JSON Project for a portable full backup, then Open JSON Project… on any device to restore it.
AI

AI provider setup

Drawva is bring-your-own-key. Any OpenAI-compatible endpoint works — cloud APIs, gateways like OpenRouter, or fully local servers. Configure everything in the AI Settings dialog.

Menu → AI Settings & Keys → Provider tab
Connect a cloud provider
Three steps, then you are done.
  1. In the Provider tab, choose a provider card — the correct Base URL is prefilled.
  2. Paste your API key. The Get API key link jumps straight to the provider's key console.
  3. Press Connect. Drawva verifies the key against the endpoint, lists the available vision models, and auto-selects the first one.

Switch models anytime via Menu → Select AI Model or the Settings → Models tab. Reasoning-capable models additionally expose a reasoning-effort control (Auto / Low / Medium / High / Max).

Supported providers
Built-in presets with prefilled endpoints and default vision models.
ProviderGet a key
OpenAIplatform.openai.com/api-keys
Anthropicconsole.anthropic.com/settings/keys
Google Geminiaistudio.google.com/app/apikey
Groqconsole.groq.com/keys
NVIDIA NIMbuild.nvidia.com
Custom Endpointopenrouter.ai/keys (for OpenRouter)
AI

Local models: Ollama, LM Studio & gateways

Run the AI entirely on your own hardware, or route through a model gateway. One-click presets live in the Models tab.

Menu → AI Settings & Keys → Models tab → Local & Gateway Presets
Ollama Local
http://localhost:11434/v1
Local open-source models. Ships with LLaVA and Llama 3.2 Vision model IDs pre-registered.
LM Studio
http://localhost:1234/v1
Uses whatever model is currently loaded in LM Studio's local server.
OpenRouter Gateway
https://openrouter.ai/api/v1
One key, hundreds of models. Vision-capable models are auto-filtered when listed.
AgentRouter Gateway
https://agentrouter.org/v1
Gateway router with frontier model IDs pre-registered.
Ollama walkthrough
Fully offline, fully private canvas AI.

Pull a vision model and keep the server running:

ollama pull llava          # or: llama3.2-vision, qwen2.5vl
ollama serve               # default port 11434

Then in Drawva, either press the Ollama Local preset button, or pick Custom Endpoint in the Provider tab with Base URL http://localhost:11434/v1, any API key (e.g. ollama), and press Connect.

Custom model IDs
For self-hosted endpoints that don't implement the /models listing.
In the Models tab → Custom Models, add any model ID manually (e.g. qwen2.5-vl) with a friendly label. It appears in the model selector immediately — no Connect step needed. Remove the ones you don't want with the trash button.
AI

Generation modes

Use fast one-shot generation while you sketch, or open Drawva Agent when a task needs several steps and verification.

Auto-Delay Mode
Auto toggle ON
Auto AI toggle

With Auto AI on, Drawva perceives your canvas automatically ~1.5s after you finish drawing. Ideal for continuous live sketching.

On-Demand Mode
Ask AI button
Ask AI button

Auto is off by default, so you can sketch without interruptions. Whenever you want analysis, press Ask AI.

Working with generated widgets
AI output lands on the canvas as an interactive widget.
One-shot draftsOne-shot AI widgets start as drafts with an action bar. Keep them with the check, or drop them with the cross.
Agent changesDrawva Agent applies validated changes immediately, one history step at a time. Use the normal Undo shortcut if needed.
Fullscreen & resizeExpand to fullscreen or drag the corner to resize — content reflows automatically.
Copy sourceGrab the clean source (Mermaid code, Vega-Lite JSON, HTML…) with one click.
Refine by drawingDraw or write near a widget and hit Ask AI — one-shot AI reads it and updates that widget in place. For a chat task, use Drawva Agent.
AI

Drawva Agent

Use the Agent button for multi-step work. The Agent can inspect your canvas, use your enabled plugin capabilities, make changes, check the result, and continue until the task is complete.

Start a task
Open the chat and workflow panel from the canvas header.
  1. Open the canvas and choose an API provider and model in AI Settings.
  2. Click Agent in the header. The panel opens on the right and can be resized from its left edge.
  3. Type a request such as "Create a clean summary card below my drawing." You can attach up to five images.
  4. Use Steer to add a requirement while the Agent is working, or use Stop to cancel the current turn.
How an Agent turn works
The Agent works in small steps instead of returning one large command list.
1. Message2. Inspect3. Use a tool4. Read result5. Verify6. Answer

The browser canvas remains the source of truth. The server sends one model step at a time, while the browser runs the canvas tool locally and sends the result back to the next step. This lets the Agent correct its plan when the canvas changes.

The Agent's tools
Each step uses at most one tool. Changes are validated before they reach the canvas.
ToolPurpose
canvas_scanList objects, widgets, boxes, and the current canvas revision.
canvas_readRead the content or source of one text object or widget.
canvas_snapshotCapture the canvas or a region. Coordinate labels help the Agent place content accurately.
canvas_applyApply validated text, formulas, plots, drawings, widgets, diagrams, or erasures in one history step.
canvas_patch_widgetMake a small unified-diff edit to widget.html or widget.source instead of resending the full widget.
canvas_focusMove the camera to the canvas, an object, or a region without changing content.
canvas_undoUndo one recent canvas history step when the Agent needs to recover.
load_pluginLoad one enabled plugin card only when the task needs that capability.
Accurate placementSnapshots include global coordinate labels and scale information. The Agent can capture its result and correct overlap or clipping.
Safe changesEvery mutation uses a revision number and the existing command validators. If you edit during a turn, the Agent must read the newer canvas state first.
Lower token costPlugin cards load only when needed, old images become small notes, and widget patches send changed lines instead of full HTML.
AI

Capability plugins

Plugins are markdown capability cards that teach the AI new tricks — live weather, stock tickers, earthquake feeds, image search, and more. Eleven ship out of the box.

Menu → AI Settings & Keys → Plugins tab

Each plugin card shows its category, version, source, and the live endpoints it may call. Toggle any card ON or OFF — changes apply to the very next generation.

Disabling a plugin removes it from the AI's prompt entirely, and the safety validator drops any command that still tries to use it. Widgets already on your canvas are unaffected. Fewer enabled plugins = a smaller, faster, cheaper prompt.

Bundled: general, flowchart, weather, stocks, earthquakes, exchange-rates, github-pulse, image-search, natural-events, space-weather, tech-news.

AI

Token usage

Every one-shot request and Drawva Agent step reports token consumption, and Drawva keeps a local audit trail so you can see what a session costs.

Settings → Usage tab

Menu → AI Settings & Keys → Usage

Four live counters — Requests, Prompt, Completion, and Total Tokens — plus a per-request history showing time, provider, model, and in/out/total tokens. Agent turns can contain several model steps, so one task may use several requests. A Clear button resets the trail.

AI Request Logs

Menu → AI Request Logs

The full debug view: one-shot requests with their prompt, model reply, and token usage line (in / out / total). Agent activity is shown in the Agent panel with tool status and cumulative turn tokens.

The last 200 requests are kept, stored only in your browser's localStorage (drawva.tokenUsage). Counts come from the provider's response metadata; local servers that don't report usage will show zeros.

Collaboration

Live P2P sync

Share your canvas with another phone, tablet, or laptop in real time. No account, no cloud storage, no database — just a 6-digit code.

Menu → Live P2P Sync
Host a session
  1. Open Live P2P Sync and stay on the Generate Code (Host) tab.
  2. Press Generate Connect Code — a 6-digit code appears.
  3. Share it. The other device enters it under Enter Code (Join).

The status banner shows Hosting with a Copy Code button and the live peer count.

Join a session
  1. Open Live P2P Sync → Enter Code (Join).
  2. Type the host's 6-digit code.
  3. Press Connect to Device. The host's board streams over and you go live.

While linked, the header shows a Connected P2P badge. Press Disconnect anytime.

How it works under the hood
  • SignalingPeerJS's public broker is used only for the initial handshake. After that, all traffic is direct.
  • TransportCanvas data flows peer-to-peer over WebRTC data channels — strokes, erases, moves, widgets, even full tile images.
  • BootstrapWhen you join, the host streams its complete snapshot (scene objects, widgets, and ink tiles) first. Large payloads are chunked to ~12KB packets to stay under data-channel limits.
  • PresenceRemote cursors appear live with each peer's name, color, and active tool.
  • RecoverySession roles persist locally, so a page reload automatically re-hosts or rejoins your last session.

Tips: keep the host tab open — it is the source of truth for joiners. Same-network connections are fastest; across networks, standard WebRTC NAT traversal applies.

Reference

Diagram & widget formats

The AI speaks ten visual languages, each rendered by a dedicated engine inside a sandboxed widget.

FormatBest for
MermaidFlowcharts, sequence diagrams, gantt charts
Graphviz DOTDependency graphs, trees, network layouts
Vega-LiteStatistical charts, bar/line/area graphs
SMILESChemical molecular structures
BPMN XMLBusiness process workflow diagrams
Cytoscape JSONInteractive network & relationship graphs
GeoJSONGeographic and spatial maps
LaTeXTypeset math formulas via draw_formula
Function Plot2D graphs of math expressions via plot_function
HTML AppletRich interactive widgets, live-data dashboards

You can also insert any of these by hand: Menu → Insert offers Interactive Applet, Diagram, LaTeX Formula, Math Function Plot, and Image File.

Reference

Frequently asked questions