Skip to main content
Version: 1.7.6



A Splitview is a collection of resizable horizontally or vertically stacked panels.

Simple Splitview example
import {
} from 'dockview';

const components = {
default: (props: ISplitviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;

export const SimpleSplitview = () => {
const onReady = (event: SplitviewReadyEvent) => {
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',

id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',

id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',

return (

SplitviewReact Component

You can create a Splitview through the use of the ReactSplitview component.

import { ReactSplitview } from 'dockview';

Using the onReady prop you can access to the component api and add panels either through deserialization or the individual addition of panels.

onReady(event: SplitviewReadyEvent) => voidNoFunction
componentsRecord<string, ISplitviewPanelProps>NoPanel renderers
orientationOrientationYesOrientation.HORIZONTALOrientation of the Splitview
proportionalLayoutbooleanYestrueSee Proportional layout
hideBordersbooleanYesfalseHide the borders between panels
classNamestringYes''Attaches a classname
disableAutoResizingbooleanYesfalseSee Auto Resizing

Splitview API

The Splitview API is exposed both at the onReady event and on each panel through props.containerApi. Through this API you can control general features of the component and access all added panels.

Splitview API via Panel component
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
// props.containerApi...

return <div>{`My first panel has the title: ${props.params.title}`}</div>;
Splitview API via the onReady callback
const onReady = (event: SplitviewReadyEvent) => {
// event.api...
heightnumberComponent pixel height
widthnumberComponent pixel width
minimumSizenumberThe sum of the minimumSize property for each panel
maximumSizenumberThe sum of the maximumSize property for each panel
lengthnumberNumber of panels
panelsISplitviewPanel[]All panels
onDidLayoutChangeEvent<void>Fires on layout change
onDidLayoutFromJSONEvent<void>Fires of layout change caused by a fromJSON deserialization call
onDidAddViewEvent<IView>Fires when a view is added
onDidRemoveViewEvent<IView>Fires when a view is removed
addPaneladdPanel(options: AddSplitviewComponentOptions): ISplitviewPanel
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void
getPanel(id:string): ISplitviewPanel \| undefined
movePanel(from: number, to: number): void
updateOptions(options: SplitviewComponentUpdateOptions): void
focus(): voidFocus the active panel, if exists
layout(width: number, height:number): voidSee Auto Resizing
fromJSON(data: SerializedSplitview): voidSerialization
toJSON(): SerializedSplitviewSerialization
clear(): voidClears the current layout

Splitview Panel API

The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.

Splitview panel API via Panel component
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
// props.api...

return <div>{`My first panel has the title: ${props.params.title}`}</div>;
idstringPanel id
isFocusedbooleanIs panel focsed
isActivebooleanIs panel active
isVisiblebooleanIs panel visible
widthnumberPanel width
heightnumberPanel height
onDidDimensionsChangeEvent<PanelDimensionChangeEvent>Fires when panel dimensions change
onDidFocusChangeEvent<FocusEvent>Fire when panel is focused and blurred
onDidVisibilityChangeEvent<VisibilityEvent>Fires when the panels visiblity property is changed (see Panel Visibility)
onDidActiveChangeEvent<ActiveEvent>Fires when the panels active property is changed (see Active Panel)
onDidConstraintsChangeonDidConstraintsChange: Event<PanelConstraintChangeEvent>Fires when the panels size contrainsts change (see Panel Constraints)
setVisible(isVisible: boolean): void
setActive(): void
setConstraints(value: PanelConstraintChangeEvent2): void;
setSize(event: PanelSizeEvent): void

Advanced Features

Listed below are some functionalities avalaible through both the panel and component APIs. The live demo shows examples of these in real-time.


A panels visibility can be controlled and monitored through the following code. A panel with visibility set to false will remain as a part of the components list of panels but will not be rendered.

const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {


Only one panel in the splitview can be the active panel at any one time. Setting a panel as active will set all the others as inactive. A focused panel is always the active panel but an active panel is not always focused.

const disposable = props.api.onDidActiveChange(({ isActive }) => {


When adding a panel you can specify pixel size contraints

id: 'panel_3',
component: 'default',
minimumSize: 100,
maximumSize: 1000,

These contraints can be updated throughout the lifecycle of the splitview using the panel API

props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
maximumSize: 200,
minimumSize: 400,