Workspace & Productivity

Where the toolbar lives

The tool column is docked to the left edge by default, and the canvas starts after it rather than underneath. The button at the top of the column moves it: each click steps to the next position — left → top → right → bottom → floating — and its icon shows where the bar currently sits. A docked bar reserves its edge; floating puts it back to a draggable overlay you can park anywhere (drag the grip, or drag its resize grip to wrap the icons into a compact grid).

The top bar's view controls

The tool column holds things you draw with. Everything else lives in the cluster at the right of the top bar: Pan (H), Commands & Tools (Ctrl/Cmd+K), the Vector Tools palette, Shape Builder (Shift+M), Settings, Properties (Alt+Enter), Show Dimensions, and Help — then the colour palette and the theme toggle. Buttons that are toggles light up while they're on; Pan is a tool, so clicking it again returns you to Select.

The full row needs about 700px of width. Below that it collapses into the hamburger menu, where the same entries sit beside Rulers & Guides. Every iPad — mini through Pro, portrait or landscape — gets the full bar.

On a phone

Below 600px wide the position control is hidden and the tools become a single full-width strip pinned just above the status bar, with larger touch targets. Swipe the strip sideways to reach the tools that don't fit. There is no docking, dragging or wrapping at this size — an edge is too much of the screen to give away — but the strip, the header and the status bar all reserve their space, so the canvas between them is entirely yours to draw on. Undo and redo float just above the strip.

Between 601px and roughly a tablet width you get the normal docked column plus the compact header — the toolbar keeps its edge and the canvas still starts after it.

Guided tour

On your first visit a short spotlight tour highlights the main areas — toolbar, canvas, Properties panel, and the settings/help cluster. Step through with Next/Back (or →/←), or Skip (Esc) anytime. It only auto-runs once.

What's new

Click the version number in the bottom-right status bar to open the What's new popup — a running list of recent updates in plain language. A small dot appears on the version when there are changes since you last looked. The popup also has a Reload latest button that clears the cache and reloads the newest build (handy on iPad/iOS). Open it from a script with window.Yappy.showWhatsNew().

Properties panel

Press Alt+Enter (or the sliders button in the top bar) to toggle the Properties panel, which docks to the right edge. It shows the controls for whatever is selected — fill, stroke, size, text, effects, animation — or the defaults for the active drawing tool when nothing is selected.

The panel never opens by itself. Picking a drawing tool leaves it exactly as you left it, so a long brainstorming session isn't interrupted by a panel sliding in on every tool switch. Open it deliberately with Alt+Enter, the sliders button, or by right-clicking a tool group in the toolbar (which opens the panel on that tool's defaults) — and once it's open it stays docked while you work.

Properties is a dockable panel like Layers, History or Swatches, so it is not stuck on the right. Drag its title bar to the left or right edge to dock it there, drop it anywhere else to float it, drag the zone's inner edge to resize, and use the title-bar buttons to dock left / dock right / float / collapse to the title bar / close. Your arrangement is saved and comes back next time. The resize edge carries a small grip — a short vertical bar on the inner edge of the docked column; grab it and drag sideways to set the width (200–560px). The animation timeline has the matching grip on its top edge for height. Duplicate and Delete sit just below the title bar, with the object's properties, because they act on the selection rather than on the panel.

Smart toolbar

Select an object and a compact quick-properties toolbar floats next to it with the controls that matter for that object type — fill & stroke colour, opacity, stroke style, and (for anything that can hold text) font & font size, alignment, and bold/italic. It's the fastest way to restyle without opening the full Properties panel.

Type an exact value on any mini-slider. Drag the little sliders (font size, opacity, …) for a quick nudge, or tap/click the number beside a slider to type a precise value — press Enter to apply, Esc to cancel. Values clamp to the slider's range automatically.

Align & distribute

Select two or more objects → the Alignment group in the Properties panel. Align left/centre/right and top/middle/bottom; distribute spreads three or more objects evenly.

Groups align as one object

A group counts as a single object for both align and distribute: the group's bounding box is what lines up, and its members keep their internal arrangement. Selecting one group on its own therefore does nothing — there's nothing to align it against.

