Buttery smooth performance
Thousands of layers stay smooth as you pan, zoom, and edit powered by a custom WebGL pipeline.
Drift
Echo
Flare
Nova
Onyx
Nova
Never start
from scratch.
Import any part of any app onto
the canvas.
Made in pen.dev.
Bring any model
to the canvas.
Claude
Open AI
Grok
Qwen
Gemini
Kimi
Deepseek
Minimax
Use with ChatGPT or Claude subscription,
add API keys or connect via MCP, WebMCP or CLI.
Design with agents directly on the canvas. Refine manually or fire up agents.
Design with agents directly on the canvas.
Refine manually or fire up agents.
HTML import
Components
Figma import
Open format
Built-in browser
Open any page inside the app and import it straight onto the canvas.
Vibe Shaders. Create stunning visual effects with shaders.
Vibe Shaders.
Create stunning visual effects with shaders.
Shaders
Visual effects powered by real-time shaders gradients and textures at your fingertips.
Variables
Snapping
Chrome extension
Slots
Pen tool
Draw paths, edit curves, and paste SVG code straight into your designs with ease.
AI Pen. Draw icons and illustrations with agents.
AI Pen.
Draw icons and illustrations with agents.
UI Libraries
Share component sets across files and keep every project in sync.
Measurements
Layers panel
Effects
Pixel grid
Familiar shortcuts
The shortcuts you know from Figma and Sketch work the same way here.
Design via MCP in addition to the on-canvas agent. Connect Claude Code, Codex, Hermes, Antigravity, Cursor or any agent to pen.dev through MCP.
You can also design headlessly with pen.dev CLI.
Gradients
Edit linear, radial, angular and mesh gradients right on the canvas.
Built-in design skills
Elevate your work with built-in industry standard design skills.
Export 1x, 2x, 3x…
Slides
HTML export
Directly export any frame as HTML
and CSS/Tailwind in 1-click.
Flex layout
Scale
Share by link
Send a link and anyone can open the latest version in their browser.
The design features
you expect.
Feel like at home.
Buttery smooth performance
Thousands of layers stay smooth as you pan, zoom, and edit powered by a custom WebGL pipeline.
Pen tool
Draw paths, edit curves, and paste SVG code straight into your designs with ease.
Shaders
Visual effects powered by real-time shaders gradients and textures at your fingertips.
Figma import
Import .fig files with layouts, styles and images.
Or just copy/paste from Figma directly.
Built-in browser
Open any page inside the app and import it straight onto the canvas.
Chrome extension
Copy any webpage in Chrome.
Paste to the canvas as editable layers.
HTML import
Import any webpage as editable layers
via built-in browser.
Components
Create reusable symbols with overrides
and combine them in complex layouts.
Gradients
Edit linear, radial, angular and mesh gradients
right on the canvas.
Variables
Name your colors, spacing and type once
and reuse them everywhere.
HTML export
Directly export any frame as HTML
and CSS/Tailwind in 1-click.
UI Libraries
Share component sets across files and keep
every project in sync.
Component Slots
Reserve space inside a component for content
each instance fills in.
Familiar shortcuts
The shortcuts you know from Figma and Sketch work the same way here.
Scale
Resize a group, its text, strokes, radii and effects
all scale along with it.
Measurements
Hover to read exact distances between any two layers on the canvas.
Flex layout
Fill container, hug content, position absolutely,
align to edges.
Effects
Background blur, drop shadow and layer blur, stacked in any order.
Export 1x, 2x, 3x…
Export any frame as PDF, PNG, JPEG or WEBP
at the exact size you need.
Built-in design skills
Elevate your work with built-in industry standard design skills.
Snapping
Layers snap to edges, centers and equal spacing while you drag them.
Pixel grid
Design your icons and logos precisely. Snap
to pixels and half-pixels when drawing.
Layers panel
Reorder, hide, group, rename, and select any layer with full control.
Slides and Presentation mode
Build great looking slidedecks, organize them
in Slides view, and present like a pro.
Share by link
Send a link and anyone can open the latest version in their browser.
Open design format .pen
It's just a JSON file that allows agents to work with
it natively. Schema fully opened. See docs.
This list goes on and on and on…
Killer performance. 10000 photos, 10GB of content, 60fps, no problem.
Start building
your ideas today.
Design with agents, refine every detail on canvas,and ship it back to code.
Download pen.dev