hcg-split-pane - Live Demo

Interactive demos of hcg-split-pane, a lightweight zero-dependency JavaScript library for resizable split layouts. Every option is shown below: direction, panes, sizes, sizeUnit, minSize, maxSize, gutterSize, disabled, data-hcg-* attributes, option() / setOption(), lifecycle callbacks, and instance methods. Version . Full documentation - hcg-split-pane

1. Horizontal split

Default 50/50 layout. Drag the vertical gutter or toggle direction at runtime.

Try it
Left panel

Scrollable content area. Drag the gutter to resize.

Right panel

Both panes share the container width minus the gutter.

split.setOption('direction', 'vertical');
View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-h">
    <div>Left panel</div>
    <div>Right panel</div>
  </div>
</div>

<!-- JavaScript -->
<script>
const split = new HcgSplitPane('#split-h', {
  direction: 'horizontal',
  sizes: [50, 50],
  minSize: 0
});

split.setOption('direction', 'vertical');
</script>

2. Vertical split

direction: 'vertical' with sizes: [40, 60].

Try it
Top panel

Editor or toolbar area.

Bottom panel

Terminal, preview, or output area.

View usage code 
<!-- HTML -->
<div style="height: 360px">
  <div id="split-v">
    <div>Top panel</div>
    <div>Bottom panel</div>
  </div>
</div>

<!-- JavaScript -->
<script>
new HcgSplitPane('#split-v', {
  direction: 'vertical',
  sizes: [40, 60],
  minSize: 0
});
</script>

3. Nested split

IDE-style layout: sidebar on the left, editor and preview stacked on the right. Two instances, two axes.

Try it
Sidebar

File tree or navigation.

Editor

Top half of the right area.

Preview

Bottom half - live output.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-nested-outer">
    <div>Sidebar</div>
    <div style="height: 100%; min-height: 0">
      <div id="split-nested-inner" style="height: 100%">
        <div>Editor</div>
        <div>Preview</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
const outer = new HcgSplitPane('#split-nested-outer', {
  direction: 'horizontal',
  sizes: [30, 70],
  minSize: [150, 200]
});

const inner = new HcgSplitPane('#split-nested-inner', {
  direction: 'vertical',
  sizes: [55, 45],
  minSize: [60, 60]
});
</script>

4. Three columns

One instance, three panes - sizes: [20, 55, 25], minSize: [120, 200, 150].

Try it
Sidebar

Navigation.

Editor

Main content.

Panel

Inspector.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-3col">
    <div>Sidebar</div>
    <div>Editor</div>
    <div>Panel</div>
  </div>
</div>

<!-- JavaScript -->
<script>
new HcgSplitPane('#split-3col', {
  direction: 'horizontal',
  sizes: [20, 55, 25],
  minSize: [120, 200, 150]
});
</script>

5. Three rows

Same API with direction: 'vertical' - toolbar, editor, terminal.

Try it
Toolbar

Menus and tabs.

Editor

Primary editing area.

Terminal

Console output.

View usage code 
<!-- HTML -->
<div style="height: 360px">
  <div id="split-3row">
    <div>Toolbar</div>
    <div>Editor</div>
    <div>Terminal</div>
  </div>
</div>

<!-- JavaScript -->
<script>
new HcgSplitPane('#split-3row', {
  direction: 'vertical',
  sizes: [15, 60, 25],
  minSize: [48, 120, 80]
});
</script>

6. minSize and maxSize

Per-pane limits in pixels. Sidebar needs at least 200px; main at least 100px.

Try it
Sidebar (min 200px)

Cannot shrink below 200px.

Main (min 100px)

Starts at 70% but respects minimum.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-asym">
    <div>Sidebar</div>
    <div>Main</div>
  </div>
</div>

<!-- JavaScript -->

<script>
new HcgSplitPane('#split-asym', {
  direction: 'horizontal',
  sizes: [30, 70],
  minSize: [200, 100]
});
</script>

7. Pixel sizes

sizeUnit: 'pixel', sidebar capped at 240px. getSizes() returns pixels.

Try it

Sizes: -

Sidebar (max 240px)

Fixed-style sidebar.

Main

Fills remaining space.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-px">
    <div>Sidebar</div>
    <div>Main</div>
  </div>
</div>

<!-- JavaScript -->
<script>
const split = new HcgSplitPane('#split-px', {
  direction: 'horizontal',
  sizeUnit: 'pixel',
  sizes: [180, 360],
  minSize: [120, 160],
  maxSize: [240, Infinity]
});

split.getSizes(); // => [180, 412] (px, rounded)
</script>

8. Data attributes

Add data-hcg-split-pane and option attributes in HTML, then call HcgSplitPane.init() when the DOM is ready.

Try it
Left

data-hcg-*

Right

Initialized via init()

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div
    data-hcg-split-pane
    data-hcg-direction="horizontal"
    data-hcg-sizes="35,65"
    data-hcg-min-size="120,160">
    <div>Left</div>
    <div>Right</div>
  </div>
</div>

<!-- JavaScript -->
<script>
HcgSplitPane.init();
</script>

9. setSizes() and getSizes()

Set or read pane sizes programmatically. Drag end writes data-hcg-sizes on the container.

Try it

Sizes: 35 / 65

Left

Programmatic API.

Right

setSizes / getSizes.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="main-box">
    <div>Left</div>
    <div>Right</div>
  </div>
</div>

<!-- JavaScript -->
<script>
const split = new HcgSplitPane('#main-box', {
  sizes: [35, 65],
  minSize: [120, 200]
});

split.setSizes([50, 50]);
const sizes = split.getSizes();
</script>

10. disable() and enable()

Turn gutter dragging off without destroying the instance.

Try it

Dragging: enabled

Left

Toggle me

Right

disable / enable

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-toggle">
    <div>Left</div>
    <div>Right</div>
  </div>
</div>

<!-- JavaScript -->
<script>
const split = new HcgSplitPane('#split-toggle');

split.disable();
split.enable();
split.destroy();
</script>

11. Toggle inner split

Create and destroy a nested split with the panes option and destroy().

Try it
Left

Outer split.

preview

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="inner-outer">
    <div>Left</div>
    <div style="height: 100%; min-height: 0">
      <div id="preview-box">
        <div id="preview">preview</div>
        <div id="console" hidden>console</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
new HcgSplitPane('#inner-outer', { sizes: [50, 50] });

let inner = null;

document.getElementById('toggle').addEventListener('click', () => {
  if (inner) {
    inner.destroy();
    inner = null;
    return;
  }
  inner = new HcgSplitPane('#preview-box', {
    direction: 'vertical',
    panes: ['#preview', '#console'],
    sizes: [55, 45]
  });
});
</script>

12. Dynamic add/remove panes

Append DOM nodes, then destroy() and create a new instance with an updated panes list.

Try it

Panes: 2

Pane A

Always present.

Pane B

Always present.

View usage code 
<!-- HTML -->
<div style="height: 280px">
  <div id="split-dynamic">
    <div id="dyn-a">Pane A</div>
    <div id="dyn-b">Pane B</div>
    <div id="dyn-c" hidden>Pane C</div>
  </div>
</div>

<!-- JavaScript -->
<script>
let split = new HcgSplitPane('#split-dynamic', {
  panes: ['#dyn-a', '#dyn-b'],
  sizes: [50, 50]
});

// After showing #dyn-c:
split.destroy();
split = new HcgSplitPane('#split-dynamic', {
  panes: ['#dyn-a', '#dyn-b', '#dyn-c'],
  sizes: [25, 50, 25]
});
</script>

Event log

Lifecycle callbacks from every demo above are logged here in real time.

Callbacks