svelteflow-custom-nodes

What this skill does

# Svelte Flow Custom Nodes and Edges

Create fully customized nodes and edges with Svelte Flow. Build complex
node-based editors with custom styling, behaviors, and interactions.

## Custom Node Component

```svelte
<!-- TextUpdaterNode.svelte -->
<script lang="ts">
  import { Handle, Position } from '@xyflow/svelte';

  export let id: string;
  export let data: { label: string };
  export let isConnectable: boolean;

  function handleChange(event: Event) {
    const target = event.target as HTMLInputElement;
    // Dispatch custom event or update store
    console.log('Value changed:', target.value);
  }
</script>

<div class="text-updater-node">
  <Handle type="target" position={Position.Top} {isConnectable} />

  <div class="content">
    <label for="text">Text:</label>
    <input
      id="text"
      name="text"
      on:input={handleChange}
      class="nodrag"
      value={data.label}
    />
  </div>

  <Handle type="source" position={Position.Bottom} id="a" {isConnectable} />
</div>

<style>
  .text-updater-node {
    background: white;
    border: 1px solid #1a192b;
    border-radius: 8px;
    padding: 10px;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  input {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>
```

## Registering Custom Nodes

```svelte
<!-- Flow.svelte -->
<script lang="ts">
  import { SvelteFlow, type Node, type NodeTypes } from '@xyflow/svelte';
  import { writable } from 'svelte/store';
  import TextUpdaterNode from './TextUpdaterNode.svelte';
  import ColorPickerNode from './ColorPickerNode.svelte';

  // Define node types
  const nodeTypes: NodeTypes = {
    textUpdater: TextUpdaterNode,
    colorPicker: ColorPickerNode,
  };

  const nodes = writable<Node[]>([
    {
      id: '1',
      type: 'textUpdater',
      position: { x: 0, y: 0 },
      data: { label: 'Hello' },
    },
    {
      id: '2',
      type: 'colorPicker',
      position: { x: 200, y: 100 },
      data: { color: '#ff0000' },
    },
  ]);

  const edges = writable([]);
</script>

<SvelteFlow {nodes} {edges} {nodeTypes} fitView />
```

## Styled Node with Tailwind

```svelte
<!-- StatusNode.svelte -->
<script lang="ts">
  import { Handle, Position } from '@xyflow/svelte';

  export let data: {
    label: string;
    status: 'pending' | 'running' | 'completed' | 'error';
  };

  const statusConfig = {
    pending: { bg: 'bg-yellow-100', border: 'border-yellow-400', icon: '⏳' },
    running: { bg: 'bg-blue-100', border: 'border-blue-400', icon: '⚡' },
    completed: { bg: 'bg-green-100', border: 'border-green-400', icon: '✅' },
    error: { bg: 'bg-red-100', border: 'border-red-400', icon: '❌' },
  };

  $: config = statusConfig[data.status];
</script>

<div class="px-4 py-2 rounded-lg border-2 shadow-sm {config.bg} {config.border}">
  <Handle type="target" position={Position.Top} class="!bg-gray-400" />

  <div class="flex items-center gap-2">
    <span class="text-xl">{config.icon}</span>
    <span class="font-medium">{data.label}</span>
  </div>

  <Handle type="source" position={Position.Bottom} class="!bg-gray-400" />
</div>
```

## Node with Multiple Handles

```svelte
<!-- SwitchNode.svelte -->
<script lang="ts">
  import { Handle, Position } from '@xyflow/svelte';

  export let data: {
    label: string;
    cases: string[];
  };
</script>

<div class="switch-node">
  <Handle type="target" position={Position.Top} id="input" />

  <div class="header">{data.label}</div>

  <div class="cases">
    {#each data.cases as caseLabel, index}
      <div class="case">
        {caseLabel}
        <Handle
          type="source"
          position={Position.Right}
          id="case-{index}"
          style="top: {30 + index * 28}px"
        />
      </div>
    {/each}
  </div>
</div>

<style>
  .switch-node {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
    min-width: 150px;
  }

  .header {
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .cases {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .case {
    position: relative;
    font-size: 14px;
    text-align: right;
    padding-right: 16px;
  }
</style>
```

## Resizable Node

```svelte
<!-- ResizableNode.svelte -->
<script lang="ts">
  import { Handle, Position, NodeResizer } from '@xyflow/svelte';

  export let id: string;
  export let data: { label: string; content: string };
  export let selected: boolean;
</script>

<NodeResizer
  color="#ff0071"
  isVisible={selected}
  minWidth={100}
  minHeight={50}
  handleStyle={{ width: '8px', height: '8px' }}
/>

<Handle type="target" position={Position.Top} />

<div class="content">
  <div class="label">{data.label}</div>
  <div class="body">{data.content}</div>
</div>

<Handle type="source" position={Position.Bottom} />

<style>
  .content {
    padding: 16px;
    height: 100%;
    background: white;
    border: 1px solid #1a192b;
    border-radius: 8px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
  }

  .body {
    font-size: 14px;
    color: #666;
  }
</style>
```

## Node with Toolbar

```svelte
<!-- EditableNode.svelte -->
<script lang="ts">
  import { Handle, Position, NodeToolbar, useSvelteFlow } from '@xyflow/svelte';
  import { createEventDispatcher } from 'svelte';

  export let id: string;
  export let data: { label: string };
  export let selected: boolean;

  const { setNodes, deleteElements } = useSvelteFlow();
  const dispatch = createEventDispatcher();

  let isEditing = false;
  let editValue = data.label;

  function handleEdit() {
    isEditing = true;
  }

  function handleSave() {
    setNodes((nodes) =>
      nodes.map((node) =>
        node.id === id
          ? { ...node, data: { ...node.data, label: editValue } }
          : node
      )
    );
    isEditing = false;
  }

  function handleDelete() {
    deleteElements({ nodes: [{ id }] });
  }
</script>

<NodeToolbar isVisible={selected} position={Position.Top}>
  <button on:click={handleEdit} class="toolbar-btn">✏️ Edit</button>
  <button on:click={handleDelete} class="toolbar-btn delete">🗑️ Delete</button>
</NodeToolbar>

<Handle type="target" position={Position.Top} />

<div class="node-content">
  {#if isEditing}
    <div class="edit-form">
      <input bind:value={editValue} class="nodrag" />
      <button on:click={handleSave}>Save</button>
    </div>
  {:else}
    <span>{data.label}</span>
  {/if}
</div>

<Handle type="source" position={Position.Bottom} />

<style>
  .node-content {
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .toolbar-btn {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
  }

  .toolbar-btn.delete {
    color: #dc2626;
  }

  .edit-form {
    display: flex;
    gap: 8px;
  }

  input {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>
```

## Custom Edge

```svelte
<!-- ButtonEdge.svelte -->
<script lang="ts">
  import {
    BaseEdge,
    EdgeLabelRenderer,
    getBezierPath,
    useSvelteFlow,
  } from '@xyflow/svelte';

  export let id: string;
  export let sourceX: number;
  export let sourceY: number;
  export let targetX: number;
  export let targetY: number;
  export let sourcePosition: Position;
  export let targetPosition: Position;
  export let style: string = '';
  export let markerEnd: string = '';

  const { setEdges } = useSvelteFlow();

  $: [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });

  function handleClick() {
    setEdges((edges) => edges.filter((edge) => edge.id !== id));
  }
</script>

<BaseEdge path={edgePath} {markerEnd} {style} />
<EdgeLabelRenderer>
  <div
    style="
      position: ab