API Reference

The complete surface: the two module functions, every instance method, the full config schema, and the CSS tokens. New to FlowKit? Start with Quick Start — this page assumes you've already seen a stage boot.

FlowKit.create()

Mounts a stage into an element you already control the size of.

Returns a FlowKitInstance — see Instance methods. create() does not call setView() for you; call it once yourself right after.

const root = document.getElementById('app'); // class="fk-root", sized via CSS
const app = FlowKit.create(root, config);
app.setView('motor');

FlowKit.embed()

Mounts a stage at a fixed design size inside any container and scales it to the container's current width, refitting on a ResizeObserver.

Returns a FlowKitInstance. Its destroy() also disconnects the internal ResizeObserver and removes the wrapper.

const app = FlowKit.embed(document.getElementById('demo'), config, {
  view: 'motor',
  select: 'checkout',
});

Instance methods

Both create() and embed() return the same shape.

setView(name)

Swaps the center card to config.center.views[name]: sets the header tag, the card height, the dashed style, re-runs render() into the body, updates the footer toggle, and redraws the wires. An unknown name is silently ignored. The toggle button (shown when the active view has a toggleLabel) calls this internally to cycle Object.keys(config.center.views).

app.setView('interior');

selectOutcome(id)

The click behavior behind an outcome button, callable directly. Rings the matching outcomes[] entry, sets the card's output value and color from it, calls setActiveSource(outcome.source) when the outcome has one (otherwise just redraws), and pins its callout. An unknown id is a no-op.

app.selectOutcome('checkout');

setActiveSource(id)

Bolds the label and brightens the dot for the matching sources[] row (and only that one), then redraws so its wire gets the bright "spark" overlay.

app.setActiveSource('productos');

setActiveOutcome(id)

Rings the matching outcome button only — no output-value change, no callout, no source highlight, no redraw. selectOutcome() calls this internally; call it directly when you want just the ring.

app.setActiveOutcome('checkout');

showCallout(html, pos)

Appends a free-form .fk-callout card to the stage at pos.left / pos.top (any CSS length string, positioned relative to the stage). Unlike the hover/select callout, this one isn't tracked or deduplicated internally — each call adds a new node. Remove it yourself (the returned element's .remove()) when you're done with it.

const co = app.showCallout('<b>Custom note</b>', { left: '40px', top: '80px' });
// later: co.remove();

addChip(sourceId, t, html)

Drops a .fk-chip pill on the wire belonging to sourceId (a sources[].id — not an outcome), at fraction t along it: 0 sits at the source dot, 1 at the card edge. The chip is tracked internally and repositions itself on every draw() (including the automatic redraw on window resize).

app.addChip('ordenes', 0.42, '<i></i><span>New order</span>');

draw()

Recomputes every wire path, pulse, arrowhead and chip position from the current DOM layout. Runs automatically on window resize and once again after web fonts finish loading (glyph widths shift on first paint). Call it yourself after anything else that moves the sources, outcomes or card — for example, injecting new DOM near the stage.

app.draw();

setPaused(paused)

Pause or resume the animated flow wires. The stage playback button uses this method and exposes its state with aria-pressed. The stylesheet also respects the system reduced-motion preference.

destroy()

Removes the resize listener and the stage's DOM. On an embed() instance it additionally disconnects the ResizeObserver and removes the outer wrapper.

app.destroy();

Config schema

Every field FlowKit reads from the config object, grouped by where it lives.

Top level

sources[]

outcomes[]

outcomes[].callout

* only required if the outcome includes a callout at all.

center

center.views[name]

pulses[sourceId]

feedback

CSS tokens

Declared on :root in flowkit.css, read inside .fk-root. Override on :root to theme every stage, or on one stage's own element to scope it — see Theming.

Stage size & scaling

The stage's internal layout — header offsets, column widths, the 474px center card, all its padding and gaps — is authored in fixed pixels in flowkit.css against a 1600×855 canvas. Nothing about that layout is percentage-based, so it only looks right at or above roughly that size.

• For a stage that has that much room on its own — typically a full-screen app — use create() directly on a root sized by CSS (position:fixed;inset:0 and similar). No scaling happens; the layout renders at its natural size.
• For a stage inside a narrower container — a docs page, a card, a gallery thumbnail — use embed(). It mounts the real 1600×855 stage and applies one CSS transform: scale() to fit the container's width, at widths of 700px and above. Below that, the default responsive layout stacks sources, the center card, and outcomes. Set responsive: false to keep scaling at every width.

What doesn't work well: calling create() on a root sized well below ~1200×650. The sources column, the outcomes column, and the center card are each positioned independently by fixed offsets from the stage edges, so below that width the center card overlaps the side columns instead of scaling down to make room.