compare /pencil Paper vs Pencil

Real HTML/CSS canvas vs custom design renderer

Paper is a professional design tool built on real HTML and CSS — a web-native approach that makes it easy for AI agents to collaborate and gets your work ready for production. Since it’s a web app, you can simply share a URL with your entire team and access it from any device. Built for professionals, it supports Display P3 color, gradient interpolations, advanced typography controls, visual effects, built-in AI image tools and much more.

Pencil runs as a desktop app built on WebGL that integrates with your IDE and stores designs as a proprietary JSON format saved to a Git repository. AI agents can read and write to its proprietary node format, though translation to production code is required.

Key Differences

Feature Paper Pencil
Canvas model Real HTML/CSS — web-native, no translation step. Agents read and write the same language they were trained on. WebGL canvas, .pen JSON format — requires translation to HTML/CSS
Platform Web and desktop app — open in any browser Desktop app + IDE extension
Collaboration Real-time multiplayer — share a URL with your team Local, single-user
Color P3 wide gamut, OkLCh/OkLab perceptual color science, gradient interpolation, palette extraction and more Hex sRGB color
Typography System and web fonts, variable settings, OpenType features and CSS native properties System and web fonts
Effects High-end visual effects powered by shaders, image filters, CSS filters, backdrop filters, shadows Shadows, blur, backdrop blur

Paper & claude code is the perfect combo to ship custom web stuff.

I can confirm that :)

Other Comparisons