English | 日本語
Draw infinite. Refine forever — with Bézier precision and a modern experience.
WebGPU-powered infinite canvas / vector drawing application with real-time collaboration.
- Infinite Canvas — Pan, zoom, and draw without boundaries
- Fast Rendering — Hardware-accelerated drawing that stays smooth on large canvases
- Brushes That Stay Editable — Paint like you would in any drawing app, then bend and redraw the line whenever you want
- Real-time Collaboration — Draw together, or open the same canvas from multiple devices on your own
- Vector Path Editing — Draw curves, then reshape them as much as you like
- Shape & Text Tools — Primitives, text on path, and Google Fonts integration
- Mesh Deformation & Gradients — Mesh-based deformation, linear/radial/mesh gradients
- Post-processing Filters — Blur, frost glass, drop shadow, and more
- Automation Scripting — Automate your work with scripts written in Syrup
- Undo/Redo — Full history, take back anything
- Import/Export — PNG / AVIF (HDR) / PSD export and portable
.papfdocuments - Companion Mode — Pair a phone or tablet and use it as a remote panel for brushes, colors, tools, and layers
- Desktop App — Runs as a native desktop app
| Category | Technology |
|---|---|
| Framework | Next.js, React |
| Rendering | WebGPU (WGSL shaders) |
| Styling | Tailwind CSS |
| State | Valtio |
| Collaboration | Yjs, y-websocket, PartyServer |
| Auth | Supabase Auth |
| Serialization | CBOR |
| Desktop | Tauri v2 |
| Testing | Vitest |
| Linting | Biome |
This is a Yarn 4 monorepo:
| Package | Description |
|---|---|
pkgs/web |
Main application (Next.js) |
pkgs/core |
Drawing engine (@paplico/core) |
pkgs/desktop |
Tauri v2 desktop app wrapper |
pkgs/syrup |
Syrup scripting language: parser, type checker, JS emitter, worker sandbox |
pkgs/avif-hdr |
AVIF HDR encode/decode |
pkgs/partykit-collab-server |
PartyServer server for cloud collaboration mode |
pkgs/webgpu-devtools |
Browser extension for inspecting the WebGPU pipeline |
- Node.js 24+
- Yarn 4 (via Corepack)
- A browser with WebGPU support (Chrome / Edge 113+)
The dev server (Next.js + WebSocket, and the collab server on wrangler dev) runs over HTTPS and reads a certificate from the .certs/ directory at the repository root:
.certs/
├── localhost-key.pem # Private key
└── localhost-cert.pem # Certificate
Generate them with mkcert:
mkcert -install
mkdir -p .certs
mkcert -key-file .certs/localhost-key.pem -cert-file .certs/localhost-cert.pem localhostyarn install
# Start development (Supabase + Next.js dev server + Storybook + collab server on wrangler dev)
yarn devThe dev server runs at https://localhost:5005.
# Run tests
yarn workspace pap test
# Visual regression tests
yarn workspace pap test:visual
# Type check
yarn workspace pap typecheck
# Lint and auto-fix
yarn lint:fix- Screen Space — Browser viewport pixels (origin: top-left, Y-down)
- World Space — Logical drawing coordinates (origin: center, Y-up, zoom-independent)
- NDC — Normalized device coordinates for WebGPU shaders
All element data is stored in world coordinates.
User Input → Tool → PaplicoCommands → YjsProvider → Yjs Doc
↓
React ← Valtio ← syncYjsToValtio
↓
WebSocket → Remote peers
Viewport-based WebGPU rendering with viewport culling, layer texture caching, and dirty-flag incremental updates. See specification.md for the full technical specification.
Paplico is licensed under the GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later).