Canvas

The canvas is where design and code meet in Velork. Paste from Figma, capture from the web, or refine layouts with Agent in Design mode — then implement selections in Develop mode.

Open Canvas

Switch to Canvas from the title bar, or press Cmd + Alt + C.

The Design sidebar has two sections:

• Pages — New Page, Delete Page, switch between canvas pages (including Inspiration)
• Layers — Find... search, hide/show, lock/unlock, layer tree for the selection

Canvas toolbar

Drawing and layout tools include Move, Hand, Frame, Rectangle, Circle, Pen, Text, Line, and Comment. Use the actions menu for Capture inspiration from a website or desktop app.

Layout preference toggles (also on the keyboard shortcuts page): snapping, snap to guides/objects/pixel grid, rulers, pixel grid, highlight on hover, dimensions on objects.

Bring designs onto the canvas

Edit layers

• Move and resize with drag handles
• Group — Cmd + G; Ungroup — Cmd + Shift + G
• Duplicate — Cmd + D
• Component — Cmd + Alt + K
• Undo / Redo — Cmd + Z / Cmd + Shift + Z

Toggle snapping, pixel grid, and rulers from the canvas toolbar.

Generate code

Select a frame, open chat in Develop mode, and describe the target stack:

Implement this selection as a React component with Tailwind. Match spacing and type from the design tree.

Review output in Editor and embedded Preview before merging.

Plan limits

Figma pastes and web captures count toward monthly design frame limits on Free. Pro and Team are unlimited. See Plans and usage.

Next steps

Preview

Live dev server preview inside Canvas

Inspiration

Capture websites and desktop apps

Chat

Prompt patterns for canvas-backed UI work

Keyboard shortcuts

Canvas shortcut reference