Base Style

This example shows how to customize the base styling of Svelte Flow components. You can modify the appearance of nodes, edges, handles, and the background to match your application’s design. Learn how to use CSS variables and custom styles to create a consistent look and feel.


import type { Node, Edge } from '@xyflow/svelte';
 
export const initialNodes: Node[] = [
  { id: '1', position: { x: 0, y: 150 }, data: { label: 'base style 1' } },
  { id: '2', position: { x: 250, y: 0 }, data: { label: 'base style 2' } },
  { id: '3', position: { x: 250, y: 150 }, data: { label: 'base style 3' } },
  { id: '4', position: { x: 250, y: 300 }, data: { label: 'base style 4' } },
];
 
export const initialEdges: Edge[] = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
  {
    id: 'e1-3',
    source: '1',
    target: '3',
  },
  {
    id: 'e1-4',
    source: '1',
    target: '4',
  },
];