<Panel />

Source on GitHub

The <Panel /> component helps you position content above the viewport. It is used internally by the <MiniMap /> and <Controls /> components.


<script lang="ts">
  import { SvelteFlow, Panel } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
</script>
 
<SvelteFlow bind:nodes bind:edges>
  <Panel position="top-left">top-left</Panel>
  <Panel position="top-center">top-center</Panel>
  <Panel position="top-right">top-right</Panel>
  <Panel position="bottom-left">bottom-left</Panel>
  <Panel position="bottom-center">bottom-center</Panel>
  <Panel position="bottom-right">bottom-right</Panel>
  <Panel position="center-left">center-left</Panel>
  <Panel position="center-right">center-right</Panel>
</SvelteFlow>

Props

The type for props of <Panel /> component is exported as PanelProps. Additionally, it extends the props of <div />.

Name	Type	Default
`position`	`PanelPosition` Set position of the panel
`...props`	`HTMLAttributes<HTMLDivElement>`