Cheatsheet#

Every shortcut, flag, and script on one page. New here? Start with QUICKSTART.md. Full prose reference: Using the app, which the documentation site publishes and Help > Verbose opens. The API on one page: API-CHEATSHEET.md.

Ctrl is Cmd on macOS throughout. The keys are the app's own; Edit > Edit Keyboard Shortcuts changes them for you alone.

Tools#

Drawing#

Text editing#

The type editor's own keys, while a text is edited (Type).

Quick features#

View, pan, and zoom#

Selection and editing#

Vector path editing#

With the Vector Path tool active, click a committed path to open its anchors.

Layers#

Files#

Menus#

Nine menus: File, Edit, View, Transform, Sketch, Layers, Pages, Automate and Help. What each one holds is in the menus table.

Automate#

CLI#

napkin-sketch [option] [target]

napkin-sketch --install-gui                          # add the desktop app (about 100 MB)
napkin-sketch                                        # new blank sketch
napkin-sketch --new ideas                            # new sketch named "ideas"
napkin-sketch --book ./notes.skbk                    # open a saved book
napkin-sketch ./notes.skbk                           # same, bare path
napkin-sketch --sharpen ./notes                      # sharpen on disk, then open
napkin-sketch --new -f                               # full screen
napkin-sketch --import logo.svg                      # import one file
napkin-sketch -m logo.svg,"site map.svg",photo.png   # grid of files

Quote file names that contain spaces.

Commands (no window, no Electron)#

napkin-sketch draw card.napkin --to svg,png          # card.svg, card.png
napkin-sketch draw card.napkin --to jsx              # card.jsx, for Illustrator
napkin-sketch draw --prompt "a three-box flowchart"  # an AI tool writes the script
napkin-sketch draw - --json < card.napkin            # stdin in, one JSON line out
napkin-sketch draw card.napkin --asset logo=logo.png # an image the script names
napkin-sketch check card.napkin --strict             # fail on warnings too
napkin-sketch render deck.skbk --to png --page 2     # deck-2.png
napkin-sketch render hero.skbk --animate walk        # hero-walk-1.svg on: frames, no AI
napkin-sketch verbs --category shapes                # one category

npm scripts#

Embedding#

import { NapkinSketch } from '@isocialpractice/napkin-sketch';
import '@isocialpractice/napkin-sketch/styles.css';

const editor = new NapkinSketch(document.getElementById('host')!, {
  liveSharpen: false,
  onChange: (e) => console.log(e.toJSON()),
});

editor.setTool('pen');
editor.sharpenAll();
editor.toDataURL('image/png');
editor.toSVG();
editor.toPDF();
editor.applyCompositionStyle(style); // restyles by layer name; gives the report

Pure-engine entry points, no editor required: sharpenStrokes, parseSketchBook, sketchesToPdf, and importSvg (browser only).

Drawing from a script#

import { drawSvg, evaluate, renderBook } from '@isocialpractice/napkin-sketch';   // anywhere
import { drawFile, drawToFiles } from '@isocialpractice/napkin-sketch/node';      // Node: files

const { svg, diagnostics } = drawSvg('napkin 1\npage 400 300\ncircle 200 150 60');
const { ok, files } = await drawFile('card.napkin', { out: 'out', formats: ['svg', 'png', 'pdf', 'skbk'] });

References: docs/api/node, docs/api/output.

The twenty verbs most scripts use:

Every verb, flag and exit code: API-CHEATSHEET.md. The map of the documentation: API.md.

Graphic design API#

import { createComposition } from '@isocialpractice/napkin-sketch';

const design = createComposition({ width: 360, height: 360, background: '#f6f7f9' });
design.rect({ x: 24, y: 24, width: 312, height: 96, rx: 12, fill: '#326478' });
design.text({ x: 180, y: 78, text: 'Acme Corp', align: 'center', fill: '#ffffff' });
design.defineClip('badge', { type: 'circle', cx: 180, cy: 220, r: 64 });
design.image({ src: logo, x: 116, y: 156, width: 128, height: 128, fit: 'cover', clip: 'badge' });

design.toSVG();  // string
design.toPNG();  // PNG bytes, no canvas and no image dependency

Page defaults: 360 by 360, px, transparent, headless. Full reference in the graphic design API.

AI helpers (experimental)#

Three plugins in ai-helper/, one folder each, all listed by the marketplace at the repository root. All three are experimental: each runs an AI tool you install and sign in to yourself.

/plugin marketplace add .                              # from a clone
/plugin marketplace add isocialPractice/napkin-sketch  # without one
/plugin install vectors@napkin-sketch
/plugin install graphic-designer@napkin-sketch
/plugin install scripting@napkin-sketch

# What design language is this asset in?
node ai-helper/graphic-designer/skills/design-language/scripts/analyze-media.mjs asset.svg --markdown

An SVG yields colors, type, strokes and structure; a PNG yields colors only; JPEG and GIF have no decoder and say so rather than returning an empty result.

Defaults worth knowing#