napkin-sketchdocs 1.0.0 GitHub

API cheatsheet#

On this page

API hub · Quickstart · Cheatsheet

The whole API on one page: every verb, the command line, the two imports, the render options and the exit codes.

Every verb#

CategoryVerbWrittenDoes
Documentnapkinnapkin <version>The language version the script was written for. The first line of a script; without it version 1 is assumed, with a warning.
Documentpagepage <paper> [portrait|landscape]
page <width> <height> [portrait|landscape]
The page size: a named size (a3, a4, a5, letter, legal, tabloid, square, slide, napkin) or a width and a height, turned portrait or landscape.
Documentbackgroundbackground <color>
background none
The page color, or none for a transparent page.
Documentnamename "<name>"The page's name, and the file stem it is written under.
Documentunitsunits px|in|mm|ptThe unit bare numbers are read in from here on: px, in, mm or pt. Pixels until changed.
Documentseedseed <n>The seed for the hand-drawn pass. One script and one seed draw the same bytes every run.
Documentnewpagenewpage ["<name>"]Starts another page the same size, carrying the paint state across.
Layerslayerlayer "<name>" [opacity <0-1>] [hidden] [locked]A drawing layer. Marks after it go on it until the next layer.
Layersgroupgroup "<name>" [opacity <0-1>] [hidden] [locked] { ... }A group layer. The layer and group lines in its block become its children.
Layersclipclip ["<name>"] { ... }A clip group: everything its block draws shows only inside the block's last closed shape, in paint order, which paints nothing while it clips - the app's Make Clipping Mask. Without a closed shape in it, the block is a plain group.
Painttooltool pen|marker|copic|pencil|eraser|brushThe kind of mark: pen (the app's Brush; brush is taken for it), marker (translucent, so overlapping passes build up like ink), copic (a broad, angled nib), pencil (a lead through the paper's grain; pencil picks one) or eraser (cuts its line's swath out of the marks drawn before it on its layer, as the app's Eraser does, and draws nothing of its own).
Paintcolorcolor <color>The ink color of every mark after it.
Paintwidthwidth <length>The stroke width of every mark after it.
Paintopacityopacity <0-1>The opacity of every mark after it, from 0 to 1.
Paintfillfill <color>
fill none
The fill color of closed shapes after it, or none.
Paintgradientgradient linear <angle> (<color> <offset>, ...)
gradient radial (<color> <offset>, ...)
gradient none
A gradient fill for closed shapes after it: linear at an angle, or radial from the centre out, or none.
Paintstrokestroke on|offTurns the outline on or off. With it off, a closed shape is its fill alone.
Paintstylestyle solid|dashed|dottedThe outline's dash: solid, dashed or dotted.
Paintprofileprofile uniform|rounded|tapered|waveHow the width runs along a brush or marker stroke: uniform, rounded, tapered or wave.
Paintnibnib <degrees>The angle of the copic nib, in degrees.
Paintpencilpencil <grade> [<color>]Takes up the Pencil at a grade: graphite alone, 9H to 9B, or charcoal (HB to 6B), compressed (2B to 6B) or vine (hard, medium, soft) and its grade. Every mark after it is drawn with that lead through the paper's grain, in its tone - or in the color given, a colored pencil. The width is the line's own; the app's softer leads draw broader at one tool width.
Paintroughrough <0-1> [passes 1|2] [overshoot <length>]
rough off
The hand-drawn pass for every mark after it: 0 is exact, 1 is clearly drawn by hand, and off is 0. Seeded, so it draws the same way every run.
Paintfontfont "<family>" [<size>]
font <size>
The font family and size of text after it.
Paintcharactercharacter [face "<face>"] [tracking <n>] [kern <n>] [kerning auto|none] [leading <length>] [spacing <n>%] [caps normal|all|small] [hscale <n>%] [vscale <n>%] [shift <length>] [rotate <degrees>] [highlight <color>] [super|sub] [underline] [strike]
character reset
The character attributes of text after it: its face, tracking, kerning, leading, word spacing, capitals, scales, baseline shift, turn and highlight, and whether it is a superscript or a subscript, underlined or struck through. reset puts every one back.
Paintparagraphparagraph [align left|center|right|justify] [indent <left> [<right>]] [first <length>] [before <length>] [after <length>] [hyphenate|nohyphenate] [list bullet|number|none] [level <n>]
paragraph reset
The paragraph attributes of text after it: its alignment, its indents, the space before and after it, whether it hyphenates, and a bulleted or numbered list at a level. reset puts every one back.
Painttextconfigtextconfig "<name>" [face "<face>"] [tracking <n>] [kerning auto|none] [leading <length>] [spacing <n>%] [caps normal|all|small] [hscale <n>%] [vscale <n>%] [shift <length>] [rotate <degrees>] [highlight <color>] [super|sub] [underline] [strike] [size <size>] [family "<family>"] [color <color>]Defines a Text Configuration, a vector editor's Character Style: a named set of character attributes the book keeps, which text follows with config and its runs with config in their clauses. What a text has of its own overrides it. Defined again under its name, it changes for every text that follows it.
Paintaccentaccent <language>A Clean Language Accent for the next text: its paragraphs are colored as a language reads them - keywords, strings, numbers, comments, names - live as the app edits them. A language by its id or a name highlight.js knows it by (a name no word spells in quotes, "c++"), auto for the one the code reads most like, or none. It waits for the next text; one nothing takes is reported.
Shapesrectrect <x> <y> <width> <height> [r <radius>]A rectangle, with rounded corners when r is given.
Shapescirclecircle <cx> <cy> <r>A circle, drawn as four cubic curves rather than a polygon.
Shapesellipseellipse <cx> <cy> <rx> <ry>An ellipse, from its centre and two radii.
Shapeslineline <x1> <y1> <x2> <y2>A straight line between two points.
Shapespolygonpolygon <x> <y>, <x> <y>, ... [r <radius>]A closed shape through a list of points, with rounded corners when r is given.
Shapespolylinepolyline <x> <y>, <x> <y>, ...An open line through a list of points.
Shapesstarstar <cx> <cy> <outer> <inner> <count>A star with the given number of points, between an outer and an inner radius.
Shapesarcarc <cx> <cy> <r> <from> <to>An open arc of a circle between two angles, in degrees clockwise from three o'clock.
Shapesspiralspiral <cx> <cy> <r> <turns>A spiral winding out from its centre to the radius over the given number of turns.
Shapesshapeshape "<name>" at <x> <y> size <width> [<height>]A named shape from the built-in library, drawn in a box from x, y. With one size its longer side is that long and it keeps its proportions; with a width and a height it is stretched to fill them.
Shapeswipewipe in|out-front|out-back|mid|outer|clean { ... }Combines the marks its block draws, as the app's Wipe Stacks do, and draws what is left in their place: in (Wipe In, their union), out-front (Subtract Top from Below: the bottom one less the rest), out-back (Subtract Below from Top: the top one less the rest), mid (Mid Wipe: where all of them overlap), outer (Outer Wipes: where an odd number overlap) or clean (Clean Wipe: every piece of their overlaps, a mark each). What is left is painted as the topmost mark, or as the bottom one for out-front; text, pictures and eraser marks in the block are passed over. The block keeps its paint and transforms to itself, as a group does, and effects written just before it go on what it leaves.
Shapesstackstack merge|remove <points> { ... }Stacks the marks its block draws as the app's Shape Stacker does, at the pieces under its points - the places where the marks overlap and where they do not: merge makes those pieces one shape, painted as the topmost mark over the first point, and each mark keeps what was not merged; remove takes them away from every mark. Text, pictures and eraser marks in the block are passed over. The block keeps its paint and transforms to itself, as a group does, and the points are where the stack line is.
Pathspathpath "<svg path data>"
path { ... }
One mark, from SVG path data or from a block of path steps. Each subpath of a compound path is one piece of the same mark.
Pathsmovemove <x> <y>Starts a new subpath at a point.
Pathstoto <x> <y>A straight segment to a point.
Pathsbyby <dx> <dy>A straight segment by an offset from the current point.
Pathscurvecurve <c1x> <c1y> <c2x> <c2y> <x> <y>A cubic curve to a point, steered by two handles.
Pathssmoothsmooth <c2x> <c2y> <x> <y>A cubic curve whose first handle mirrors the last one, so the join stays smooth.
Pathsthroughthrough <x> <y>, <x> <y>, ...A smooth curve through a list of points. Inside a path block it continues the subpath; outside one it is an open mark of its own.
PathsclosecloseCloses the current subpath back to its start.
Pathssplitsplit <x> <y>Cuts the topmost mark drawn so far whose path passes within 4 px of a point, where the point lands on it, as the app's Split does: an open path becomes two, a closed one opens there, and a compound shape gives up the ring that was cut, as an open mark of its own. Nothing moves, and the pieces take the mark's place on its layer. In a wipe or a stack block it cuts among the marks the block has drawn.
Pathssmearsmear <width> <strength> <x> <y>, <x> <y>, ...A pass of the Smear, a blending stump, along a list of points: it spreads the graphite of every pencil mark drawn so far that it reaches, along the drag, as the app's Smear does. The width is the stump's, scaled by the transform as a width is, and the strength from 0 to 1. In a wipe or a stack block it smears among the marks the block has drawn.
Pathswarpwarp <x> <y> <radius> <dx> <dy>Liquify's Warp, as the app's Liquify does it: a brush pushed from the point by dx and dy, carrying what is under its centre the whole way, like clay. The brush reaches the marks drawn so far whose outline passes within its radius of the point, under the transform as a mark drawn there would be, and its effect falls off smoothly to nothing at the rim; the radius scales with the transform. Pencil marks are the Smear's, and text, pictures and eraser marks have no outline to bend: all are left as they are. Each mark it bends is fitted again after, so its anchors stay few. In a wipe or a stack block it bends among the marks the block has drawn.
Pathstwirltwirl <x> <y> <radius> <degrees>Liquify's Twirl: turns what is under a brush at the point about its centre, by the angle in degrees there - clockwise on the screen, as rotate turns - and less toward the rim, so distances from the centre are kept. The brush reaches the marks drawn so far whose outline passes within its radius of the point, under the transform as a mark drawn there would be, and its effect falls off smoothly to nothing at the rim; the radius scales with the transform. Pencil marks are the Smear's, and text, pictures and eraser marks have no outline to bend: all are left as they are. Each mark it bends is fitted again after, so its anchors stay few. In a wipe or a stack block it bends among the marks the block has drawn.
Pathspuckerpucker <x> <y> <radius> <amount>Liquify's Pucker: draws what is under a brush at the point in toward its centre, a point near the centre by the amount, 0 to 1, of its distance. The brush reaches the marks drawn so far whose outline passes within its radius of the point, under the transform as a mark drawn there would be, and its effect falls off smoothly to nothing at the rim; the radius scales with the transform. Pencil marks are the Smear's, and text, pictures and eraser marks have no outline to bend: all are left as they are. Each mark it bends is fitted again after, so its anchors stay few. In a wipe or a stack block it bends among the marks the block has drawn.
Pathsbloatbloat <x> <y> <radius> <amount>Liquify's Bloat: pushes what is under a brush at the point out from its centre, a point near the centre by the amount, 0 to 1, of its distance. The brush reaches the marks drawn so far whose outline passes within its radius of the point, under the transform as a mark drawn there would be, and its effect falls off smoothly to nothing at the rim; the radius scales with the transform. Pencil marks are the Smear's, and text, pictures and eraser marks have no outline to bend: all are left as they are. Each mark it bends is fitted again after, so its anchors stay few. In a wipe or a stack block it bends among the marks the block has drawn.
TransformspushpushSaves the transform, the paint state and the units, for the next pop to restore.
TransformspoppopRestores the transform, the paint state and the units the last push saved.
Transformstranslatetranslate <dx> <dy>Moves everything drawn after it.
Transformsrotaterotate <degrees> [at <x> <y>]Turns everything drawn after it, clockwise in degrees, about the origin or a point given with at.
Transformsscalescale <s> [<sy>] [at <x> <y>]Scales everything drawn after it, about the origin or a point given with at. One factor scales both ways.
Transformsmirrormirror x|y [at <position>]Reflects everything drawn after it: x swaps left and right across a vertical line, y swaps top and bottom across a horizontal one, at 0 unless given.
Controlletlet <name> <value>Names a number for the expressions after it, in the current units.
Controldefinedefine "<name>" { ... }Records a block of drawing under a name without drawing it, for place to draw.
Controlplaceplace "<name>" [at <x> <y>] [scale <s>] [rotate <degrees>]Draws a definition, moved, scaled or turned.
Controlrepeatrepeat <count> [as <name>] { ... }Runs a block a number of times, counting from 0 in the name given with as.
Text and mediatexttext "<text>" at <x> <y> [size <size>] [box <width>] [inside "<path data>"] [along "<path data>"] [start <length>] [flip] [effect rainbow|skew|ribbon|stair|gravity] [align left|center|right|justify] [vertical] [config "<name>"] [runs (<start> <end> [config "<name>"] <character clauses>, ...)] [markdown] [as marks]A text item, set and aligned, and editable in the app: Sideless Typing from its anchor, Sheet Typing in a box or inside a shape, or Path Typing along a path, set in its runs' styles, the whole of it following a Text Configuration with config. With markdown its text is Markdown, shown as it renders: Markdown Flow. With as marks the letters are drawn as brush strokes instead.
Text and mediaimageimage "<asset or data URL>" at <x> <y> [size <width> [<height>]]Places an image: an asset the host supplied, by name, or a data URL. Nothing is read from disk.
Text and medialinklink "<path>" at <x> <y> [size <width> [<height>]] [name "<layer name>"]Places a linked file: one selectable element that references the file instead of drawing its contents into the page.
Text and mediauseuse "<document>" [at <x> <y>] [scale <s>] [layer "<name>"]Copies in a document the host supplied, as a group, with its layers and anchors.
Effectseffecteffect blur <radius>
effect brightness <amount>
effect contrast <amount>
effect saturate <amount>
effect grayscale [<0-1>]
effect sepia [<0-1>]
effect invert [<0-1>]
effect hue-rotate <degrees>
effect opacity <0-1>
effect drop-shadow <dx> <dy> <blur> <color> [spread <0-100>] [blend <mode>] [opacity <0-1>]
effect feather <radius>
effect bevel [inner|outer] [size <n>] [depth <percent>] [angle <degrees>] [altitude <degrees>] [soften <n>] [up|down] [light <color> [<0-1>]] [shade <color> [<0-1>]] [light-blend <mode>] [shade-blend <mode>]
effect emboss [emboss|pillow] [size <n>] [depth <percent>] [angle <degrees>] [altitude <degrees>] [soften <n>] [up|down] [light <color> [<0-1>]] [shade <color> [<0-1>]] [light-blend <mode>] [shade-blend <mode>]
effect inner-shadow <dx> <dy> <blur> <color> [choke <0-100>] [blend <mode>] [opacity <0-1>]
effect outer-glow [<blur>] [<color>] [spread <0-100>] [blend <mode>] [opacity <0-1>]
effect inner-glow [<blur>] [<color>] [choke <0-100>] [edge|center] [blend <mode>] [opacity <0-1>]
effect splatter [preset <name>] [angle <degrees>] [overlap <n> [<variation>]] [width <n>] [curviness <percent> [<variation>]] [spacing <n> [<variation>]] [seed <n>]
effect warp <style> [bend <percent>] [horizontal|vertical] [distort <percent> [<percent>]] [part whole|lower|upper]
effect extrude [<depth>] [rotate <x> <y> <z>] [perspective <degrees>] [shading plastic|diffuse|none|wireframe] [hollow] [light <azimuth> <elevation> [<intensity> [<ambient>]]] [position <x> <y> <z>] [scale <x> <y> <z>]
effect revolve [angle <degrees>] [offset <n>] [axis left|right] [segments <n>] [rotate <x> <y> <z>] [perspective <degrees>] [shading plastic|diffuse|none|wireframe] [hollow] [light <azimuth> <elevation> [<intensity> [<ambient>]]] [position <x> <y> <z>] [scale <x> <y> <z>]
effect none
An effect for the next layer, group or mark the script makes: a CSS filter function - blur, brightness, contrast, saturate, grayscale, sepia, invert, hue-rotate, opacity or drop-shadow, which is Outer Shadow - an appearance effect - feather, bevel, emboss, inner-shadow, outer-glow or inner-glow - or splatter, a vector editor's Scribble, which draws a mark's fill as a loose hatch (on a layer or a group it draws nothing) - or warp, a vector editor's Warp, which bends what takes it by a style, a layer's or a group's marks as one - or extrude and revolve, a vector editor's Classic 3D, which build a mark in depth and draw it as shaded faces (on a layer or a group they draw nothing). Any of them also takes on fill or on stroke, to work on that part of a mark alone, and hidden, to be kept without being drawn. Several stack in order, and none clears what is waiting.
Effectsblendblend <mode>How the next layer or group the script makes mixes with what is drawn under it, the page's background included: a Napkin Blend by its name or by Illustrator's - stack or multiply, sheer or screen, cover or luminosity. A blend is a layer's, so it waits for the next layer or group; normal sets one back.
Outputcropcrop auto [pad <length>]
crop none
crop <x> <y> <width> <height>
The box every output is cut to: auto fits the ink with room to spare, none keeps the page, or a box given outright.
Outputregistrationregistration <x> <y> <width> <height>One box every page is written in, so frames drawn by one script line up when they are played in sequence.

