Logos & marks you reuse. SVG stays pure vector and can be recolored: place it, then pick a Tint color in the left panel. Make your own: select anything on the canvas, right-click → Save to gallery. PNG keeps transparency. Click to place · right-click to remove.
Draw your thinking.
Wobbly hand-drawn shapes, glued arrows, sticky notes and algorithmic photo art. All offline, all yours: nothing ever leaves this browser.
Add ready-made pages, everything stays fully editable. Templates are grouped by category. Your own saves are marked ★ and can be reshaped anytime: ✎ rename or move category · ↻ replace with your current design · ✕ delete.
Paste rows straight from Excel or Numbers, or type them: one row per line, columns split by Tab, comma or semicolon. First column: labels. First row: series names (optional). Negative numbers work.
Named checkpoints of the whole document, kept in this browser. Restore one at any time; a single undo brings the current version back.
Every ticked page becomes one frame. Set how long each frame stays on screen.
Choose which pages to include:
Not linked. Install the extension and keep Claude Desktop open, then this page links automatically.
Claude can draw directly on this paper: describe the diagram you want in Claude Desktop and watch it appear here as normal KoralPaper elements you can edit and undo (one ⌘Z per step Claude takes). Claude can also read the page and look at a picture of it, so "make the third box green" or "clean up this layout" work on whatever is on the paper, even things you drew by hand.
| 1. Install the free Claude Desktop app and sign in. |
2. Double-click koralpaper.mcpb (it ships in the mcp folder of this app, or grab it from the
GitHub page) and confirm the install inside Claude Desktop. |
| 3. Keep KoralPaper open in your browser. The ✳ appears in the top bar when the link is alive. |
| "Draw a customer onboarding flowchart with five steps on a 1920×1080 board." |
| "Read my KoralPaper page and tidy the layout, keep my colors." |
| "Turn these meeting notes into a decision tree on a LinkedIn carousel board." |
| Give Claude Desktop a poster, slide or PDF page and it rebuilds it here as an editable KoralPaper page: exact texts, colors and layout, one page per image. Copy the replica prompt, paste it into Claude Desktop, attach the image(s), send. |
| Copy the design prompt below, paste it into any Claude (claude.ai works fine) together with what you want, then save Claude's .json answer as a file and open it here with ☰ → Open sketch. |
Click a heading to open it.
| V select · H hand · E eraser · R sticky · D diamond · O ellipse · C chip |
| S icon stamps · A arrow · L line · P draw · T text · I import image · polygon (toolbar) |
| Eraser (E): click an element to delete it, or hold and drag across several to wipe them. One undo brings the whole stroke back. |
| Polygon: a regular shape from 3 to 12 sides, set with the Sides slider in the panel. Fill, text and everything else work like any shape. |
| ⌘Z undo · ⇧⌘Z redo · ⌘A select all · ⌘D duplicate · ⌥drag duplicate |
| ⌘C / ⌘X / ⌘V copy, cut & paste · ⌥⌘C / ⌥⌘V copy & paste style |
| ⇧⌘C copy the selection (or page) to the clipboard as a PNG image |
| ⌘G group · ⇧⌘G ungroup · Delete removes · arrow keys nudge (⇧ = ×5) |
| ⇧drag moves in a straight line: locks the selection to the horizontal or vertical axis |
| Double-click a shape (or arrow) to type on it · Enter edits the selection |
| Snap freehand to shapes: with the pen (P), a rough box, circle, triangle, diamond or line becomes a clean shape. Toggle it with the wand button in the top bar; ⌘Z keeps your raw stroke. |
| Brand kit (design system): Settings → Brand kit. Colors carry roles, so the whole app knows which goes where: Primary (hero, first chart series, headline accent, the ✳), Secondary (support, second series), an expandable Accent palette (add, remove and reorder for extra variety), and neutrals Paper, Ink and an optional Muted gray. Paste one Primary color and Generate system builds a harmonious rest around it. A Style section carries your line style, weight, corners, fill and arrowheads. Charts, headlines, new documents, every new element you draw and Claude all follow the kit. |
| Command palette (⌘K): fuzzy-search every tool, action, page, template and font, then run it. Try "insert hexagon", "go to page 2", "export png", or a font name. |
| Lock: right-click an element or group → Lock. Locked elements ignore clicks and drags, so you cannot move or resize them by accident (a small padlock marks them). Right-click again → Unlock. |
| Merge texts: select several text elements (⇧click in the order you want the lines), right-click → Merge texts into one. Add a shape to the selection and the menu offers Merge text into the shape instead: the text becomes the shape's own label |
| Resizing with text: side handles stretch a shape and keep its font size; on a text element they set the wrapping width (right-click → Fit width to text to undo). Corner handles scale the text along with it |
| Pictures in shapes: select a shape and paste an image (⌘V): it fills the shape, clipped by the outline. Photos also get a Corners slider in the panel, from sharp to a full pill |
| Time-lapse: ☰ → Time-lapse recorder. F snaps the page as a frame; ● auto-records every change while you work. Each frame has a hold time and a move time: during the move, elements travel to the next frame in shaky stop-motion steps (the default), or glide smoothly if you pick another easing. Appearing and disappearing elements cut hard, or fade if you tick Fade. 🎥 records camera zooms, 👻 shows the last frame as a ghost while you build the next one, and ▶ previews the whole animation before you export it as a GIF or video |
| Animated GIF: ⬇ → Animated GIF turns your pages into a looping GIF, one frame per page, with its own on-screen time for every frame. Carousels become animations |
| Snapshots: ☰ → Snapshots saves a named checkpoint of the whole document and restores it anytime |
| Color single letters: while typing, select the characters and pick a Text color in the left panel. Works with the custom color wheel too; the auto dot puts them back |
| B opens Chart & table: paste numbers from a spreadsheet, pick bars, lines, spider, pie, donut or a table, and it lands as normal sketchy elements. Right-click a chart later to edit its data; every bar and slice recolors like any other shape |
| Tab grows a flow: a connected twin appears to the right (⇧Tab below), editor open: works mid-typing too. Right-click the canvas → Tidy the flow lines it all up |
| Mind map: right-click a shape → Mark as mind-map root, then click the −/+ badges to fold and unfold branches: also mid-presentation. Exports show exactly what you see; unmark the root to reveal everything again |
| Fill opacity: a slider in the panel fades only the fill, leaving the outline and text solid: translucent highlights, tints behind text, Venn overlaps. |
| Arrowheads: pick a head for each end of a line: open arrow, hollow or solid triangle, hollow or solid diamond, hollow or solid circle, or a bar stop. |
| Import SVG: drag in or press I with an .svg file and it comes in as a true vector, crisp at any size and vector in exports. |
| ⌘S save .json · ⌘O open · ⌥⌘N new document · Esc closes anything |
| Space-drag or middle mouse pans · ⌘ + scroll zooms · ⇧1 zoom to fit |
| G cycles grid (lines / dots / off) · ⇧G alignment-guide snapping |
| Draw between shapes: the arrow glues to both; aim for the side dots to pin a side. |
| Drag the middle handle to bend. The elbow bend style routes at right angles around other shapes: every segment gets its own handle; right-click → re-route. |
| Drag & drop, paste, or press I: then pick an Art style in the panel: dots, lines, stipple, hatch, cubist, flow, scribble, one line, string, typewriter, duotone. |
| Tune with the Brightness / Contrast / Gamma / Sharpen sliders · Crop from the panel or right-click · everything stays non-destructive. |
| The icon menu also holds Google Material icons: search 3,000 symbols; right-click an icon to pin it. Pinned ★ and recently-used icons lead the grid (internet needed once per new icon). |
| Right-click anything for the context menu · ☰ → Templates for ready-made pages · the ∞ / size button (bottom left) sets exact canvas sizes for social formats. |
| Pages: the strip at the bottom holds multi-page documents. Right-click a page to add a page left or right, rename, duplicate, move or delete. Shift-click a range or ⌘/Ctrl-click to select several, then right-click to move, duplicate or delete them together. Copy on one page and paste on another keeps the same position. |
| Environments (? → Settings): save your canvas size, colors, grid, style and fonts as a named setup. Apply one anytime, or set a default that new documents start from. |
Each area is collapsed. Click a heading to open it.
Save your whole working setup, the canvas size, paper color, grid, line and shape style, and fonts, as a named environment. Apply one anytime, or set a default that every new document starts from. Handy for switching between, say, a "LinkedIn carousel" setup and a "clean flowchart" one.
A small design system, not just a color list: colors with roles, your two fonts, and a full line and shape style. Turn it on and it governs everything you make from here: charts use your colors in role order, every new element you draw starts in your line style, weight, corners, fill and arrowheads, new documents open on your paper, templates and headlines use your heading font, your colors appear as extra swatches in the style panel, and Claude draws on brand through the MCP bridge instead of using house defaults. Export the kit to give your whole team one look.
These values power the Fine / Medium / Thick buttons in the style panel and every new element you draw.
The S / M / L / XL buttons.
Used by every new text and by the "Reset spacing" button in the style panel.
Settings file: save everything above, your saved environments, and your pinned icons to a .json you can reload anytime or move to another machine. (Your drawings are separate: use ☰ → Save sketch for those.)
Default save folder. Choose where "Save sketch (.json)" writes. With a folder set, sketches save straight into it; otherwise you pick the location each time. (Chrome and Edge only; other browsers save to Downloads.)
KoralPaper is a creation by Stefanos Karagos, CAIO Group · wearecaio.com