### Basic SvelteFlow Setup with Controls Example Source: https://svelteflow.dev/llms-full.txt Standard setup for a SvelteFlow application demonstrating the Controls component, including global CSS and TypeScript entry point. ```css html, body, #app { width: 100%; height: 100%; margin: 0; font-family: sans-serif; } ``` ```html SvelteFlow Controls Example
``` ```typescript import { mount } from 'svelte'; import App from './App.svelte'; import './index.css'; mount(App, { target: document.getElementById('app')!, }); ``` -------------------------------- ### Complete App.svelte Example Source: https://svelteflow.dev/llms-medium.txt A full example of the App.svelte file demonstrating the setup of SvelteFlow with Background and Controls, including a 'system' color mode. ```svelte
``` -------------------------------- ### Basic Svelte Flow component setup Source: https://svelteflow.dev/llms-medium.txt This example demonstrates the basic setup for the Svelte Flow component, including importing styles, defining nodes and edges using $state.raw for performance, and integrating Controls, MiniMap, and Background. ```svelte
``` -------------------------------- ### Install Svelte Flow with bun Source: https://svelteflow.dev/learn Install the Svelte Flow package using bun. ```bash bun add @xyflow/svelte ``` -------------------------------- ### Basic SvelteFlow Setup with CSS and TypeScript Source: https://svelteflow.dev/llms-full.txt Standard setup for a SvelteFlow application, including global CSS and TypeScript entry point for mounting the Svelte component. ```css html, body, #app { width: 100%; height: 100%; margin: 0; font-family: sans-serif; } ``` ```html SvelteFlow MiniMap Example
``` ```typescript import { mount } from 'svelte'; import App from './App.svelte'; import './index.css'; mount(App, { target: document.getElementById('app')!, }); ``` -------------------------------- ### Complete App.svelte Example with Custom Node Source: https://svelteflow.dev/llms-medium.txt This is a full example of the App.svelte file, integrating Svelte Flow with a custom `textUpdater` node type and basic styling. ```svelte ``` -------------------------------- ### HTML Structure for Svelte Flow Panel Example Source: https://svelteflow.dev/llms-full.txt HTML5 document setup for a Svelte Flow Panel example, including viewport meta tag, title, and script for mounting the Svelte app. ```html SvelteFlow Panel Example
``` -------------------------------- ### Basic SvelteFlow Component Setup Source: https://svelteflow.dev/api-reference/svelte-flow This snippet demonstrates the fundamental setup of the SvelteFlow component, including importing necessary modules and defining initial nodes and edges. It binds to the nodes and edges state variables and enables the fitView option. ```svelte ``` -------------------------------- ### Full Example: App Component with Custom Edge Source: https://svelteflow.dev/llms-full.txt A complete Svelte app component demonstrating the usage of a custom edge. It includes SvelteFlow setup, node and edge definitions, and the custom edge type registration. ```svelte ``` -------------------------------- ### Complete SvelteFlow App Example Source: https://svelteflow.dev/llms-medium.txt A full Svelte application example demonstrating the integration of SvelteFlow with nodes, background, and controls. Ensure the necessary CSS is imported for proper styling. ```svelte
``` -------------------------------- ### Install Svelte Flow with yarn Source: https://svelteflow.dev/learn Install the Svelte Flow package using yarn. ```bash yarn add @xyflow/svelte ``` -------------------------------- ### Install Svelte Flow with pnpm Source: https://svelteflow.dev/learn Install the Svelte Flow package using pnpm. ```bash pnpm add @xyflow/svelte ``` -------------------------------- ### HTML Structure for SvelteFlow Controls Example Source: https://svelteflow.dev/llms-medium.txt Basic HTML5 document structure for the SvelteFlow Controls example, including viewport settings and script tag for mounting. ```html SvelteFlow Controls Example
``` -------------------------------- ### Install Svelte Flow with npm Source: https://svelteflow.dev/learn Install the Svelte Flow package using npm. ```bash npm install @xyflow/svelte ``` -------------------------------- ### Svelte Flow Setup with CSS Source: https://svelteflow.dev/llms-medium.txt Basic CSS for setting the HTML, body, and app container to full width and height. ```css html, body { margin: 0; font-family: sans-serif; } html, body, #app { width: 100%; height: 100%; } ``` -------------------------------- ### Basic SvelteFlow Setup with CSS Source: https://svelteflow.dev/llms-medium.txt Standard CSS for SvelteFlow applications, ensuring proper sizing and font styles. ```css html, body, #app { width: 100%; height: 100%; margin: 0; font-family: sans-serif; } ``` -------------------------------- ### App.svelte - Svelte Flow Provider Setup Source: https://svelteflow.dev/examples/nodes/add-node-on-edge-drop This snippet shows the basic setup for Svelte Flow in your Svelte application. It includes importing the necessary provider and the main Flow component. ```svelte ``` -------------------------------- ### Install Svelte Flow Source: https://svelteflow.dev/learn/concepts/building-a-flow Install the Svelte Flow package using npm, pnpm, yarn, or bun. ```bash npm install @xyflow/svelte ``` ```bash pnpm add @xyflow/svelte ``` ```bash yarn add @xyflow/svelte ``` ```bash bun add @xyflow/svelte ``` -------------------------------- ### Import Default Svelte Flow Styles Source: https://svelteflow.dev/learn/customization/theming Import the default styles in your entry point file (e.g., +layout.svelte, App.svelte) to get started with basic Svelte Flow styling. ```javascript import '@xyflow/svelte/dist/style.css'; ``` -------------------------------- ### Create SvelteKit project with Svelte Flow Source: https://svelteflow.dev/llms-medium.txt Use this command to create a new Svelte project with SvelteKit and Vite, then install Svelte Flow. ```bash npx sv create my-svelte-flow-app ``` ```bash npm install @xyflow/svelte ``` -------------------------------- ### Svelte Flow with Easy Connect Setup Source: https://svelteflow.dev/examples/nodes/easy-connect This snippet shows the main Svelte component setup for Svelte Flow, including custom node and edge types, default edge options, and background configuration. It initializes nodes and edges and integrates custom components for a richer user interface. ```svelte ``` -------------------------------- ### Basic Svelte Flow App Setup Source: https://svelteflow.dev/llms-medium.txt Sets up the root Svelte component to provide Svelte Flow context. Ensure SvelteFlowProvider is a parent to your flow component. ```svelte ``` -------------------------------- ### Svelte Flow CSS Setup Source: https://svelteflow.dev/llms-full.txt Basic CSS setup for a Svelte Flow application, including importing default styles and a custom theme. Ensures proper styling for the flow and its elements. ```css @import url('@xyflow/svelte/dist/style.css'); /* we put the theme css at the end to override some of the default css variables and styles */ @import url('./xy-theme.css'); html, body { margin: 0; font-family: sans-serif; } #app { width: 100vw; height: 100vh; } ``` -------------------------------- ### HTML for Svelte Flow Panel Example Source: https://svelteflow.dev/llms-medium.txt Standard HTML5 document structure for a Svelte application, including meta tags, title, and a div with id 'app' to mount the Svelte component. This is for the Panel example. ```html SvelteFlow Panel Example
``` -------------------------------- ### Basic Svelte Flow Setup with TypeScript Source: https://svelteflow.dev/learn/advanced/typescript Demonstrates the essential imports and type definitions for a basic Svelte Flow component, including nodes, edges, and configuration options. ```typescript import { SvelteFlow, Controls, Background, BackgroundVariant, type Node, type Edge, type FitViewOptions, type DefaultEdgeOptions, } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css'; let nodes = $state.raw([ { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 5, y: 5 }, }, { id: '2', type: 'default', data: { label: 'Node 2' }, position: { x: 5, y: 100 }, }, ]); let edges = $state.raw([ { id: 'e1-2', source: '1', target: '2' } ]); const fitViewOptions: FitViewOptions = { padding: 0.2, }; const defaultEdgeOptions: DefaultEdgeOptions = { animated: true, }; ``` -------------------------------- ### Basic CSS for Svelte Flow Example Source: https://svelteflow.dev/llms-medium.txt Minimal CSS for setting up the HTML and body margins and font family for a Svelte Flow application. ```css html, body { margin: 0; font-family: sans-serif; } ``` -------------------------------- ### Solution: Using useSvelteFlow with SvelteFlowProvider Source: https://svelteflow.dev/llms-medium.txt This example demonstrates using `useSvelteFlow` after wrapping the Svelte Flow component with `SvelteFlowProvider` in a parent component. ```svelte ``` ```svelte ``` -------------------------------- ### Full Example: App with Custom Edge Source: https://svelteflow.dev/llms-medium.txt A complete Svelte application demonstrating the integration of a custom edge type with SvelteFlow, including nodes, edges, and styling. ```svelte ``` -------------------------------- ### Full Svelte Flow Example with Custom Edge Source: https://svelteflow.dev/llms-medium.txt A complete Svelte component demonstrating nodes and edges with a 'smoothstep' type and a custom label. ```svelte
``` -------------------------------- ### CSS for Svelte Flow Background Example Source: https://svelteflow.dev/llms-medium.txt Basic CSS for setting up the HTML, body, and app container to ensure full-page coverage for the Svelte Flow application. ```css html, body, #app { width: 100%; height: 100%; margin: 0; font-family: sans-serif; } ``` -------------------------------- ### Create Svelte Flow app with Vite template using degit Source: https://svelteflow.dev/learn Use degit to download the Svelte Flow Vite template to start a new project. ```bash npx degit xyflow/vite-svelte-flow-template app-name ``` -------------------------------- ### useSvelteFlow() Source: https://svelteflow.dev/api-reference/hooks The useSvelteFlow hook returns functions to update the viewport, transform coordinates or get node intersections for example. ```APIDOC ## useSvelteFlow() ### Description Returns utility functions for interacting with the Svelte Flow instance, such as viewport manipulation, coordinate transformation, and node intersection checks. ### Method N/A (Hook) ### Parameters None ### Response - **svelteFlowUtils** (object) - An object containing utility functions like `updateViewport`, `transform`, `getIntersection`, etc. ``` -------------------------------- ### Create SvelteKit app with Vite template using bun x Source: https://svelteflow.dev/learn Use bun x to create a new SvelteKit project with Vite templates. ```bash bun x sv create my-svelte-flow-app ``` -------------------------------- ### Create SvelteKit app with Vite template using pnpm dlx Source: https://svelteflow.dev/learn Use pnpm dlx to create a new SvelteKit project with Vite templates. ```bash pnpm dlx sv create my-svelte-flow-app ``` -------------------------------- ### CustomEdge.svelte Component (Full Example) Source: https://svelteflow.dev/llms-full.txt The Svelte component for the custom edge, as used in the full example. It calculates and renders a straight path using BaseEdge and getStraightPath. ```svelte ``` -------------------------------- ### Create SvelteKit app with Vite template using npx Source: https://svelteflow.dev/learn Use npx to create a new SvelteKit project with Vite templates. ```bash npx sv create my-svelte-flow-app ``` -------------------------------- ### Get Node Connections with useNodeConnections Source: https://svelteflow.dev/llms-full.txt Use `useNodeConnections` to get all edges connected to a specific node. You can filter by handle type ('source', 'target') and handle ID. ```svelte
There are currently {connections.current.length} incoming connections!
``` -------------------------------- ### Get Current Edges with useEdges Source: https://svelteflow.dev/llms-full.txt Use the `useEdges` hook to access the current array of edges. The hook returns an object with a `.current` property to get the array. ```svelte ``` -------------------------------- ### Svelte Component with Base Styles Source: https://svelteflow.dev/llms-medium.txt A Svelte component demonstrating Svelte Flow using only the base styles. This example is similar to the default styles example but emphasizes minimal styling. ```svelte ``` -------------------------------- ### Create Svelte Flow app with Vite template using bun x Source: https://svelteflow.dev/learn Use bun x to download the Svelte Flow Vite template to start a new project. ```bash bun x degit xyflow/vite-svelte-flow-template app-name ``` -------------------------------- ### Get Current Nodes with useNodes Source: https://svelteflow.dev/llms-full.txt Use the `useNodes` hook to access the current array of nodes. The hook returns an object with a `.current` property to get the array, and it triggers updates when nodes are added, removed, or modified. ```svelte ``` -------------------------------- ### Get Incoming Connections for a Specific Handle Source: https://svelteflow.dev/api-reference/hooks/use-node-connections This snippet demonstrates how to use the useNodeConnections hook to get all incoming connections for a specific handle on a node. It requires importing the hook and then accessing the `current` property of the returned connections array. ```javascript import { useNodeConnections } from '@xyflow/svelte'; const connections = useNodeConnections({ handleType: 'target', handleId: 'my-handle' }); ``` -------------------------------- ### Create SvelteKit app with Vite template using yarn dlx Source: https://svelteflow.dev/learn Use yarn dlx to create a new SvelteKit project with Vite templates. ```bash yarn dlx sv create my-svelte-flow-app ``` -------------------------------- ### Basic SvelteFlow Implementation Source: https://svelteflow.dev/llms-medium.txt Sets up a basic SvelteFlow component with default nodes and edges. Includes configuration for fitting the view and default edge options. ```svelte ``` -------------------------------- ### EdgeMarker Source: https://svelteflow.dev/llms-full.txt Configuration for markers at the start and end of an edge. ```APIDOC ## EdgeMarker ### Description Configuration for markers at the start and end of an edge. The `EdgeMarker` type is used to configure these markers. ### Fields * `type: MarkerType | "arrow" | "arrowclosed"` * `color?: string | null` * `width?: number` * `height?: number` * `markerUnits?: string` * `orient?: string` * `strokeWidth?: number` ``` -------------------------------- ### OnConnectStart Source: https://svelteflow.dev/api-reference/types A callback function triggered when the user starts creating a connection between nodes in SvelteFlow. ```APIDOC ## OnConnectStart ### Description Callback function triggered when starting to create a connection in SvelteFlow. ### Type Definition ```typescript type OnConnectStart = (event: MouseEvent, params: HandleType) => void; ``` ``` -------------------------------- ### HTML for Svelte Flow Background Example Source: https://svelteflow.dev/llms-medium.txt Standard HTML5 document structure for a Svelte application, including meta tags, title, and a div with id 'app' to mount the Svelte component. ```html SvelteFlow Background Example
``` -------------------------------- ### Default Svelte Flow with Nodes and Edges Source: https://svelteflow.dev/llms-medium.txt Sets up a basic Svelte Flow instance with initial nodes and edges, utilizing default pan and zoom behaviors. Includes a background element and fits the view to the content. ```svelte ``` ```css html, body { margin: 0; font-family: sans-serif; } #app { width: 100vw; height: 100vh; } ``` ```html Svelte Flow Example
``` ```typescript import { mount } from 'svelte'; import App from './App.svelte'; import './index.css'; mount(App, { target: document.getElementById('app')!, }); ``` -------------------------------- ### OnReconnectStart Source: https://svelteflow.dev/llms.txt A callback function triggered at the beginning of an edge reconnection attempt in SvelteFlow, allowing for initial checks or setup. ```APIDOC ## OnReconnectStart ### Description Callback function triggered when reconnecting an existing edge in SvelteFlow. This function receives the event and the edge being reconnected. ### Type (event: MouseEvent | TouchEvent, edge: Edge) => void ``` -------------------------------- ### Svelte Flow App Setup with ELK.js Source: https://svelteflow.dev/examples/layout/elkjs Basic Svelte app structure to initialize Svelte Flow and import necessary CSS. This serves as the entry point for using Svelte Flow with custom layouts. ```svelte ``` -------------------------------- ### Edge Marker Configuration Source: https://svelteflow.dev/llms-full.txt Configures markers at the start and end of an edge. Refer to MarkerType for available marker types. ```typescript interface EdgeMarker { type: MarkerType | "arrow" | "arrowclosed"; color?: string | null; width?: number; height?: number; markerUnits?: string; orient?: string; strokeWidth?: number; } ``` -------------------------------- ### Main CSS Imports and Reset Source: https://svelteflow.dev/llms-medium.txt Imports the theme CSS and applies basic resets for HTML and body elements. Sets up the main application container. ```css @import url('./xy-theme.css'); html, body { margin: 0; font-family: sans-serif; } #app { width: 100vw; height: 100vh; } ``` -------------------------------- ### Basic Svelte Flow Component Usage Source: https://svelteflow.dev/learn Demonstrates the basic setup of the SvelteFlow component with nodes, edges, and built-in controls. Ensure the parent element has dimensions and import the default stylesheet. ```svelte
``` -------------------------------- ### Get Internal Node with useInternalNode Source: https://svelteflow.dev/api-reference/hooks/use-internal-node Import and use the useInternalNode hook to retrieve an internal node by its ID. This is useful for advanced customization. ```javascript import { useInternalNode } from '@xyflow/svelte'; const node = useInternalNode(id); ``` -------------------------------- ### Get Connected Edges - Svelte Source: https://svelteflow.dev/api-reference/utils/get-connected-edges Import and use the getConnectedEdges utility by passing your selected nodes and all edges. Ensure you have imported the function from '@xyflow/svelte'. ```javascript import { getConnectedEdges } from '@xyflow/svelte'; let nodes = $state.raw([]); let edges = $state.raw([]); const connectedEdges = getConnectedEdges(nodes.value, edges.value); ``` -------------------------------- ### SVG Path Commands for Custom Edges Source: https://svelteflow.dev/learn/customization/custom-edges Illustrates basic SVG path commands like 'M' (Move To), 'L' (Line To), and 'Q' (Quadratic Bezier Curve) used for constructing custom edge paths. ```plaintext M x1 y1 L x2 y2 ``` ```plaintext M x1 y1 ``` ```plaintext L x1 y1 ``` ```plaintext Q x1 y1 x2 y2 ```