kaykay

A modern, lightweight flow editor for Svelte 5

# Installation

$ pnpm add kaykay

# Features

[5]

Svelte_5_Native

// Built with Svelte 5 runes and modern reactivity

[0]

Zero_Dependencies

// Lightweight with no external runtime deps

[T]

TypeScript_First

// Full type safety with comprehensive definitions

[C]

Custom_Nodes

// Create components with your own design

[G]

Node_Grouping

// Organize nodes with drag-and-drop support

[E]

Flexible_Edges

// Bezier, straight, step with waypoints

# Quick_Start

~/project/src/App.svelte

<!-- App.svelte -->
<script>
  import { Canvas, Handle } from 'kaykay';

  const nodes = [
    { id: '1', type: 'custom', position: { x: 100, y: 100 }, data: { label: 'Node 1' } },
    { id: '2', type: 'custom', position: { x: 300, y: 200 }, data: { label: 'Node 2' } }
  ];

  const edges = [
    { id: 'e1', source: '1', source_handle: 'out', target: '2', target_handle: 'in' }
  ];

  const nodeTypes = { custom: CustomNode };
</script>

<div>
  <Canvas {nodes} {edges} {nodeTypes} />
</div>

# Resources

[01]

getting_started

// Learn the basics

[02]

api_reference

// Complete documentation

[03]

github_repo

// Source code & issues

[04]

npm_package

// Package registry