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.


<script lang="ts">
  import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/base.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <Background />
</SvelteFlow>