EXPLORATION 02 / 06
Custom nodes

What this showsEvery node has a role, a visual language, and the same predictable handle contract. Select one to edit its title or parameters, then add a new transform to the working graph.
inputData source
Everything starts somewhere
transformTransform
Give raw data a little shape
branchChoose a path
A small decision, two possibilities
yesno
sinkApproved
The happy path
sinkNeeds a look
Keep a human in the loop
noteA thought on the side
Notes document intent without moving data.
Svelte Flow
Inspector
Data source

input
Display title
Parameters 2
source format
6 nodes · 4 edges Editing input
What this shows
One renderer stays consistent while each kind communicates a different job. Handles are intentionally explicit: branch outcomes use yes and no, while notes stay outside the data path.
inputstarts a flow
transformchanges data
branchchooses yes / no
sinkfinishes a path
noterecords intent
Under the hood SVELTE 5View source
src/routes/demo/nodes/+page.svelte
<script lang="ts">
  import { Background, BackgroundVariant, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
  import type { Connection } from '@xyflow/svelte';
  import DemoShell from '$lib/components/DemoShell.svelte';
  import StudioNode from '$lib/components/StudioNode.svelte';
  import { createDemoGraph, createEdge, createNode, type FlowEdge, type FlowNode } from '$lib/flow/graph';
  import source from './+page.svelte?raw';


  const nodeTypes = {
    input: StudioNode,
    transform: StudioNode,
    branch: StudioNode,
    sink: StudioNode,
    note: StudioNode
  };

  function cloneNodes(value: FlowNode[]) {
    return value.map((node) => ({
      ...node,
      position: { ...node.position },
      data: { ...node.data, params: { ...node.data.params } }
    }));
  }

  function cloneEdges(value: FlowEdge[]) {
    return value.map((edge) => ({
      ...edge,
      data: { ...edge.data },
      markerEnd: edge.markerEnd && typeof edge.markerEnd === 'object' ? { ...edge.markerEnd } : edge.markerEnd
    }));
  }

  const starter = createDemoGraph('nodes');
  let nodes = $state.raw<FlowNode[]>(cloneNodes(starter.nodes));
  let edges = $state.raw<FlowEdge[]>(cloneEdges(starter.edges));
  let selectedNodeId = $state<string | null>(starter.nodes[0]?.id ?? null);
  let addCount = $state(0);
  let edgeSerial = $state(0);

  let selectedNode = $derived(nodes.find((node) => node.id === selectedNodeId) ?? null);
  let selectedParams = $derived(selectedNode ? Object.entries(selectedNode.data.params) : []);
  let selectedKind = $derived(selectedNode?.type ?? 'none');

  function resetGraph() {
    const graph = createDemoGraph('nodes');
    nodes = cloneNodes(graph.nodes);
    edges = cloneEdges(graph.edges);
    selectedNodeId = graph.nodes[0]?.id ?? null;
    addCount = 0;
    edgeSerial = 0;
  }

  function handleNodeClick({ node }: { node: FlowNode }) {
    selectedNodeId = node.id;
  }

  function updateSelectedNode(update: (node: FlowNode) => FlowNode) {
    if (!selectedNodeId) return;
    nodes = nodes.map((node) => (node.id === selectedNodeId ? update(node) : node));
  }

  function updateTitle(value: string) {
    updateSelectedNode((node) => ({
      ...node,
      data: { ...node.data, title: value }
    }));
  }

  function updateParam(key: string, next: string | boolean) {
    updateSelectedNode((node) => {
      const current = node.data.params[key];
      const value = typeof current === 'number' && typeof next === 'string' ? Number(next) : next;
      return {
        ...node,
        data: {
          ...node.data,
          params: { ...node.data.params, [key]: value }
        }
      };
    });
  }

  function addTransform() {
    addCount += 1;
    const id = `added-transform-${addCount}`;
    const newNode = createNode(
      id,
      'transform',
      `New transform ${addCount}`,
      { x: 640 + ((addCount - 1) % 2) * 272, y: 430 + Math.floor((addCount - 1) / 2) * 142 },
      { subtitle: 'Created from the inspector', params: { operation: 'manual', enabled: true } }
    );
    nodes = [...nodes, newNode];
    selectedNodeId = id;
  }

  function onBeforeConnect(connection: Connection): FlowEdge | false {
    if (!connection.source || !connection.target) return false;

    edgeSerial += 1;
    return createEdge(
      `nodes-connection-${edgeSerial}`,
      connection.source,
      connection.target,
      'data',
      {
        sourceHandle: connection.sourceHandle ?? null,
        targetHandle: connection.targetHandle ?? null
      }
    );
  }


  function minimapNodeColor(node: { type?: string }) {
    if (node.type === 'input') return 'var(--accent)';
    if (node.type === 'branch') return 'var(--muted)';
    if (node.type === 'sink') return 'var(--ink)';
    if (node.type === 'note') return 'var(--accent-soft)';
    return 'var(--accent)';
  }
</script>

<DemoShell
  slug="nodes"
  title="Custom nodes"
  description="Every node has a role, a visual language, and the same predictable handle contract. Select one to edit its title or parameters, then add a new transform to the working graph."
  {source}
>
  {#snippet toolbar()}
    <div class="toolbar-group" aria-label="Custom node actions">
      <button class="btn btn-sm btn-primary" type="button" onclick={addTransform}>
        <span aria-hidden="true">＋</span>
        Add transform
      </button>
      <button class="btn btn-sm btn-outline" type="button" onclick={resetGraph}>Reset nodes</button>
      <span class="toolbar-hint">Select a node to edit it in place</span>
    </div>
  {/snippet}

  {#snippet info()}
    <div class="info-layout">
      <div>
        <p class="eyebrow">What this shows</p>
        <p class="info-copy">
          One renderer stays consistent while each kind communicates a different job. Handles are
          intentionally explicit: branch outcomes use <strong>yes</strong> and <strong>no</strong>,
          while notes stay outside the data path.
        </p>
      </div>
      <ul class="kind-list" aria-label="Node kind descriptions">
        <li><span class="kind-chip input-kind">input</span><span>starts a flow</span></li>
        <li><span class="kind-chip transform-kind">transform</span><span>changes data</span></li>
        <li><span class="kind-chip branch-kind">branch</span><span>chooses yes / no</span></li>
        <li><span class="kind-chip sink-kind">sink</span><span>finishes a path</span></li>
        <li><span class="kind-chip note-kind">note</span><span>records intent</span></li>
      </ul>
    </div>
  {/snippet}

  <SvelteFlow
    id="demo-nodes"
    bind:nodes
    bind:edges
    {nodeTypes}
    onbeforeconnect={onBeforeConnect}
    onnodeclick={handleNodeClick}
    onpaneclick={() => (selectedNodeId = null)}
    fitView
    fitViewOptions={{ padding: 0.16 }}
    nodesConnectable
    nodesDraggable
    aria-label="Custom node workflow canvas"
  >
    <Background variant={BackgroundVariant.Dots} patternColor="var(--line)" gap={24} size={1.2} />
    <Controls />
    <MiniMap nodeColor={minimapNodeColor} pannable zoomable />
    <Panel position="top-right">
      <section class="inspector nopan nowheel" aria-label="Selected node inspector">
        <div class="inspector-heading">
          <div>
            <p class="eyebrow">Inspector</p>
            <h2>{selectedNode ? selectedNode.data.title : 'Nothing selected'}</h2>
          </div>
          {#if selectedNode}<span class="selected-badge">{selectedKind}</span>{/if}
        </div>

        {#if selectedNode}
          <label class="field" for="node-title">
            <span>Display title</span>
            <input
              id="node-title"
              class="input input-sm"
              type="text"
              value={selectedNode.data.title}
              oninput={(event) => updateTitle((event.currentTarget as HTMLInputElement).value)}
            />
          </label>

          <div class="params-heading">
            <span>Parameters</span>
            <span class="param-count">{selectedParams.length}</span>
          </div>
          {#if selectedParams.length > 0}
            <div class="params-list">
              {#each selectedParams as [key, value] (key)}
                <label class="param-row" for={`param-${key}`}>
                  <span>{key}</span>
                  {#if typeof value === 'boolean'}
                    <input
                      id={`param-${key}`}
                      class="toggle toggle-sm"
                      type="checkbox"
                      checked={value}
                      onchange={(event) => updateParam(key, (event.currentTarget as HTMLInputElement).checked)}
                    />
                  {:else}
                    <input
                      id={`param-${key}`}
                      class="input input-sm"
                      type={typeof value === 'number' ? 'number' : 'text'}
                      value={String(value ?? '')}
                      oninput={(event) => updateParam(key, (event.currentTarget as HTMLInputElement).value)}
                    />
                  {/if}
                </label>
              {/each}
            </div>
          {:else}
            <p class="empty-params">This node has no parameters yet.</p>
          {/if}
        {:else}
          <p class="empty-inspector">Click a node on the canvas to edit its title and parameters.</p>
        {/if}

        <button class="btn btn-sm btn-outline add-button" type="button" onclick={addTransform}>
          <span aria-hidden="true">＋</span>
          Add transform
        </button>
      </section>
    </Panel>
    <Panel position="bottom-left">
      <div class="canvas-status" role="status" aria-live="polite">
        <span class="status-dot" aria-hidden="true"></span>
        <span>{nodes.length} nodes · {edges.length} edges</span>
        {#if selectedNode}<span class="status-divider" aria-hidden="true"></span><span>Editing {selectedKind}</span>{/if}
      </div>
    </Panel>
  </SvelteFlow>
</DemoShell>

<style>
  .toolbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  .toolbar-hint {
    color: var(--muted);
    font-size: 0.75rem;
  }

  .info-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .info-copy {
    max-width: 47rem;
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .info-copy strong {
    color: var(--ink);
  }

  .kind-list {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.75rem;
    max-width: 25rem;
    margin: 0.15rem 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.72rem;
    list-style: none;
  }

  .kind-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .kind-chip,
  .selected-badge {
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .input-kind { color: var(--accent); }
  .transform-kind { color: var(--accent); }
  .branch-kind { color: var(--ink); }
  .sink-kind { color: var(--ink); }
  .note-kind { color: var(--muted); }

  :global(.svelte-flow__panel) {
    margin: 0.75rem;
  }

  .inspector {
    width: min(18rem, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    padding: 0.8rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--ink) 10%, transparent);
  }

  .inspector-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }

  .inspector h2 {
    max-width: 12rem;
    margin: 0.2rem 0 0;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .selected-badge {
    flex: 0 0 auto;
    margin-top: 0.12rem;
  }

  .field,
  .param-row {
    display: grid;
    gap: 0.28rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
  }

  .param-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
  }

  .param-row .input {
    width: 8.5rem;
  }

  .params-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.9rem 0 0.42rem;
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .param-count {
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.62rem;
  }

  .params-list {
    display: grid;
    gap: 0.58rem;
  }

  .empty-inspector,
  .empty-params {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .add-button {
    width: 100%;
    margin-top: 0.9rem;
  }

  .canvas-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 0.45rem 0.6rem;
    color: var(--muted);
    background: var(--surface);
    box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--ink) 8%, transparent);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent);
  }

  .status-divider {
    width: 1px;
    height: 0.8rem;
    background: var(--line);
  }

  @media (max-width: 620px) {
    .info-layout {
      display: block;
    }

    .kind-list {
      justify-content: flex-start;
      margin-top: 0.85rem;
    }

    :global(.svelte-flow__panel) {
      margin: 0.5rem;
    }

    .inspector {
      width: min(17rem, calc(100vw - 1rem));
      padding: 0.65rem;
    }

    .param-row .input {
      width: 7rem;
    }
  }
</style>
The actual route source, imported with ?raw. Shared components and graph utilities live in src/lib.