To align objects inside a group, double-click into the group (see below) and select the members there. Clicking a group and dragging a selection box around one both pick up the whole group, as in Illustrator and Figma; a partial selection — which does align its members individually — comes from shift-clicking members inside the group, or from the API.

Align to a key object

Toggle the crosshair button (Properties panel, or the Align dock panel) to align to the key object — one object stays put and everything else lines up to it, instead of to the selection's bounding box. Great for snapping a row of items to one anchor.

The key object is drawn with a thicker blue outline and a corner pip. By default it's the last object you added to the selection; with the mode on, click any already-selected object to make it the key (Illustrator's gesture). Scripts can name one explicitly instead:

Yappy.toggleAlignToKey(true);
Yappy.alignSelectedElements('left', keyId);   // keyId stays put

Distribute spacing

The two space-around buttons distribute by gap, not centre: they make the edge-to-edge spacing between objects equal (first/last stay put). Type a number in the gap box to pack the objects with that exact pixel gap instead.

Working inside a group

Clicking any member of a group selects the whole group — right up until you need to touch one thing inside it. Double-click a grouped object to step into the group: a bar appears at the top of the canvas, and from then on clicks select individual members, which you can move, restyle, restack and align on their own.

• Double-click again to go one level deeper into a nested group.
• Esc (or Up one in the bar) steps back out one level and re-selects the group.
• Clicking outside the group — on other artwork or empty canvas — leaves isolation entirely.
• While inside, marquee-select and Ctrl+A are confined to that group's members.

Yappy.enterGroup(elementId);   // step into the group containing this element
Yappy.isolatedGroups;          // ['group-…'] — outermost → innermost
Yappy.exitGroup();             // up one level
Yappy.exitAllGroups();         // leave entirely

The object tree — every object on a layer

Open the Layers panel and click the box icon on a layer row to list the objects on it. The list reads top-of-stack first, exactly like the artwork, and groups appear as one row you can expand.

• Click a row to select that object — including one object inside a group, without entering the group. Shift/Ctrl-click adds to the selection.
• Eye hides an object. A hidden object isn't drawn, can't be clicked or marquee-selected, and is left out of every export (PNG, SVG, PDF, PPTX, the HTML player) and the minimap.
• Padlock locks it against selection and editing, the same as Object ▸ Lock.
• Double-click the name to rename it. Objects start with a derived label — their own text, or their type ("Rectangle", "Path") — so most never need naming.
• Groups rename the same way. Double-click a group row and give it a real name — "Front panel", "Logo lockup" — instead of the default Group (4). Nested groups are named independently, so an inner "Cap" can sit inside an outer "Bottle". Clear the name (empty it) and the row goes back to showing the member count.
• Drag a row to restack it; drop on the upper half of a row to go in front of it, the lower half to go behind. Dragging a group moves the whole group.

Yappy.setElementsVisible([id], false);  // hide (accepts group ids too)
Yappy.toggleElementVisible(id);
Yappy.showAllElements();
Yappy.setElementName(id, 'Hero banner');   // '' clears it
Yappy.elementLabel(id);                    // what the tree shows
Yappy.moveElementsNextTo([id], targetId, 'above');

const gid = Yappy.getElement(id).groupIds.at(-1);  // outermost group of an object
Yappy.setGroupName(gid, 'Front panel');    // '' clears it → back to "Group (n)"
Yappy.getGroupName(gid);

Arrange — stacking order

Right-click → Arrange, the arrow buttons in the Properties panel, or the keyboard:

These match Illustrator and Figma. A multi-selection moves as one block — the selected objects keep their order relative to each other and the whole move is a single undo. One press also steps over an entire group rather than one member at a time.

Grid styles — including diagonal and isometric

The grid has four styles, in Settings → Canvas → Grid Style or from the Command Palette (“Grid Style: …”):

Snap follows the lines you can see. On the angled styles, Snap to Grid (Shift+;) puts points on the intersections of the slanted lines, not on square coordinates — a slanted grid that still snapped to squares would drop every point between the lines. Grid size sets the spacing between parallel lines, measured across them.

Y.setGridStyle('isometric');   // 'lines' | 'dots' | 'diagonal' | 'isometric'
Y.updateGridSettings({ enabled: true, snapToGrid: true, gridSize: 40 });
Y.gridStyles;                  // the list, with labels

