Svelte components,
connected.
Build interactive flows with your own components. Typed connections, animated edges, and an editor that feels like part of your app.
Install in your Svelte 5 app
pnpm add kaykayA little flow. A real editor.Svelte 5 + kaykay
Tab to a node, Enter to select, arrow keys to move. Escape to finish.
Svelte 5 native reactivity Typed ports compatible connections Zero external runtime dependencies
See what connects.
Different interfaces. The same canvas underneath.
Your first connection.
Two files. Your Svelte component becomes a node; handles tell the canvas where connections belong.
- Install kaykay in a Svelte 5 app.
- Add both files in the same folder.
- Render
App.svelteto see the flow.
HelloSvelte
<script lang="ts">
import { Canvas } from 'kaykay';
import type { FlowEdge, FlowNode, NodeTypes } from 'kaykay';
import CustomNode from './CustomNode.svelte';
const nodeTypes: NodeTypes = { custom: CustomNode };
const nodes: FlowNode[] = [
{ id: 'source', type: 'custom', position: { x: 30, y: 80 },
data: { label: 'Hello' } },
{ id: 'target', type: 'custom', position: { x: 250, y: 80 },
data: { label: 'Svelte' } }
];
const edges: FlowEdge[] = [{
id: 'hello-svelte',
source: 'source', source_handle: 'out',
target: 'target', target_handle: 'in',
color: '#806000',
animated: true,
animation: { pattern: 'dots', color: '#FFDC58', speed: 48 }
}];
</script>
<div class="editor">
<Canvas {nodes} {edges} {nodeTypes} />
</div>
<style>
.editor { height: 360px; }
</style>Make it your own.
Pick the part you want to build next.