napkin-sketch#

This documents napkin-sketch 1.0.0.

Quick and easy computer sketching with a drawing GUI that simulates pen and paper/napkin sketching — featuring an auto-sharpen algorithm that turns stiff, computer-drawn strokes into cleaner, more hand-drawn forms.

Draw with a mouse, touchscreen, or pen (pressure-aware), then let napkin-sketch straighten your lines, round out your circles, square up your boxes, and re-introduce a subtle organic wobble so the result still reads as hand-drawn rather than vector-perfect.

Three ways in#

• Use the app. Install it, then take the Quickstart: a sharpened sketch in five minutes.
• Draw from a script. The API quickstart is the whole drawing language in five steps, and the drawings come out as SVG, PNG, PDF or a sketch book, with no window.
• Embed it. Embedding the editor puts the editor, or only its engine, in a page of your own.

What it does#

• Draws like a pen - a pressure-aware brush and marker, a Copic marker with a turnable nib, and a pencil with a drawing class's kit and a stump to blend it; see Tools, the Pencil and the Smear.
• Sharpens by hand - squares up boxes and rounds out circles, and keeps a wobble; see Sharpening.
• Edits like a vector editor - anchors and handles, stroke profiles, Transform, Rotate, Mirror, Mesh Warp, Liquify, which bends marks as the Warp tools do, and the Wipe Stacks, the Shape Stacker and Split, which combine and cut shapes as Pathfinder, Shape Builder and Scissors do; see Vector paths, Transform, the Shape Stacker and Split.
• Keeps things in order - layers and groups, clipping masks, pages of any size; see Layers, Clipping masks and Pages.
• Round-trips SVG - imports another editor's layers, curves, gradients and clipping masks, and exports them small; see Import and export.
• Writes scripts - a drawing, a file or a session as napkin script; see Automate.
• Draws from scripts - from a shell, from Node, or from any language, and the engines behind the tools are functions a program calls; see Drawing from a script and The drawing engines.
• Animates, optionally and experimentally - an add-on that draws frames with an AI helper; see Animation Mode.

Where these pages come from#

These pages are written from the repository's own Markdown by npm run site. The tables of verbs, commands, exit codes, settings, npm scripts and shortcuts in them are written from the code, and the tests fail when one of them falls behind. Every napkin example on the API pages runs in the tests. About and license says more.

Every page#

Quickstarts#

• Quickstart: drawing - Pick a tool, draw, use the quick gestures and sharpen: the Sketch menu in one sitting.
• Quickstart: transforming - Move, rotate, mirror, scale and bend a selection: the Transform menu in one sitting.
• Quickstart: layers - Name, group and restack layers, and edit a selection in the Properties panel.
• Quickstart: pages - Add pages three ways, size them, move between them, and export them all.
• Quickstart: automating - Write a script from a drawing, record a session, and draw with no window at all.

Using the app#

• Using the app - The manual, in the order it is best read, one line per page.
• Tools - The drawing tools, the Copic marker and its nib, the Pencil, its kit and the Smear, and the Sketch Support toolbar.
• Gestures and input - Pen, touch and mouse; pan and zoom; the straight line, the quick curve, endpoint snap and the held keys.
• Vector paths and stroke profiles - Editing anchors and handles, rounding corners, Sharpen Selection, and the four stroke profiles.
• Selecting and editing - Selecting, filling, widening, the clipboard, and what a press on a selection does.
• Transform, Rotate, Mirror, Mesh Warp, Liquify and Wipe Stacks - The Transform box, Rotate, Mirror, Mesh Warp, Liquify, the Wipe Stacks, and docking their panels.
• Effects and the Appearance panel - The Effect menu, the Appearance panel, the options of each effect, 3D Options and the gumball, and effects that follow a transform.
• Type - Typing and editing text on the canvas, in a shape and along a path too, the Type panel and its fonts, the Type menu, and the editor keys.
• Layers and the Properties panel - The Layers panel, groups, restacking, and editing a selection in the Properties panel.
• Composition Styles - Rules by layer name that restyle a page in one click: the panel, editing a style, the report, and the style file.
• Pages - The pages panel, page sizes, and the three ways to add a page.
• Import and export - What SVG, PDF and pictures arrive as, and what PNG, JPEG, SVG and PDF exports keep.
• Sharpening - Live sharpen, Sharpen all, and how the auto-sharpen engine decides what a stroke meant.
• Settings - Quick Settings and Verbose Settings, and every setting with its default and range.
• Menus and shortcuts - The menu bar, the right-click menus, every keyboard shortcut, and changing them.
• Automate - Generate Script from a file, the selected layers or the session history, and Track History.
• Animation Mode - The optional, experimental add-on that draws animation frames with an AI helper: installing it and using it.
• The .skbk file format - What a saved sketch book holds, and how older files open.
• The command line - Opening the app from a shell: every option, and the four commands that need no window.

Building on it#

• Embedding the editor - The editor in your own page, the pure engine, and the graphic-design API.
• Drawing from a script - napkin script from a shell, from Node or from any language, and what it writes.
• The AI helpers - The graphic-designer and scripting helpers, experimental: what each does and how to use it.
• The AI helper plugins - The three plugins, experimental, and installing them where an AI tool looks.

Developing#

• Building and packaging - Building, watching and packaging the app, and every npm script.
• Testing - The test suites, the golden scripts, the GUI checks and the package check.
• Project structure - Every folder and file under src/ and docs/api/, and what each holds.