Moving objects between layers

Select the artwork, then right-click → Move to Layer and pick the destination. It works on a whole selection at once, and a tick marks the layer the selection is already on (or every such layer, when a mixed selection spans several). Group layers are containers rather than places artwork lives, so they aren’t offered, and neither are locked layers — for the same reason you can’t draw into one. The entry is hidden entirely when there is nowhere else to move to.

To move a layer itself up or down the stack, drag its row in the Layers panel, or press Alt+[ / Alt+] to move the active layer.

Rasterize — vector to bitmap

Right-click → Rasterize (or the command palette) converts the selected artwork into a single image element. The bitmap takes the selection's place: same layer, same slot in the stacking order, so nothing jumps in front of or behind its neighbours. Rotation, opacity and effects are baked into the pixels.

• 1× / 2× / 4× — pixels per canvas unit. 2× is the retina-friendly default; 4× is for print-scale zoom.
• Rasterize on White — flattens onto an opaque white backdrop instead of keeping transparency.
• Rasterize a Copy — keeps the vectors and drops the bitmap directly on top, so you can go back.

Only the selected objects are drawn — overlapping neighbours are never baked in. Rasterizing a whole group produces one ungrouped image; rasterizing part of a group leaves the image inside that group.

const id = await Yappy.rasterize();                      // selection, 2x, transparent
await Yappy.rasterize([a, b], { scale: 4 });             // print-scale
await Yappy.rasterize(undefined, { keepSource: true });  // keep the vectors

Transform — numeric position, size & rotation

Select a single object → the Transform group in the Properties panel shows editable X/Y (position), W/H (size), and ∠ (rotation, in degrees). Type a value and press Enter (or click away) to apply — each edit is a single undo step, and the fields track the object live as you drag or rotate it on canvas. Resizing rescales the object's geometry (pen points, path anchors, text size) exactly like a handle drag.

Yappy.setElementTransform(id, { x: 120, y: 80 });      // move
Yappy.setElementTransform(id, { width: 240, height: 160 }); // resize
Yappy.setElementTransform(id, { angle: Math.PI / 4 });      // rotate 45° (radians)

Size while you drag

Drag any of the eight resize handles and a W × H chip appears just under the object, updating live and reading in your chosen measurement unit. It follows a rotated object's own frame, and it exists only for the duration of the drag — so there is nothing to turn on and nothing sitting on your artwork the rest of the time.

The dimension badge

If you want those numbers permanently while something is selected — plus position and rotation, which the drag chip doesn't show — there is also a badge that follows the selection and reads its live W × H, position and rotation. It is handy while resizing but in the way the rest of the time, since it sits right under the object on top of your artwork, so it is off by default (and it replaces the drag chip when on, rather than stacking with it). Turn it on with the Proportions button in the top bar (next to Settings and Properties), or from Menu → View → Show Dimensions on a phone. The choice sticks between sessions. It reads in your chosen measurement unit, and hides itself in presentation mode and while the Measure tool is active.

Yappy.setShowDimensions(true);    // show the badge
Yappy.toggleShowDimensions();     // flip it, returns the new state
Yappy.getShowDimensions();        // -> boolean

Custom stroke dashes

Beyond the Stroke Style preset (solid / dashed / dotted), the Stroke Dash group lets you type any dash pattern — a comma- or space-separated list of on/off pixel lengths. 12, 4 is a simple dash; 12, 5, 2, 5 is a dash-dot. A live preview shows exactly what renders, and quick chips (Dash / Dot / Dash-dot / Long) fill common patterns. Clear reverts to the Stroke Style preset. Custom dashes render in both draw styles and export to SVG as stroke-dasharray.

Yappy.setStrokeDash([12, 4, 3, 4]);   // dash-dot on the selection
Yappy.setStrokeDash([], ids);         // clear (revert to the Stroke Style preset)

Rulers & guides

