<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 { writable } from 'svelte/store';
  import { SvelteFlow, Panel } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={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>
</SvelteFlow>

Props

For TypeScript users, the props type for the <Panel /> component is exported as PanelProps.

Name	Type
#`position`	`PanelPosition`
#`children`	`SvelteComponent`