Blender Style

Edge Sockets

Handles can be aligned to each row while sitting on the node border. kaykay measures the actual DOM position, so the edge connects to that row.

<div class="socket-row">
  <Handle
    id="points"
    type="output"
    port="geometry"
    position="right"
    class="blender-socket"
  />
  <span>Points</span>
</div>

Fields in Nodes

Inputs can sit in the same row as a border socket. Form fields opt out of node dragging so users can edit values normally.

• Geometry uses green diamond sockets.
• Float uses neutral circular sockets.
• Integer uses blue square sockets.
• Boolean uses amber triangular sockets.
• Vector uses purple diagonal sockets.

Field Overrides

Fields like Selection are local fallback values. If an edge is connected, your evaluation layer should read the connected value instead of the checkbox.

Header Controls

The title bar includes a Blender-style collapse arrow. Drag the left or right edge of a node to resize it only on the horizontal axis.

Theme Hooks

.blender-canvas :global(.kaykay-canvas) {
  --kaykay-canvas-bg: #1c1e22;
  --kaykay-canvas-dot-rgb: 80, 84, 94;
}

:global(.blender-socket.kaykay-handle) {
  position: relative !important;
  left: auto !important;
  width: 10px;
  height: 10px;
}