Show them with Alt+R — or ☰ → View → Rulers & Guides (a tick shows when they're on), or the Command Palette (Ctrl+K) → Toggle Rulers & Guides. Two strips appear along the top and left edges of the canvas, plus a small corner box. The setting is remembered per browser, so they come back next time you open Yappy.

Reading the rulers

The top strip measures X, the left strip measures Y, both in canvas units. Tick spacing follows the zoom automatically — it picks a round 1 / 2 / 5 × 10ⁿ step so major ticks stay roughly evenly spaced and the labels stay readable whether you're at 10% or 800%. The strips start at the canvas origin (not the window), so zero on the ruler is zero on the canvas no matter which edge the toolbar is docked to. Rulers read the un-rotated grid — they're always axis-aligned.

Pulling out guides

Drag down off the top ruler to pull out a horizontal guide; drag right off the left ruler for a vertical one. The guide follows your pointer and drops where you release. Afterwards, drag any guide to move it — hovering one shows a move cursor, and its tooltip reports its exact position (X = … / Y = …).

To remove a guide, double-click it, or drag it back onto the ruler it came from. To clear the lot at once, use the Command Palette (Ctrl+K) → Clear All Guides.

Selecting several guides at once

Click a guide to select it — it turns pink and thickens. Shift (or Ctrl/⌘) +click adds or removes guides from that selection, and Ctrl+Shift+A selects every guide. Clicking anywhere else clears the selection, as does Esc.

With a selection live you can manage the whole set together:

• Drag any selected guide and the entire selection moves with it. Guides slide along their own axis, so a mixed horizontal/vertical set keeps its shape.
• Arrow keys nudge the selection by 1px — hold Shift for 10px.
• Delete / Backspace removes every selected guide at once.

Finished with a layout? Lock / Unlock Guides in the Command Palette freezes them — locked guides still draw, but they can't be dragged, selected, or deleted by accident.

Turning shapes into guides

Select one or more shapes → Command Palette (Ctrl+K) → Convert Shapes to Guides. Each shape drops a horizontal and a vertical guide at every edge of its bounding box, then the shape itself is removed — so a rectangle becomes a four-line frame you can lay out against. This is Illustrator's ⌘5; pair it with Split Into Grid to build a whole guide scaffold in two commands (see the Effects doc).

const Y = window.Yappy;

Y.toggleRulers();            // flip the rulers + guide system
Y.toggleRulers(true);        // force them on

const id = Y.addGuide('h', 200);  // horizontal guide at world y = 200
Y.addGuide('v', 120);             // vertical guide at world x = 120
Y.updateGuide(id, 260);           // move it
Y.removeGuide(id);                // drop that one
Y.clearGuides();                  // drop them all

// Working with several guides at once
Y.listGuides();                   // [{ id, axis, pos }, …]
Y.selectGuides([id1, id2]);       // replace the selection
Y.selectGuide(id3, true);         // Shift+click: toggle into the selection
Y.selectAllGuides();              // Ctrl/Cmd+Shift+A
Y.getSelectedGuides();            // ids of the selected guides
Y.moveSelectedGuides(40, 0);      // v-guides take dx, h-guides take dy
Y.removeSelectedGuides();         // delete them; returns how many went
Y.clearGuideSelection();          // Esc
Y.toggleGuidesLocked(true);       // freeze them in place

Measure tool

Turn it on from ☰ → View → Measure Tool (or Yappy.toggleMeasure()), then drag anywhere on the canvas to lay down a measuring line. A readout shows the length (in canvas units) and the angle from horizontal. The line stays until your next drag; press Esc to exit.

Blend

Select exactly two objects, then right-click → Blend → choose a step count (2–16). Yappy creates that many in-between copies, smoothly interpolating position, size, rotation, colour, opacity and stroke width from the first object to the second — a graduated chain (e.g. a small red circle blending into a large blue one).

Smooth Morph blend

Right-click two shapes → Blend ▸ Smooth Morph to interpolate their outlines point-for-point — so a circle actually morphs into a star (not just grows/recolours). Each step is a new editable path; colours blend too. Yappy.blendMorph(steps). Great for shape-transition sequences and logo/letter morphs.

Blend along a spine

Select two objects plus a path or line (the spine), then right-click → Blend Along Spine → step count. The in-between copies are distributed along the path (evenly by arc length) and auto-rotated to follow its tangent — Illustrator's Blend + Replace Spine. Great for beads-on-a-string, ribbons, and text/shape trails that curve. Yappy.blendAlongPath(steps, orient).

History panel

Open it with Alt+H (or View → History Panel) to see the document's timeline — past states, the current state, and any redoable future states. Click any row to jump straight to that point (it undoes/redoes the difference for you). Each row shows its object count; the current state is highlighted and future states are dimmed.

Saving to My Drawings

Ctrl+S saves the current drawing to My Drawings, the local library in your browser. The first time you save an untitled drawing you're asked for a name; after that the same shortcut saves silently over that name, so you can hit it as often as you like while you work.

Each drawing keeps its own entry. File → New starts a fresh document, so the next save creates a new entry rather than replacing the one you just made — but re-saving a drawing you have open updates it in place instead of piling up copies. Open, rename and delete entries from File → My Drawings….

Settings — Pen & Input

Open Settings from the gear button in the top bar (next to the Properties toggle and Help) or from the menu. It is organised into categories — General, Pen & Input, Defaults (text and shape), Mindmap, Time-lapse and Cloud Storage — pick one on the left to see just its settings. If you know what you want but not where it lives, type in the search box at the top: it looks across every category at once and shows only the matching controls.

Two options control how the canvas greets you:

• Default Tool — which tool is active when Yappy opens, and when you start a new drawing: Select (the default, so your first click on the canvas picks things up rather than drawing on them), Ink Brush or Fineliner. Changing it switches you to that tool right away, so the toolbar matches, and it sticks for next time.
• Canvas Pointer — the cursor shown over the canvas while a drawing tool is active: Crosshair (+) (the default, easiest to aim), Concentric circle, or Arrow. Select and Pan keep their own cursors, and hovering a resize or rotate handle always shows that handle's cursor.

Both are per-browser preferences, remembered across sessions, and scriptable: Yappy.setDefaultTool('fineliner') and Yappy.setPointerStyle('circle').

Export

From the menu (or right-click → Export) save your work as PNG, JPG, SVG, PDF or copy it to the clipboard — the whole canvas or just the selection. Artboards export their region to a fixed-size PNG (see the Artboards doc).

True-vector SVG

SVG export is real vector: shapes become <path>s, text becomes <text>, and gradients & gradient-mesh fills export as proper <linearGradient>/<radialGradient>/<pattern> definitions — so the file stays crisp at any size and is editable in Illustrator, Inkscape or the browser. Sketch-style strokes export as vector too (via rough.js). A few highly decorative shapes fall back to an embedded raster image.

Excalidraw import & export

Yappy round-trips with Excalidraw. Export to Excalidraw (in the Save/Export panel) writes a .excalidraw file you can open in Excalidraw — rectangles, ellipses, diamonds, lines, arrows, text, images and pen strokes map across directly; Yappy-only shapes (UML, BPMN, icons, …) are exported as their outline so they still look right. To import, just open a .excalidraw file from the menu — its elements are added to your current drawing. From a script: window.Yappy.exportExcalidraw() and window.Yappy.importExcalidraw(json).

The native Yappy document format is an open, documented JSON (see docs/yappy-format-spec.md) so other tools can read and write Yappy files too.

Scripting (API)

Every workspace helper is scriptable from the global window.Yappy object — paste these into the browser console. History, view-fit, blends and repeat/transform commands act on the current selection unless you pass explicit ids.

const Y = window.Yappy;

// History
Y.undo();                 // step back
Y.redo();                 // step forward

// Fit the whole drawing to the viewport
await Y.zoomToFit();

Blends

// select exactly two objects first, then:
Y.blend(6);               // 6 graduated in-between copies
Y.blendMorph(8);          // 8 outline-morph steps (editable paths)

// two objects + a path/line (the spine) selected:
Y.blendAlongPath(10, true); // 10 copies along the spine, orient to tangent

Repeat & transform

// operate on the current selection
Y.radialRepeat(8, { radius: 160, faceCenter: true }); // 8 around a ring
Y.gridRepeat(3, 4, { gapX: 20, gapY: 20 });           // 3×4 grid of copies
Y.mirrorCopy('horizontal');                           // mirrored duplicate
Y.transformAgain();                                   // repeat the last move/scale/rotate