Splitter

Resizable panes separated by draggable handles — the three-pane shell every IDE-shaped product needs.

Splitter is a compound: you place <SplitterPane> and <SplitterHandle> children yourself, interleaved in source order. That is deliberate rather than a panes-only API, because each pane holds arbitrary content and an explicit handle keeps the DOM order obvious.

Sizing is relative weights plus absolute pixel limits. size is a weight — three panes at 1 / 2 / 1 take a quarter, a half and a quarter of the space left after the handles — while min and max are pixels, because that is what content actually needs (“this sidebar stops being usable under 200px”). Because weights are the source of truth, resizing the container redistributes proportionally rather than replaying stale pixel values.

Horizontal

The default axis splits left/right. Drag a handle and only the two panes on either side of it move — panes further along never shift under the cursor, so a drag is a local negotiation rather than a relayout.

PreviewCode

Canvas

Inspector

---
// GENERATED from packages/demos/splitter/horizontal.demo.tsx — edit the source, not this file.
import Splitter from "@pindoba/astro-splitter";
import { SplitterPane, SplitterHandle } from "@pindoba/astro-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "12rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
---

<div class={frame}>
  <Splitter
    panes={[
      { id: "sidebar", size: 1, min: 70 },
      { id: "main", size: 3, min: 90 },
      { id: "inspector", size: 1, min: 70 },
    ]}
  >
    <SplitterPane id="sidebar">
      <div class={pane}>Sidebar</div>
    </SplitterPane>
    <SplitterHandle controls="sidebar" />
    <SplitterPane id="main">
      <div class={pane}>Canvas</div>
    </SplitterPane>
    <SplitterHandle controls="main" />
    <SplitterPane id="inspector">
      <div class={pane}>Inspector</div>
    </SplitterPane>
  </Splitter>
</div>

Canvas

Inspector

// GENERATED from packages/demos/splitter/horizontal.demo.tsx — edit the source, not this file.
import {
  Splitter,
  SplitterPane,
  SplitterHandle,
} from "@pindoba/react-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "12rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
export default function HorizontalDemo() {
  return (
    <div className={frame}>
      <Splitter
        panes={[
          { id: "sidebar", size: 1, min: 70 },
          { id: "main", size: 3, min: 90 },
          { id: "inspector", size: 1, min: 70 },
        ]}
      >
        <SplitterPane id="sidebar">
          <div className={pane}>Sidebar</div>
        </SplitterPane>
        <SplitterHandle controls="sidebar" />
        <SplitterPane id="main">
          <div className={pane}>Canvas</div>
        </SplitterPane>
        <SplitterHandle controls="main" />
        <SplitterPane id="inspector">
          <div className={pane}>Inspector</div>
        </SplitterPane>
      </Splitter>
    </div>
  );
}

Canvas

Inspector

<script lang="ts">
  // GENERATED from packages/demos/splitter/horizontal.demo.tsx — edit the source, not this file.
  import Splitter from "@pindoba/svelte-splitter";
  import { SplitterPane, SplitterHandle } from "@pindoba/svelte-splitter";
  import { css } from "@pindoba/styled-system/css";

  const pane = css({ padding: "sm", fontSize: "sm" });
  const frame = css({
    width: "100%",
    height: "12rem",
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: "neutral.border.muted",
    borderRadius: "sm",
    overflow: "hidden",
  });
</script>

<div class={frame}>
  <Splitter
    panes={[
      { id: "sidebar", size: 1, min: 70 },
      { id: "main", size: 3, min: 90 },
      { id: "inspector", size: 1, min: 70 },
    ]}
  >
    <SplitterPane id="sidebar">
      <div class={pane}>Sidebar</div>
    </SplitterPane>
    <SplitterHandle controls="sidebar"></SplitterHandle>
    <SplitterPane id="main">
      <div class={pane}>Canvas</div>
    </SplitterPane>
    <SplitterHandle controls="main"></SplitterHandle>
    <SplitterPane id="inspector">
      <div class={pane}>Inspector</div>
    </SplitterPane>
  </Splitter>
</div>

Canvas

Inspector

<script setup lang="ts">
// GENERATED from packages/demos/splitter/horizontal.demo.tsx — edit the source, not this file.
import { Splitter, SplitterPane, SplitterHandle } from "@pindoba/vue-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "12rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
</script>

<template>
  <div :class="frame">
    <Splitter
      :panes="[
        { id: 'sidebar', size: 1, min: 70 },
        { id: 'main', size: 3, min: 90 },
        { id: 'inspector', size: 1, min: 70 },
      ]"
    >
      <SplitterPane id="sidebar">
        <div :class="pane">Sidebar</div>
      </SplitterPane>
      <SplitterHandle controls="sidebar"></SplitterHandle>
      <SplitterPane id="main">
        <div :class="pane">Canvas</div>
      </SplitterPane>
      <SplitterHandle controls="main"></SplitterHandle>
      <SplitterPane id="inspector">
        <div :class="pane">Inspector</div>
      </SplitterPane>
    </Splitter>
  </div>
</template>

Canvas

Inspector

