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 |
Other Comparisons
- Paper vs Figma — Real HTML/CSS canvas vs proprietary design tool
