svelte-splitpanes Documentation

After creating your project and installing dependencies via npm install, pnpm install, or yarn, use the dev script to start the development server. You can use the --open flag to automatically open the application in a new browser tab.

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

To generate a production-ready version of your application, run the build script. Once built, you can use the preview script to test the production build locally. Note that deploying to specific environments may require installing a SvelteKit adapter.

npm run build

# preview the production build
npm run preview

Use npm create svelte@latest to scaffold a new Svelte project. You can either initialize the project in the current directory or specify a directory name.

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

The primary way to use this library is by importing the Splitpanes and Pane components. Splitpanes acts as the container for multiple Pane components, allowing for resizable layouts.

<script>
  import { Splitpanes, Pane } from 'svelte-splitpanes';
</script>

<Splitpanes>
  <Pane>Pane 1</Pane>
  <Pane>Pane 2</Pane>
</Splitpanes>

The IPane interface defines the internal structure and capabilities of a pane within the splitpane system. It includes properties for tracking size, constraints, and DOM elements.

export interface IPane {
  // unique key per pane
  key: any;
  element: HTMLElement;
  // 0....N index in pane array
  index: number;
  min: () => number;
  max: () => number;
  snap: () => number;
  sz: () => number;
  setSz: (number: number) => void;
  setSplitterActive: (isActive: boolean) => void;
  givenSize: number | null;
  isReady: boolean;
}

The IPaneSizingEvent interface describes the sizing details emitted during a sizing event, expressed in percentages.

export interface IPaneSizingEvent {
  /**
   * Minimum size in %.
   */
  min: number;

  /**
   * Maximum size in %.
   */
  max: number;

  /**
   * Pane size in %.
   */
  size: number;

  /**
   * Snap size in %.
   */
  snap: number;
}

The ClientCallbacks interface defines the event handlers provided to panes to react to user interactions with splitters and panes.

export interface ClientCallbacks {
  onSplitterDown: (_event: TouchEvent | MouseEvent) => void;
  onSplitterClick: (_event: MouseEvent) => void;
  onSplitterDblClick: (_event: MouseEvent) => void;
  onPaneClick: (_event: MouseEvent) => void;
  /** Report the manual given size was changed. */
  reportGivenSizeChange: (_newGivenSize: number) => void;
}

The SplitContext interface represents the context passed from the Splitpanes container to its child Pane components. It provides reactive information about the layout state and methods for pane initialization and lifecycle management.

export interface SplitContext {
  /** Tells the key of the very first pane, or undefined if not recieved yet. */
  veryFirstPaneKey: Readable<any>;
  isHorizontal: Readable<boolean>;
  showFirstSplitter: Readable<boolean>;
  ssrRegisterPaneSize?: (size: number | null) => void;
  onPaneInit: PaneInitFunction;
  clientOnly?: {
    onPaneAdd: (pane: IPane) => ClientCallbacks;
    onPaneRemove: (key: any) => Promise<void>;
  };
}