// GENERATED from packages/demos/splitter/horizontal.demo.tsx — edit the source, not this file.
import {
  Splitter,
  SplitterPane,
  SplitterHandle,
} from "@pindoba/solid-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "12rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
export default function HorizontalDemo() {
  return (
    <div class={frame}>
      <Splitter
        panes={[
          { id: "sidebar", size: 1, min: 70 },
          { id: "main", size: 3, min: 90 },
          { id: "inspector", size: 1, min: 70 },
        ]}
      >
        <SplitterPane id="sidebar">
          <div class={pane}>Sidebar</div>
        </SplitterPane>
        <SplitterHandle controls="sidebar" />
        <SplitterPane id="main">
          <div class={pane}>Canvas</div>
        </SplitterPane>
        <SplitterHandle controls="main" />
        <SplitterPane id="inspector">
          <div class={pane}>Inspector</div>
        </SplitterPane>
      </Splitter>
    </div>
  );
}

Vertical

orientation="vertical" splits top/bottom. Set it on the root and on each handle, so a handle rendered on its own still knows which way it moves.

PreviewCode

Editor

Output

---
// GENERATED from packages/demos/splitter/vertical.demo.tsx — edit the source, not this file.
import Splitter from "@pindoba/astro-splitter";
import { SplitterPane, SplitterHandle } from "@pindoba/astro-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "14rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
---

<div class={frame}>
  <Splitter
    orientation="vertical"
    panes={[
      { id: "editor", size: 2, min: 60 },
      { id: "output", size: 1, min: 48 },
    ]}
  >
    <SplitterPane id="editor">
      <div class={pane}>Editor</div>
    </SplitterPane>
    <SplitterHandle orientation="vertical" controls="editor" />
    <SplitterPane id="output">
      <div class={pane}>Output</div>
    </SplitterPane>
  </Splitter>
</div>

Editor

Output

// GENERATED from packages/demos/splitter/vertical.demo.tsx — edit the source, not this file.
import {
  Splitter,
  SplitterPane,
  SplitterHandle,
} from "@pindoba/react-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "14rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
export default function VerticalDemo() {
  return (
    <div className={frame}>
      <Splitter
        orientation="vertical"
        panes={[
          { id: "editor", size: 2, min: 60 },
          { id: "output", size: 1, min: 48 },
        ]}
      >
        <SplitterPane id="editor">
          <div className={pane}>Editor</div>
        </SplitterPane>
        <SplitterHandle orientation="vertical" controls="editor" />
        <SplitterPane id="output">
          <div className={pane}>Output</div>
        </SplitterPane>
      </Splitter>
    </div>
  );
}

Editor

Output

<script lang="ts">
  // GENERATED from packages/demos/splitter/vertical.demo.tsx — edit the source, not this file.
  import Splitter from "@pindoba/svelte-splitter";
  import { SplitterPane, SplitterHandle } from "@pindoba/svelte-splitter";
  import { css } from "@pindoba/styled-system/css";

  const pane = css({ padding: "sm", fontSize: "sm" });
  const frame = css({
    width: "100%",
    height: "14rem",
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: "neutral.border.muted",
    borderRadius: "sm",
    overflow: "hidden",
  });
</script>

<div class={frame}>
  <Splitter
    orientation="vertical"
    panes={[
      { id: "editor", size: 2, min: 60 },
      { id: "output", size: 1, min: 48 },
    ]}
  >
    <SplitterPane id="editor">
      <div class={pane}>Editor</div>
    </SplitterPane>
    <SplitterHandle orientation="vertical" controls="editor"></SplitterHandle>
    <SplitterPane id="output">
      <div class={pane}>Output</div>
    </SplitterPane>
  </Splitter>
</div>

Editor

Output

<script setup lang="ts">
// GENERATED from packages/demos/splitter/vertical.demo.tsx — edit the source, not this file.
import { Splitter, SplitterPane, SplitterHandle } from "@pindoba/vue-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "14rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
</script>

<template>
  <div :class="frame">
    <Splitter
      orientation="vertical"
      :panes="[
        { id: 'editor', size: 2, min: 60 },
        { id: 'output', size: 1, min: 48 },
      ]"
    >
      <SplitterPane id="editor">
        <div :class="pane">Editor</div>
      </SplitterPane>
      <SplitterHandle orientation="vertical" controls="editor"></SplitterHandle>
      <SplitterPane id="output">
        <div :class="pane">Output</div>
      </SplitterPane>
    </Splitter>
  </div>
</template>

Editor

Output

// GENERATED from packages/demos/splitter/vertical.demo.tsx — edit the source, not this file.
import {
  Splitter,
  SplitterPane,
  SplitterHandle,
} from "@pindoba/solid-splitter";
import { css } from "@pindoba/styled-system/css";

const pane = css({ padding: "sm", fontSize: "sm" });
const frame = css({
  width: "100%",
  height: "14rem",
  borderWidth: "1px",
  borderStyle: "solid",
  borderColor: "neutral.border.muted",
  borderRadius: "sm",
  overflow: "hidden",
});
export default function VerticalDemo() {
  return (
    <div class={frame}>
      <Splitter
        orientation="vertical"
        panes={[
          { id: "editor", size: 2, min: 60 },
          { id: "output", size: 1, min: 48 },
        ]}
      >
        <SplitterPane id="editor">
          <div class={pane}>Editor</div>
        </SplitterPane>
        <SplitterHandle orientation="vertical" controls="editor" />
        <SplitterPane id="output">
          <div class={pane}>Output</div>
        </SplitterPane>
      </Splitter>
    </div>
  );
}

Collapsible

Mark a pane collapsible and it snaps shut once dragged past its min by collapseThreshold px — a deliberate push, not a twitch. Enter on an adjacent handle toggles the same state from the keyboard. A collapsed pane keeps its DOM (and its scroll position); only its track goes to zero.

PreviewCode