HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SplitterView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorTwo panes and a divider that you can move.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/splitter'import'@fusion.dev/helix-headless/splitter'Preview
API ReferenceRoothelix-splitterTwo panes and a divider that you can move.
PropTypeDescriptioncollapsed"end"|"start"Which pane is shut, if either.collapsedLabelstringDefault"Collapsed"The divider's value while a pane is shut, as text in place of a number.collapsedSizenumberDefault0How much of a shut pane is still shown, as a percentage.collapsible"both"|"end"|"none"|"start"Which panes can be collapsed, as Zag's panels each take collapsible:
start, end, both, or none. A pane that cannot be collapsed stops
at the edge without shutting. Enter collapses the end pane where only
the end pane can be collapsed, and the start pane otherwise.cornerLabelstringDefault"Resize both"The name of the handle where two dividers cross, read by screen readers.cornerValueLabelstringDefault"{across} across, {down} down"What the handle where two dividers cross says it is set to, both dividers
at once: {across} is where the divider that runs down stands, and
{down} where the one that runs across stands, each a percentage.defaultCollapsed"end"|"start"Which pane starts shut, when collapsed is not set.defaultPositionnumberDefault50Where the divider starts, when position is not set.endMinnumber|stringDefault0The least the end pane keeps, in the units min takes: a percentage, or
a CSS length such as 16rem resolved against the splitter's box. The
divider stops that far from the end, whatever max allows, so min and
end-min hold a minimum for each pane, as Zag's panels each take
minSize.labelstringDefault"Resize panes"The divider's name, read by screen readers.maxnumber|stringDefault100How close the divider can come to the end, in the same units as min.minnumber|stringDefault0How close the divider can come to the start.orientation"auto"|"horizontal"|"vertical"Which way the panes are laid out.positionnumberWhere the divider sits, as a percentage of the whole.primary"end"|"start"The pane that keeps its size when the splitter's own size changes. The
other pane takes all of the change. Unset, both keep their share.snapstringDefault""Where a dragged divider snaps, comma separated, as Web Awesome's split
panel does: a bare number is a percentage and a length such as 240px is
measured along the splitter, so snap="25, 50, 75" or snap="240px, 50".
The arrow keys move by step and do not snap.snapThresholdnumberDefault12How close a drag has to come to a snap point to land on it, in pixels.stepnumberDefault2How far one arrow key press moves the divider, as a percentage.variant"grip"|"line"Whether the divider shows a grip.
ReadTypeDescriptionverticalbooleanWhether the panes are stacked. Public because a nested splitter compares
its axis with the one it is in.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendThe pane after the divider.handleA mark drawn at the middle of the divider, such as a grip icon. It takes no focus and no pointer of its own: a press on it is a press on the divider.startThe pane before the divider.
EventTypeDescriptionhelix-before-collapseHelixBeforeCollapseEventFired before a pane shuts or reopens, whether or not the resize that caused it was allowed. It carries its own position, because a shut pane sits at collapsed-size. Cancelable: canceling it leaves the pane as it was and the divider where the gesture put it.helix-before-resizeHelixBeforeResizeEventFired before the divider settles, and only when the gesture moved it. A press that moved nothing, a drag that came back, an arrow key with no room left, and a corner that moved only the other divider do not fire it. Cancelable: canceling it leaves the position to you and keeps the rest of the gesture, so a collapse the gesture reached still fires helix-before-collapse, which you can also cancel. A dragged divider stays where it was dropped until you set your own position.helix-collapseHelixCollapseEventFired after a pane shuts or reopens, with the side that is shut, or empty where both are open.helix-resizedHelixResizedEventFired after the divider settles somewhere new, with the new position.inputEventFired each time the divider moves, as a range input does: on each step of a drag, and before helix-resized for a key, a double click or a corner. Read position for where it is now.
MethodTypeDescriptionmoveTo(next: number, settled: unknown) => voidMoves the divider. With settled set, it also fires the events for a
finished move.
PartDescriptioncornerThe handle where a nested splitter's divider crosses this one.endThe box that holds the second pane.separatorThe divider itself.startThe box that holds the first pane.
CSS PropertyDescription--splitter-colorColor of the line between the panes.--splitter-cornerWidth of the handle where two dividers cross.--splitter-corner-atWhere a nested splitter crosses this one, as a percentage.--splitter-drag-colorColor of the line while it is being moved.--splitter-grip-colorColor of the grip beside the line, when the grip is shown.--splitter-grip-lengthHow far the grip runs along the divider.--splitter-grip-thicknessHow thick the grip is, across the divider.--splitter-handle-colorColor of a mark slotted into handle.--splitter-hover-colorColor of the divider's target under the pointer.--splitter-hover-thicknessHow thick the line is under the pointer, with focus and while it moves.--splitter-positionWhere the divider sits, as a percentage of the box.--splitter-targetWidth of the area you can drag.--splitter-thicknessHow thick the line is at rest.
Custom stateDescriptioncollapsedWhile a pane is shut. data-collapsed on the host says which.draggingWhile the pointer or a corner holds the divider.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalWhile the panes are one above the other, whether orientation says so or auto turned them.
Roothelix-headless-splitterTwo panes and a divider that you can move.
PropTypeDescriptioncollapsed"end"|"start"Which pane is shut, if either.collapsedLabelstringDefault"Collapsed"The divider's value while a pane is shut, as text in place of a number.collapsedSizenumberDefault0How much of a shut pane is still shown, as a percentage.collapsible"both"|"end"|"none"|"start"Which panes can be collapsed, as Zag's panels each take collapsible:
start, end, both, or none. A pane that cannot be collapsed stops
at the edge without shutting. Enter collapses the end pane where only
the end pane can be collapsed, and the start pane otherwise.cornerLabelstringDefault"Resize both"The name of the handle where two dividers cross, read by screen readers.cornerValueLabelstringDefault"{across} across, {down} down"What the handle where two dividers cross says it is set to, both dividers
at once: {across} is where the divider that runs down stands, and
{down} where the one that runs across stands, each a percentage.defaultCollapsed"end"|"start"Which pane starts shut, when collapsed is not set.defaultPositionnumberDefault50Where the divider starts, when position is not set.endMinnumber|stringDefault0The least the end pane keeps, in the units min takes: a percentage, or
a CSS length such as 16rem resolved against the splitter's box. The
divider stops that far from the end, whatever max allows, so min and
end-min hold a minimum for each pane, as Zag's panels each take
minSize.labelstringDefault"Resize panes"The divider's name, read by screen readers.maxnumber|stringDefault100How close the divider can come to the end, in the same units as min.minnumber|stringDefault0How close the divider can come to the start.orientation"auto"|"horizontal"|"vertical"Which way the panes are laid out.positionnumberWhere the divider sits, as a percentage of the whole.primary"end"|"start"The pane that keeps its size when the splitter's own size changes. The
other pane takes all of the change. Unset, both keep their share.snapstringDefault""Where a dragged divider snaps, comma separated, as Web Awesome's split
panel does: a bare number is a percentage and a length such as 240px is
measured along the splitter, so snap="25, 50, 75" or snap="240px, 50".
The arrow keys move by step and do not snap.snapThresholdnumberDefault12How close a drag has to come to a snap point to land on it, in pixels.stepnumberDefault2How far one arrow key press moves the divider, as a percentage.
ReadTypeDescriptionverticalbooleanWhether the panes are stacked. Public because a nested splitter compares
its axis with the one it is in.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendThe pane after the divider.handleA mark drawn at the middle of the divider, such as a grip icon. It takes no focus and no pointer of its own: a press on it is a press on the divider.startThe pane before the divider.
EventTypeDescriptionhelix-before-collapseHelixBeforeCollapseEventFired before a pane shuts or reopens, whether or not the resize that caused it was allowed. It carries its own position, because a shut pane sits at collapsed-size. Cancelable: canceling it leaves the pane as it was and the divider where the gesture put it.helix-before-resizeHelixBeforeResizeEventFired before the divider settles, and only when the gesture moved it. A press that moved nothing, a drag that came back, an arrow key with no room left, and a corner that moved only the other divider do not fire it. Cancelable: canceling it leaves the position to you and keeps the rest of the gesture, so a collapse the gesture reached still fires helix-before-collapse, which you can also cancel. A dragged divider stays where it was dropped until you set your own position.helix-collapseHelixCollapseEventFired after a pane shuts or reopens, with the side that is shut, or empty where both are open.helix-resizedHelixResizedEventFired after the divider settles somewhere new, with the new position.inputEventFired each time the divider moves, as a range input does: on each step of a drag, and before helix-resized for a key, a double click or a corner. Read position for where it is now.
MethodTypeDescriptionmoveTo(next: number, settled: unknown) => voidMoves the divider. With settled set, it also fires the events for a
finished move.
PartDescriptioncornerThe handle where two dividers cross, added on the client.endThe box that holds the second pane.separatorThe divider itself.startThe box that holds the first pane.
CSS PropertyDescription--splitter-corner-atWhere a nested splitter crosses this one, as a percentage.--splitter-positionWhere the divider sits, as a percentage of the box.
Custom stateDescriptioncollapsedWhile a pane is shut. data-collapsed on the host says which.draggingWhile the pointer or a corner holds the divider.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalWhile the panes are one above the other, whether orientation says so or auto turned them.
Examples
NameDescriptionBoundsLimits on where the divider can go, the step each key press moves it, and a collapsed pane.CollapsedA pane collapsed to a narrow strip, and the handle that reopens it.ColumnsThree panes side by side, made from two nested splitters.ControlledA divider controlled by your code, which handles the events and sets position and collapsed.EventsMoving the divider, with one event for a new position and one for a pane that collapses or reopens.GripA divider with a visible grip.NestedA splitter inside a pane of another splitter, for an editor layout.PreviewTwo panes and a divider that you move with a pointer or the arrow keys.PreviewTwo panes and a divider that you move with a pointer or the arrow keys.Two Panes Over OneTwo panes side by side above a full-width pane, made from a splitter inside a vertical splitter.VerticalPanes stacked, with the divider between them.