Skip to content
motif-ts

Workflow Orchestration
Reimagined

Dead simple. Fully typed. Effortlessly orchestrated.

Interactive Demo

Explore the full interactive workflow diagram on a larger screen.

Design Principles

Built on the foundations of immutability, type-safety, and composition.

Workflows as Graphs

Build logic with explicit steps and edges. Each transition is deterministic and type-checked, making complex flows understandable and testable.

Type-Safety End-to-End

Strong TypeScript APIs ensure inputs, states, and transitions are safe. Zod integration adds runtime validation without compromising ergonomics.

Powered by
Zod

Immutability

State updates are immutable by default. This ensures predictable state changes and enables powerful features like time-travel debugging.

Powered by
Zustand

Co-location

Achieve clear separation of concerns by decoupling UI from business logic. The architecture forces you to co-locate logic with its relevant components, ensuring that business rules remain pure, testable, and independent of the view layer.

Framework Agnostic

The core is UI-agnostic and works in any framework or runtime. Optional adapters integrate with different UIs without coupling.

AI-Friendly

Built for the AI era. The co-located structure allows AI to precisely target and modify specific logic blocks with high confidence. This isolation makes AI-generated changes transparent, safe, and easy for humans to verify.

The Step Model

Encapsulated logic with strict IO boundaries and reactive state.

Inputargs.input
Step Context
Configargs.config
Storeargs.store
Instance APIreturn { ... }
Outputnext(output)

Interactive Step Architecture

Hover to reveal the seamless link between visual concepts and TypeScript code. See how every Input, State, and Output is strictly typed and interconnected.

MyStep.ts
// 1. Define Step
const MyStep = step({
kind: 'my-step',
inputSchema: z.object(...),
outputSchema: z.object(...),
apiSchema: z.object(...),
configSchema: z.object(...),
createStore: myStepStore,
}, (args) => {
const { input, config, store } = args;
const { transitionIn, effect, transitionOut, next } = args;
effect(() => { ... });
return {
execute: () => {
store.increment();
next(...);
}
};
});
// 2. Instantiate
const instance = MyStep({ ... });
instance.state.execute();

Workflow in Motion

Compose steps into a graph and inspect state transitions in real-time.

Add steps to start building...

Your Code
import { workflow, step } from '@motif-ts/core'; // Your Workflow Definition const flow = workflow([]); flow.register([]) .start();

Core Capabilities

Essential primitives for building robust, scalable workflows.

Workflow Orchestrator

Compose steps with typed transitions, back navigation, lifecycle control, and middleware hooks.

@motif-ts/core

DevTools & Persistence

Time-travel with Redux DevTools, export/import full snapshots or just the workflow config, and safely restore any state.

@motif-ts/middleware

Framework Adapters

Use adapters to integrate with UI of choice. React, Vue, and Svelte adapters are included.

@motif-ts/react@motif-ts/vue@motif-ts/svelte

Expression Engine

Serialize expressions for portable workflows. Supports modern JavaScript syntax like optional chaining, template literals, and object spread.

@motif-ts/expression

Quick Start

From installation to your first executable workflow.

installation.ts
pnpm add @motif-ts/core @motif-ts/react