The command line#

CommandDoes
napkin-sketch draw <script | ->Draw a napkin script to svg, png, pdf, skbk or jsx files.
napkin-sketch check <script | ->Read and run a script, report what is wrong, write nothing.
napkin-sketch render <book.skbk>Write a sketch book as svg, png, pdf, skbk or jsx files, or its figure as animation frames.
napkin-sketch verbsList napkin script's verbs and the shape library.

The two imports#

ImportFor
import { evaluate, drawSvg, renderSketch, renderBook, parseScript, createComposition } from '@isocialpractice/napkin-sketch'Scripts and compositions, anywhere
import { drawFile, drawToFiles, writeBook, loadAssets, resolveLinkFromDir } from '@isocialpractice/napkin-sketch/node'Files, in Node
import { booleanOp, eraseMarks, wipeMarks, stackFaces, splitMark, liquifyMarks } from '@isocialpractice/napkin-sketch'The drawing engines, on a page: their cheatsheet

Render options#

OptionDefaultMeaning
format'svg'svg, png, pdf or skbk
cropthe whole page'auto', { mode: 'auto', pad: 12 }, 'none', or { x, y, width, height }
registrationnoneOne box for every page; wins over crop
transparentfalseNo paper in the SVG or the PNG
scale1PNG pixels a page pixel
resolveLinknoneReads linked files for the PNG
decodeImagenoneDecodes images the PNG cannot
onWarningnoneTold what a format left out

