w/02 · design tool · popcraft.app

PopCraft

the design app that pops.

what

a webgpu design tool for everything

codebase

410k lines · 2,167 commits

platform

web · macos

stack

webgpu · next.js · yjs · tauri

click to ka-pow

overview

Most creative work is split across apps: one for interfaces, one for painting, one for sprites, one for the whiteboard, one for slides. PopCraft puts all of it on a single canvas — and every pixel on that canvas is drawn by a hand-written WebGPU renderer.

Design, Draw, Animate, Prototype, Dev and PopCorn (whiteboard) are modes of one document, so a comic page can become a prototype can become a React export without leaving the file.

modes, one canvas

1,483

official templates

100%

rendered on the gpu

a cut of the launch trailer, built as a PopCraft file and exported by its own renderer

the challenge

A tool that does vectors, raster brushes, pixel art and whiteboards usually means four renderers fighting each other — and an editor UI drawn in a different system from the document.

PopCraft needed one rendering path for everything, real-time multiplayer that survives offline work, and an identity loud enough to make a pro tool feel like play.

01 · design

pro layout, on the gpu.

Vector editing, text, auto-layout, components and variants, with the selection, rulers, guides and snapping all drawn as instanced SDF geometry in the same renderer as the document.

→SDF text from exact glyph outlines, with its own shaper, hyphenation & text-on-path
→shape builder, crop-as-mask, boolean ops

02 · draw

paint like it's paper.

A tile-based raster brush engine with custom brush import, living in the same document as your vectors.

03 · pixel

a sprite studio inside.

Indexed pixel layers with frames, onion skin, palettes, sprite sheets and GIF export — a full sprite toolkit without leaving the canvas.

04 · comics & motion

panels, balloons, keyframes.

Comic pages with panels, gutters, balloons and halftones; an Animate mode with keyframes, behaviours, 3D layers and audio-reactive motion, exporting MP4, GIF and Lottie.

05 · shaders

fills you can program.

A node-based shader graph with presets — verified on the GPU against the hand-written WGSL it replaced, to within one colour level — plus a raw WGSL editor for people who want the metal.

06 · prototype & dev

from canvas to code.

Click-through prototypes with smart animate and state machines, then Dev mode exports HTML/CSS, React, a Next.js project, Tailwind, SwiftUI or email — or publishes a website straight from the file.

07 · plugins & agent

an ecosystem, not a feature list.

Sandboxed plugins over an RPC bridge with types generated from the runtime, a marketplace for plugins, widgets, themes, brushes, shaders and templates — and an AI agent with skills and subagents, powered by Hypery.

architecture

one renderer, local-first, multiplayer.

IndexedDB is the source of truth, so PopCraft works offline; Yjs layers real-time collaboration on top. Every surface — document and editor chrome — goes through one WebGPU renderer.

01
document
plain-JSON .popcraft files: pages + nodes, 9 document kinds
→
02
store
Zustand with node-patch undo
→
03
collab
Yjs CRDT, presence, per-user undo, compaction & checkpoints
→
04
renderer
WebGPU: instanced SDF shapes, SDF text, raster tiles, 18 WGSL shaders
→
05
io
PDF, SVG and brush import; EPS via plugin; PPTX export
→
06
shells
web (Next.js on Vercel), Tauri 2 desktop with tabs