Basic Nodes

Learn how to create different types of nodes with various handle configurations.

Input Node (Source)

An input node only has output handles - it's a data source that sends data to other nodes.

InputNode.svelte

<script lang="ts">
  import { Handle } from 'kaykay';
  import type { NodeProps } from 'kaykay';

  let { data }: NodeProps<{ label: string }> = $props();
</script>

<div class="input-node">
  <span>{data.label}</span>
  
  <!-- Only output handle - this is a source node -->
  <Handle 
    id="out" 
    type="output" 
    port="data" 
    position="right" 
  />
</div>

<style>
  .input-node {
    background: #1f1f1f;
    border: 2px solid #22c55e;
    border-radius: 8px;
    padding: 16px 24px;
    color: #fff;
  }
</style>

Handle Positions

left - Left side of node (default for inputs)
right - Right side of node (default for outputs)
top - Top of node
bottom - Bottom of node

Live Preview

Data Source

Config

Processor