Exit codes#

CodeMeaning
0It drew, the script checked clean, or the book was written.
1The arguments were wrong: an unknown option, a bad value, no script. Nothing is written.
2The script had errors, render was given a file that is not a book, or --animate found no figure on its page; with --strict, anything reported at all. What could be drawn is written, unless --strict.
3A file could not be read or written. A linked file that could not be read is drawn as its placeholder and the files are written; for anything else, nothing is.
4draw --prompt got no script back: the AI helper is not installed, is not signed in, or failed. Nothing is written.

Every category#

CategoryWhat it coversPages
The napkin script languageThe syntax, values and expressions, the object form, every verb, and every diagnostic code.reference, quickstart, cheatsheet
Drawing with napkin scriptWhat each instruction draws: pages, layers, paint, shapes, paths, the shape library, the hand-drawn pass, text, images, links and effects.reference, quickstart, cheatsheet
The graphic design APICompositions built in code - shapes, text, media, masks, gradients, effects - rendered to SVG or PNG.reference, quickstart, cheatsheet
Writing a drawing outSVG, PNG, PDF, .skbk and an Illustrator script from one call, the box every format is cut to, and what each format keeps.reference, quickstart, cheatsheet
The napkin-sketch command linedraw, check, render and verbs from a shell or any language, with --json and exit codes.reference, quickstart, cheatsheet
Using napkin-sketch from codeThe package's entries, ES modules and CommonJS, types, the result object, and what throws.reference, quickstart, cheatsheet
Markdown Flow and Clean Language Accents@isocialpractice/napkin-sketch/markdown: marked's lexer and highlight.js for napkin-sketch, Markdown read as a text shows it, code colored by its language, and a language installed beyond the common 36.reference, quickstart, cheatsheet
The drawing enginesThe functions the app's tools stand on: regions combined and cut, the Eraser, the Wipe Stacks and the Shape Stacker, Split, clipping masks, the Pencil's grades and grain, the Smear and Liquify; blends, effects, Splatter, Warp and 3D; type, its layout, hyphenation and fonts; Text Configurations and Composition Styles.reference, quickstart, cheatsheet
Working with other programsIllustrator and Inkscape through SVG, an Illustrator script that rebuilds a drawing, files linked from elsewhere, and what survives a round trip.reference, quickstart, cheatsheet
The AI helpersExperimental. The graphic-designer and scripting helpers: design languages, brand resources, scripts drawn from a request, and how an agent reads these pages.reference, quickstart, cheatsheet