Quick start

Three things you can do in about five minutes: build a flow in code, run it, and open it on a canvas.

1. Install

npm install @arcsig-labs/core @arcsig-labs/nodes

2. Build a flow

Steps are typed definitions. The builder only accepts settings and output ports that exist, so a flow that compiles is a flow that runs.

import { createRegistry } from '@arcsig-labs/core';
import { standardSteps } from '@arcsig-labs/nodes';

const steps = createRegistry([standardSteps]);

const flow = steps.flow('Daily digest');
const start = flow.add('trigger.schedule', { cron: '0 9 * * *' });
const fetchTodos = flow.add('http.request', { url: 'https://example.com/todos' }, { id: 'fetch' });
const tell = flow.add('http.request', {
	method: 'POST',
	url: 'https://hooks.example.com/digest',
	body: { text: '{{ steps.fetch.output.body | length }} open items' }
});

start.to(fetchTodos);
fetchTodos.to(tell);

const json = flow.build(); // plain JSON: store it, edit it, send it anywhere

3. Run it

In simulate mode, a step that defines a simulate handler reports what it would do instead of doing it. The HTTP step sends GET and HEAD requests and only pretends for the others, so here the fetch goes out and the POST does not. A step without a handler runs normally — give anything that sends, pays or writes one. Swap the mode for live when you mean it.

import { createEngine } from '@arcsig-labs/core';

const engine = createEngine(steps);
const result = await engine.start(json, { mode: 'simulate' }); // the POST is held back
console.log(result.status, result.steps);

4. Put it on a canvas

npm install @arcsig-labs/editor

<div id="editor" style="height: 100dvh"></div>

<script type="module">
	import { createEditor } from '@arcsig-labs/editor';
	import { standardSteps } from '@arcsig-labs/nodes';

	const editor = createEditor('#editor', {
		steps: [standardSteps],
		theme: 'auto',
		onChange: (flow) => localStorage.setItem('flow', JSON.stringify(flow))
	});
</script>

The container needs a height; the editor fills it. Everything it produces is the same flow JSON you just built in code — see Editor.

5. Run it for real

The server adds webhooks, cron schedules, timers that survive restarts, run history and encrypted credentials — and serves the editor on the same address.

ARCFLOW_SECRET="a long random string" npx -y -p @arcsig-labs/server -p @arcsig-labs/editor arcflow dev

Open http://127.0.0.1:8787 and the editor is there, with your steps and your runs. See Server.