<Panel />

<Panel />

Source on GitHub (opens in a new tab)

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([]);
<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>


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