Flows · UI components · SVG motion

A component library
for interactive apps.

Copy working flow diagrams, UI components, and SVG animations into your app. No framework required.

Browse components Explore examples
Support assistantInteractive example
Select an outcome to follow its source.Open full example
Powered by the FlowKit engine
Vanilla JavaScriptNo dependenciesNo build step
View engine source

The library

Choose a starting point.

Working pieces for your next interface.
Open an example, adjust it, and use the source.

01 / Diagrams

Animated flows

Connect sources, processes, and outcomes. Let people explore each step.
✓Deployment ready⌘ K
+Create a new project↵
OverviewActivitySettings
02 / Interface

UI components

Thinking traces, approvals, task lists, and a prompt composer.
03 / Motion

SVG animation

Preview signals, branches, orbits, and changes of state.

The FlowKit engine

Build a flow
with your data.

Define the sources, views, and outcomes in a JavaScript object. FlowKit draws the connections and handles selection.

  • 01Load two files: JavaScript and CSS
  • 02Start from a complete example config
  • 03Change the content, styles, and interactions
Read the quick start
app.jsFull config 
// Load an example, then make it yours.
const config = FlowKitExamples.rag.config;

const flow = FlowKit.embed(
  document.querySelector('#diagram'),
  config,
  { view: 'retrieval', select: 'answer' }
);

flow.setView('prompt');
flow.selectOutcome('cite');
Works with a script tag.API reference →

Example projects

See the whole flow.

All examples
01

RAG assistant

From knowledge sources to a useful response.

AI02

Delivery pipeline

Follow a change through build and deployment.

DevOps03

Hiring funnel

Connect candidate sources to the next stage.

People