Stick And Slap
Neubrutalist canvas editor in the browser — drop a photo, slap text + shapes + stickers, export PNG. Memes, thumbnails, social posts. 100% client-side, Svelte + TypeScript.
STICK·AND·SLAP
A neubrutalist canvas editor that slaps. Drop a photo, stick text + stickers + shapes, slap it down, export PNG. Built for memers, thumbnail-makers, and anyone who wants to post something loud.
★ WHAT IT DOES
- Pick a preset — YouTube Thumb, Instagram Post, IG/TikTok Story, X Post, or Freeform
- Drop an image or press
T/R/C/B/X/Ato add text / rect / circle / speech bubble / star / arrow - Transform handles — 8 resize handles + rotate handle, drag to move, shift for uniform scale, alt for center-anchored
- Multi-select — marquee drag or shift-click to grab many, group-move preserves relative positions
- Snap to guides — pink guides appear when edges or centers align with canvas or other layers
- Full keyboard — JKL-style shortcuts, arrow-key nudging, undo/redo/duplicate/reorder
- Layer panel + inspector — show/hide, lock, delete, tweak color/font/opacity/rotation/stroke
- Export — walks the scene graph and re-renders to a canvas pixel-perfect. Downloads PNG at native resolution
✦ DESIGN LANGUAGE
Hard-inverse of the tactile-console aesthetic. White paper base, 2–3px black strokes, offset solid shadows (4px 4px 0 #000 — no blur), saturated color blocks (hot pink, acid yellow, cobalt, mint, tangerine, lilac), chunky Archivo Black headlines, Caveat handwritten accents, bouncy spring animations.
Every panel is a peeled-off sticker. Every button pushes into its own shadow on press. Decorative scribbles drift gently in the background.
⌨ CONTROLS
| Action | Keys |
|---|---|
| Add text | T |
| Add rectangle / circle | R / C |
| Add speech bubble / star / arrow | B / X / A |
| Delete selected | Backspace / Delete |
| Nudge 1 px · nudge 10 px | ↑ ↓ ← → · Shift + ↑ ↓ ← → |
| Undo · redo | ⌘Z · ⌘⇧Z or ⌘Y |
| Duplicate · select all | ⌘D · ⌘A |
| Bring forward · send backward | ] · [ |
| Bring to front · send to back | Shift + ] · Shift + [ |
| Deselect | Escape |
| Edit text layer | Double-click |
| Hold uniform scale · center-anchor resize | Shift · Alt |
| Bypass snap | Alt while dragging |
Drag in empty canvas for marquee selection. Shift-click to add/remove from selection.
🧱 WHAT'S INSIDE
- Scene graph — plain data (
Layer[]), no framework lock-in.src/lib/state/scene.svelte.ts - DOM editor + canvas export — two renderers over the same scene, so the editor is interactive DOM and the export is pixel-perfect canvas
- Transform math — resize in rotated local space with anchor preservation, rotate with optional 15° snap.
src/lib/geom/transform.ts - Snap-to-guides — O(N) nearest-line computation across canvas + peer layer edges/centers.
src/lib/geom/snap.ts - Undo/redo — snapshot stack, 50-deep, transactions committed at interaction boundaries.
src/lib/state/history.svelte.ts - Custom drag action —
use:draggablewith pointer capture, axis lock, and modifier-key forwarding.src/lib/actions/draggable.ts - Zero canvas libraries — no Fabric, Konva, or html2canvas. Hand-built scene renderer.
