Docs

SDK

@typomat/engine is one WebAssembly file and a small JavaScript layer, with TypeScript types. It has no dependencies, and its only network request is for its own engine.wasm.

createEngine(options)

Loads the engine and returns it. Do this once, and keep it.

JavaScript

import { createEngine } from "@typomat/engine";

const engine = await createEngine({
  licenseKey: "TM1...",   // from your account
  wasm: undefined,        // where to find engine.wasm, or its bytes; defaults to the package's own
  quiet: false,           // true: no console warning about a missing or lapsed licence
});

wasm takes a URL, a string, an ArrayBuffer or a typed array. Set it to serve the file yourself, for example from your CDN. It's 6 MB, and 1.8 MB with Brotli.

engine.compile(parameters, options)

Compiles a whole TrueType font and returns its bytes as a Uint8Array.

JavaScript

const ttf = engine.compile(
  { weight: 118, contrast: 0.92 },
  { name: "Acme Display", characters: "Acme" },
);

Option	Meaning
`name`	The family name written into the font.
`characters`	Compile only these, for a much smaller file. Leave it out for all 80.

Every parameter is optional, and anything you leave out stays at its default. Values outside a range are clamped. An unknown name throws a TypeError, so a typo can't silently do nothing. See all the parameters.

engine.glyphs(parameters, text, options)

Outlines for a line of text, for drawing without installing a font.

JavaScript

const { metrics, glyphs } = engine.glyphs({ weight: 170 }, "Acme");

// { c: "A", advance: 742.1, kern: -12.4, d: "M 170.41 -700.2 Q ..." }
// { c: "é", missing: true }  when this build has no such character

Paths are SVG path data in font units (1000 to the em), with y pointing down and the baseline at 0. Move along by advance + kern after each glyph. By default the outlines go through the font's own curve fitter, so they match the compiled font point for point. Pass { fitted: false } for faster, polygonal outlines in a small live preview.

engine.outline(parameters, character, options)

One glyph, plus the touch points of its anatomy (anchors), in font units with y up. The app uses these to place its dials on a letter, and you could too. steps sets how finely curves are divided: 24 by default.

engine.metrics(parameters)

The font's vertical metrics in font units: ascender, descender, capHeight, lineTop, lineBottom and fitWidth. It also returns lines: a few sample words that suit the font's character.

engine.catalog

What this build of the engine can do, so your interface carries no copy of it:

JavaScript

engine.catalog.axes;        // [{ id: "weight", label: "weight", group: "stroke", min: 12, max: 210, value: 86 }, ...]
engine.catalog.groups;      // ["form", "stroke", "ends", "flourish", "carve"]
engine.catalog.characters;  // ["a", "b", "c", ...]

engine.resolve(parameters)

The full list of values the engine would read for these parameters, clamped and in order. Handy as a cache key.

engine.license

What your key says, as checked on the device: valid, and either the licensee, plan, domains and expires, or a reason. See Licensing.

Threads

Everything is synchronous. An outline takes about a millisecond, but a whole font takes about 90 ms, so compile in a Web Worker while someone is dragging. The font controls guide shows how.