napkin-sketchdocs 1.0.0 GitHub

API quickstart#

API hub · Quickstart · Cheatsheet

The whole API in five steps: install, draw a script from the command line, draw it from Node, build a graphic in code, and link a logo.

The whole thing in five steps#

  1. Install the command line, which puts napkin-sketch on your PATH, and the API in a folder of your own:
npm install -g @isocialpractice/napkin-sketch
npm install @isocialpractice/napkin-sketch

From a clone, npm install, npm run build and npm link do the same, and the files below go in the clone.

  1. Save this as card.napkin in that folder, and draw it from the command line:
napkin 1
page 400 300
name "card"
layer "Card"
color #1f2328 width 3 fill #ffe08a
rect 20 20 360 260 r 16
text "Acme Corp" at 200 120 size 32 align center
napkin-sketch draw card.napkin --to svg,png,pdf --out out
  1. Draw the same script from Node. Save this as draw.mjs and run node draw.mjs:
import { drawFile } from '@isocialpractice/napkin-sketch/node';

const { ok, files, diagnostics } = await drawFile('card.napkin', { out: 'out', formats: ['svg', 'png'] });
console.log(ok, files.map((file) => file.path), diagnostics);
  1. Build a graphic in code instead. Save this as badge.mjs and run node badge.mjs:
import { writeFile } from 'node:fs/promises';
import { createComposition } from '@isocialpractice/napkin-sketch';

const design = createComposition({ width: 240, height: 240, background: '#ffffff' });
design.circle({ cx: 120, cy: 110, r: 80, fill: '#326478' });
design.text({ x: 120, y: 216, text: 'Acme Corp', align: 'center', fontSize: 20, fill: '#1f2328' });
await writeFile('badge.svg', design.toSVG());
await writeFile('badge.png', design.toPNG());
  1. Link a logo rather than import it. Save any SVG as logo.svg beside the script, add this line to the end of card.napkin, and draw again. The SVG keeps href="logo.svg", and the PNG draws the file:
link "logo.svg" at 290 220 size 80 40 name "Logo"

Where to go next#