svelteflow-custom-nodes

# 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 }