}){kind=logo}
+ 
+ 
+
- ` | |
+| onDidLayoutFromJSON | `Event` | |
+| onDidAddGroup | `Event` | |
+| onDidRemoveGroup | `Event` | |
+| onDidActiveGroupChange | `Event` | |
+| onDidAddPanel | `Event` | |
+| onDidRemovePanel | `Event` | |
+| onDidActivePanelChange | `Event` | |
+| onDidDrop | `EventAuto Resizing |
+| fromJSON | `(data: SerializedDockview): void` | Serialization |
+| toJSON | `(): SerializedDockview` | Serialization |
+| clear | `(): void` | Clears the current layout |
+
+## Dockview Panel API
+
+```tsx
+const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
+ // props.api...
+
+ return ` | |
+| onDidFocusChange | `Event` | |
+| onDidVisibilityChange | `Event` | |
+| onDidActiveChange | `Event` | |
+| setActive | `(): void` | |
+| | | |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
+| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
+| setSize | `(event: SizeEvent): void` | |
+| | | |
+| group | `GroupPanel | undefined` |
+| isGroupActive | `boolean` | |
+| title | `string` | |
+| suppressClosable | `boolean` | |
+| close | `(): void` | |
+| setTitle | `(title: string): void` | |
+
+## Advanced Features
+
+### Locked group
+
+Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
+You can still add groups to a locked panel programatically using the API.
+
+```tsx
+panel.group.locked = true;
+```
+
+### Group header
+
+You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
+
+```tsx
+panel.group.header.hidden = true;
+```
+
+### Context Menu
+
+Since overriding the context menu is a such a common feature rather than defining a custom tab the `ReactDockview` component exposes the prop `onTabContextMenu`.
+You can alternatively define a custom tab component for more granular control.
+
+:::caution
+
+The `onTabContextMenu` is intended to be removed in a future release to further simplify the library.
+In the future you will be required to define a custom tab component to intercept the context menu events.
+
+:::
+
+ }
+>(component: React.FunctionComponent) {
+ const HigherOrderComponent = (props: T) => {
+ const [visible, setVisible] = React.useState(
+ props.api.isVisible
+ );
+
+ React.useEffect(() => {
+ const disposable = props.api.onDidVisibilityChange((event) =>
+ setVisible(event.isVisible)
+ );
+
+ return () => {
+ disposable.dispose();
+ };
+ }, [props.api]);
+
+ if (!visible) {
+ return null;
+ }
+
+ return React.createElement(component, props);
+ };
+ return HigherOrderComponent;
+}
+```
+
+```tsx
+const component = RenderWhenVisible(MyComponent);
+```
+
+Through toggling the checkbox you can see that when you only render those panels which are visible the underling React component is destroyed when it becomes hidden and re-created when it becomes visible.
+
+` | Fires on layout change |
+| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
+| onDidAddPanel | `Event` | Fires when a view is added |
+| onDidRemovePanel | `Event` | Fires when a view is removed |
+| onDidActivePanelChange | `Event` | Fires when the active group changes |
+| | | |
+| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
+| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
+| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
+| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
+| | | |
+| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
+| focus | `(): void` | Focus the active panel, if exists |
+| layout | `(width: number, height:number): void` | Auto Resizing |
+| fromJSON | `(data: SerializedGridview): void` | Serialization |
+| toJSON | `(): SerializedGridview` | Serialization |
+| clear | `(): void` | Clears the current layout |
+
+## Gridview Panel API
+
+```tsx
+const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
+ // props.api...
+
+ return ` | |
+| onDidFocusChange | `Event` | |
+| onDidVisibilityChange | `Event` | |
+| onDidActiveChange | `Event` | |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
+| | | |
+| setVisible | `(isVisible: boolean): void` | |
+| setActive | `(): void` | |
+| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
+| setSize | `(event: SizeEvent): void` | |
+
+## Events
+
+`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur.
+
+` | Fires on layout change |
+| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
+| onDidAddView | `Event` | Fires when a view is added |
+| onDidRemoveView | `Event` | Fires when a view is removed |
+| onDidDrop | `EventDrag and Drop) |
+| | | |
+| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
+| removePanel | `(panel: IPaneviewPanel): void` | |
+| movePanel | `(from: number, to: number): void` | |
+| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
+| | | |
+| focus | `(): void` | Focus the active panel, if exists |
+| layout | `(width: number, height:number): void` | See Auto Resizing |
+| fromJSON | `(data: SerializedPaneview): void` | Serialization |
+| toJSON | `(): SerializedPaneview` | Serialization |
+| clear | `(): void` | Clears the current layout |
+
+## Paneview Panel API
+
+```tsx
+const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
+ // props.api...
+
+ return ` | |
+| onDidFocusChange | `Event` | |
+| onDidVisibilityChange | `Event` | |
+| onDidActiveChange | `Event` | |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | |
+| | |
+| setVisible | `(isVisible: boolean): void` | |
+| setActive | `(): void` | |
+| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
+| setSize | `(event: SizeEvent): void` | |
+
+## Advanced Features
+
+### Custom Header
+
+You can provide a custom component to render an alternative header.
+
+(
+ props.api.isExpanded
+ );
+
+ React.useEffect(() => {
+ const disposable = props.api.onDidExpansionChange((event) => {
+ setExpanded(event.isExpanded);
+ });
+
+ return () => {
+ disposable.dispose();
+ };
+ }, []);
+
+ const onClick = () => {
+ props.api.setExpanded(!expanded);
+ };
+
+ return (
+
+ );
+};
+
+const headerComponents = { myHeaderComponent: MyHeaderComponent };
+```
+
+### Drag And Drop
+
+If you provide the `PaneviewReact` component with the prop `onDidDrop` you will be able to interact with custom drop events.
+
+` | No | | Panel renderers |
+| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
+| proportionalLayout | `boolean` | Yes | `true` | See Proportional layout |
+| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
+| className | `string` | Yes | `''` | Attaches a classname |
+| disableAutoResizing | `boolean` | Yes | `false` | See 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.
+
+```tsx title="Splitview API via Panel component"
+const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
+ // props.containerApi...
+
+ return ` | Fires on layout change |
+| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call |
+| onDidAddView | `Event` | Fires when a view is added |
+| onDidRemoveView | `Event` | Fires when a view is removed |
+| | | |
+| addPanel | `addPanel(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 | `(): void` | Focus the active panel, if exists |
+| layout | `(width: number, height:number): void` | See Auto Resizing |
+| fromJSON | `(data: SerializedSplitview): void` | Serialization |
+| toJSON | `(): SerializedSplitview` | Serialization |
+| clear | `(): void` | Clears the current layout |
+
+## Splitview Panel API
+
+The Splitview panel API is exposed on each panel containing actions and variables specific to that panel.
+
+```tsx title="Splitview panel API via Panel component"
+const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
+ // props.api...
+
+ return ` | Fires when panel dimensions change |
+| onDidFocusChange | `Event` | Fire when panel is focused and blurred |
+| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) |
+| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) |
+| onDidConstraintsChange | `onDidConstraintsChange: Event` | 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.
+
+ = {
+ default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+ return = {
+ customTab: (props: IDockviewPanelHeaderProps) => {
+ return (
+
+
- {/* {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+## API
+
+There are two types of API you will interact with using `dockview`.
+
+- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
+- The `container API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
+
+```tsx
+const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
+ React.useEffect(() => {
+ const disposable = props.api.onDidActiveChange((event) => {
+ console.log(`is panel active: ${event.isActive}`);
+ });
+
+ return () => {
+ disposable.dispose(); // remember to dispose of any subscriptions
+ };
+ }, [props.api]);
+
+ const addAnotherPanel = React.useCallback(() => {
+ props.containerApi.addPanel({
+ id: 'another_id',
+ component: 'anotherComponent',
+ });
+ }, [props.containerApi]);
+
+ return (
+
+ {`My first panel has the title: ${props.params.title}`}
+
+
+ );
+};
+```
+
+### Serialization
+
+All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
+
+## Auto resizing
+
+`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
+Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
+You can disable this by settings the `disableAutoResizing` prop to be `true`.
+
+You can manually resize a component using the API method `layout(width: number, height: number): void`.
+An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
+
+## Events
+
+Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
+You should dispose of any event listeners you create cleaning up any listeners you would have created.
+
+```tsx
+React.useEffect(() => {
+ const disposable = api.onDidFocusChange(() => {
+ // write some code
+ });
+
+ return () => {
+ disposable.dispose();
+ };
+}, []);
+```
+
+## Proportional layout
+
+The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
+Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
+
+
+
+
+You can access the panels associated group through the `panel.group` variable.
+The group will always be defined and will change if a panel is moved into another group.
+
+## DockviewReact Component
+
+You can create a Dockview through the use of the `ReactDockview` component.
+
+```tsx
+import { ReactDockview } from 'dockview';
+```
+
+| Property | Type | Optional | Default | Description |
+| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------------------------ |
+| onReady | (event: SplitviewReadyEvent) => void | No | | |
+| components | object | No | | |
+| tabComponents | object | Yes | | |
+| watermarkComponent | object | Yes | | |
+| hideBorders | boolean | Yes | false | |
+| className | string | Yes | '' | |
+| disableAutoResizing | boolean | Yes | false | See Auto Resizing |
+| onTabContextMenu | Event | Yes | false | |
+| onDidDrop | Event | Yes | false | |
+| showDndOverlay | Event | Yes | false | |
+
+## Dockview API
+
+The Dockview 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.
+
+```tsx title="Dockview API via Panel component"
+const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
+ // props.containerApi...
+
+ return {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Dockview API via the onReady callback"
+const onReady = (event: DockviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumHeight | `number` | |
+| maximumHeight | `number` | |
+| maximumWidth | `number` | |
+| maximumWidth | `number` | |
+| length | `number` | Number of panels |
+| size | `number` | Number of Groups |
+| panels | `IDockviewPanel[]` | |
+| groups | `GroupPanel[]` | |
+| activePanel | `IDockviewPanel \| undefined` | |
+| activeGroup | `IDockviewPanel \| undefined` | |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | --------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| onDidDimensionsChange | `Event
+
+
+### Rendering
+
+Although `DockviewReact` will only add those tabs that are visible to the DOM all associated React Components for each tab including those that
+are not initially visible will be created.
+This will mean that any hooks in those components will run and if you running expensive operations in the tabs you may end up doing a lot of initial
+work for what are hidden tabs.
+
+This is the default behaviour to ensure the greatest flexibility for the user but you can create a Higher-Order component wrapping your components that
+will ensure the component is only created if the tab is visible as below:
+
+```tsx
+import { PanelApi } from 'dockview';
+import * as React from 'react';
+
+function RenderWhenVisible<
+ T extends { api: Pick
+
+
+### Drag And Drop
+
+The component exposes some method to help determine whether external drag events should be interacted with or not.
+
+```tsx
+/**
+ * called when an ondrop event which does not originate from the dockview libray and
+ * passes the showDndOverlay condition occurs
+ **/
+const onDidDrop = (event: DockviewDropEvent) => {
+ const { group } = event;
+
+ event.api.addPanel({
+ id: 'test',
+ component: 'default',
+ position: {
+ referencePanel: group.activePanel.id,
+ direction: 'within',
+ },
+ });
+};
+
+/**
+ * called for drag over events which do not originate from the dockview library
+ * allowing the developer to decide where the overlay should be shown for a
+ * particular drag event
+ **/
+const showDndOverlay = (event: DockviewDndOverlayEvent) => {
+ return true;
+};
+
+return (
+
+
+
+## GridviewReact Component
+
+```tsx
+import { ReactGridview } from 'dockview';
+```
+
+| Property | Type | Optional | Default | Description |
+| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ |
+| onReady | (event: SplitviewReadyEvent) => void | No | | |
+| components | object | No | | |
+| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
+| proportionalLayout | boolean | Yes | true | See Proportional layout |
+| hideBorders | boolean | Yes | false | |
+| className | string | Yes | '' | |
+| disableAutoResizing | boolean | Yes | false | See Auto Resizing |
+
+## Gridview API
+
+```tsx
+const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
+ // props.containerApi...
+
+ return {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx
+const onReady = (event: GridviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumHeight | `number` | |
+| maximumHeight | `number` | |
+| maximumWidth | `number` | |
+| maximumWidth | `number` | |
+| length | `number` | Number of panels |
+| panels | `ISplitviewPanel[]` | all panels |
+| orientation | `Orientation` | |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | | |
+| onDidDimensionsChange | `Event
+
+
+```tsx title="Simple Paneview example"
+import {
+ IPaneviewPanelProps,
+ PaneviewReact,
+ PaneviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: IPaneviewPanelProps<{ title: string }>) => {
+ return (
+
+ {props.params.title}
+
+ );
+ },
+};
+
+SimplePaneview = () => {
+ const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ title: 'Panel 1',
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ title: 'Panel 2',
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ title: 'Panel 3',
+ });
+ };
+
+ return (
+ {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Paneview API via the onReady callback"
+const onReady = (event: GridviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
+| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
+| length | `number` | Number of panels |
+| panels | `IPaneviewPanel[]` | All panels |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | ---------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | |
+| onDidDimensionsChange | `Event
+
+
+You can provide a `headerComponent` option when creating a panel to tell the library to use a custom header component.
+
+```tsx
+const onReady = (event: PaneviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ headerComponent: 'myHeaderComponent',
+ params: {
+ valueA: 'A',
+ },
+ title: 'Panel 1',
+ });
+};
+```
+
+This header must be defined in the collection of components provided to the `headerComponents` props for `ReactPaneivew`
+
+```tsx
+import { IPaneviewPanelProps } from 'dockview';
+
+const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
+ const [expanded, setExpanded] = React.useState
+
+
+```tsx title="Simple Splitview example"
+import {
+ ISplitviewPanelProps,
+ Orientation,
+ SplitviewReact,
+ SplitviewReadyEvent,
+} from 'dockview';
+
+const components = {
+ default: (props: ISplitviewPanelProps<{ title: string }>) => {
+ return {props.params.title}
;
+ },
+};
+
+export const SimpleSplitview = () => {
+ const onReady = (event: SplitviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel_1',
+ component: 'default',
+ params: {
+ title: 'Panel 1',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_2',
+ component: 'default',
+ params: {
+ title: 'Panel 2',
+ },
+ });
+
+ event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ params: {
+ title: 'Panel 3',
+ },
+ });
+ };
+
+ return (
+ {`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+```tsx title="Splitview API via the onReady callback"
+const onReady = (event: SplitviewReadyEvent) => {
+ // event.api...
+};
+```
+
+| Property | Type | Description |
+| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| height | `number` | Component pixel height |
+| width | `number` | Component pixel width |
+| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
+| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
+| length | `number` | Number of panels |
+| panels | `ISplitviewPanel[]` | All panels |
+| | | |
+| onDidLayoutChange | `Event{`My first panel has the title: ${props.params.title}`}
;
+};
+```
+
+| Property | Type | Description |
+| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| id | `string` | Panel id |
+| isFocused | `boolean` | Is panel focsed |
+| isActive | `boolean` | Is panel active |
+| isVisible | `boolean` | Is panel visible |
+| width | `number` | Panel width |
+| height | `number` | Panel height |
+| | | |
+| onDidDimensionsChange | `Event
+
+
+### Visibility
+
+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.
+
+```tsx
+const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
+ //
+});
+```
+
+```tsx
+api.setVisible(true);
+```
+
+### Active
+
+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.
+
+```tsx
+const disposable = props.api.onDidActiveChange(({ isActive }) => {
+ //
+});
+```
+
+```tsx
+api.setActive();
+```
+
+### Contraints
+
+When adding a panel you can specify pixel size contraints
+
+```tsx
+event.api.addPanel({
+ id: 'panel_3',
+ component: 'default',
+ minimumSize: 100,
+ maximumSize: 1000,
+});
+```
+
+These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
+
+```tsx
+props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
+ //
+});
+```
+
+```tsx
+api.setConstraints({
+ maximumSize: 200,
+ minimumSize: 400,
+});
+```
diff --git a/packages/docs/versioned_docs/version-1.4.3/index.mdx b/packages/docs/versioned_docs/version-1.4.3/index.mdx
new file mode 100644
index 000000000..5f680279d
--- /dev/null
+++ b/packages/docs/versioned_docs/version-1.4.3/index.mdx
@@ -0,0 +1,150 @@
+---
+sidebar_position: 0
+---
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { SimplePaneview } from '@site/src/components/simplePaneview';
+import { SimpleDockview } from '@site/src/components/simpleDockview';
+
+# Dockview
+
+## Introduction
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Features
+
+- Themable and customizable
+- Support for the serialization and deserialization of layouts
+- Drag and drop support
+
+## Quick start
+
+`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
+
+```shell
+npm install dockview
+```
+
+You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
+depending on your solution this might be:
+
+```css
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+A dark and light theme are provided, one of these classes (or a custom theme) must be attached at any point above your components in the HTML tree. To cover the entire web page you might attach the class to the `body` component:
+
+```html
+
+ ...
+
+
+ ...
+
+```
+
+There are 4 components you may want to use:
+
+Splitview
+
+
+
+
+
+
+
+
+
+
+
+
+
+```tsx
+import {
+ DockviewReact,
+ DockviewReadyEvent,
+ PanelCollection,
+ IDockviewPanelProps,
+ IDockviewPanelHeaderProps,
+} from 'dockview';
+
+const components: PanelCollection{props.params.someProps}
;
+ },
+};
+
+const headers: PanelCollection
+ {props.api.title}
+ props.api.close()}>{'[x]'}
+
+ );
+ },
+};
+
+const Component = () => {
+ const onReady = (event: DockviewReadyEvent) => {
+ event.api.addPanel({
+ id: 'panel1',
+ component: 'default',
+ tabComponent: 'customTab', // optional custom header
+ params: {
+ someProps: 'Hello',
+ },
+ });
+ event.api.addPanel({
+ id: 'panel2',
+ component: 'default',
+ params: {
+ someProps: 'World',
+ },
+ position: { referencePanel: 'panel1', direction: 'below' },
+ });
+ };
+
+ return (
+
+
diff --git a/packages/docs/versioned_sidebars/version-1.4.3-sidebars.json b/packages/docs/versioned_sidebars/version-1.4.3-sidebars.json
new file mode 100644
index 000000000..caea0c03b
--- /dev/null
+++ b/packages/docs/versioned_sidebars/version-1.4.3-sidebars.json
@@ -0,0 +1,8 @@
+{
+ "tutorialSidebar": [
+ {
+ "type": "autogenerated",
+ "dirName": "."
+ }
+ ]
+}
diff --git a/packages/docs/versions.json b/packages/docs/versions.json
new file mode 100644
index 000000000..89b30e174
--- /dev/null
+++ b/packages/docs/versions.json
@@ -0,0 +1,3 @@
+[
+ "1.4.3"
+]