Docs
Layout & Content
Layout Splitter

Tailwind CSS Layout Splitter

Build resizable panel layouts with Tailwind CSS Layout Splitter examples for horizontal, vertical, mixed, and constrained layouts.

Requires JS

This page requires our Layout Splitter plugin. You can skip this step if you're already using Preline UI as a package.

Learn more

Horizontal direction

A basic horizontal splitter with draggable panels.

Vertical direction

A vertical splitter with draggable panels. Drag the handles to resize each section.

<div data-hs-layout-splitter='{
                            "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-white border border-gray-200 text-gray-400 rounded-md cursor-row-resize hover:bg-gray-100 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-600 dark:hover:bg-neutral-900\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                            "verticalSplitterClasses": "relative flex border-t border-line-2"
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>

Mixed directions

Combine horizontal and vertical splitters in the same resizable layout.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5"><div data-hs-layout-splitter='{
                            "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                            "horizontalSplitterClasses": "relative flex border-s border-line-2",
                            "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                            "verticalSplitterClasses": "relative flex border-t border-line-2"
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-layout-splitter='{
                            "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                            "horizontalSplitterClasses": "relative flex border-s border-line-2",
                            "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                            "verticalSplitterClasses": "relative flex border-t border-line-2"
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>

Manually added splitters

Add splitter controls manually when you need full control over handle placement.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5"><div data-hs-layout-splitter='{
                            "isSplittersAddedManually": true
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                                <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                    <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                    </span>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                    <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                    </span>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                                <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-layout-splitter='{
                            "isSplittersAddedManually": true
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                                <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                    <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                    </span>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="hs-layout-splitter-control relative flex border-s border-line-2">
                                    <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
                                    </span>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="hs-layout-splitter-control relative flex border-t border-line-2">
                                <span class="absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover">
                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/></svg>
                                </span>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>

Minimum sizes

Set minimum panel sizes to keep sections usable while resizing.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-5"><div id="hs-layout-splitter-limit-size" data-hs-layout-splitter='{
                            "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                            "horizontalSplitterClasses": "relative flex border-s border-line-2",
                            "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                            "verticalSplitterClasses": "relative flex border-t border-line-2"
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 30.0,
                                "minSize": 10.0
                              }' style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 50.0,
                                "minSize": 10.0
                              }' style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full hs-prev-limit-reached:bg-surface-1" data-hs-layout-splitter-item='{
                                    "dynamicSize": 48.2,
                                    "minSize": 5.0
                                  }' style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                    "dynamicSize": 30.0,
                                    "minSize": 10.0
                                  }' style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                    "dynamicSize": 21.8,
                                    "minSize": 10.0
                                  }' style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 20.0,
                                "minSize": 5.0
                              }' style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div id="hs-layout-splitter-limit-size" data-hs-layout-splitter='{
                            "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                            "horizontalSplitterClasses": "relative flex border-s border-line-2",
                            "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-row-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                            "verticalSplitterClasses": "relative flex border-t border-line-2"
                          }'>
                            <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 30.0,
                                "minSize": 10.0
                              }' style="flex: 30 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 50.0,
                                "minSize": 10.0
                              }' style="flex: 50 1 0px;">
                                <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                  <div class="overflow-hidden h-full hs-prev-limit-reached:bg-surface-1" data-hs-layout-splitter-item='{
                                    "dynamicSize": 48.2,
                                    "minSize": 5.0
                                  }' style="flex: 48.2 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                    "dynamicSize": 30.0,
                                    "minSize": 10.0
                                  }' style="flex: 30 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                  </div>
                                  <div class="overflow-hidden h-full" data-hs-layout-splitter-item='{
                                    "dynamicSize": 21.8,
                                    "minSize": 10.0
                                  }' style="flex: 21.8 1 0px;">
                                    <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                  </div>
                                </div>
                              </div>
                              <div class="overflow-hidden" data-hs-layout-splitter-item='{
                                "dynamicSize": 20.0,
                                "minSize": 5.0
                              }' style="flex: 20 1 0px;">
                                <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                              </div>
                            </div>
                          </div>

Destroy and Reinitialize

Use the destroy method to remove a layout splitter instance, then call HSLayoutSplitter.autoInit() to initialize it again.

<div class="flex flex-wrap gap-2 mt-4">
                          <button type="button" id="hs-destroy-layout-splitter" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                            Destroy layout splitter
                          </button>
                          <button type="button" id="hs-auto-init-layout-splitter" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                            Reinitialize layout splitter
                          </button>
                        </div>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function() {
                                  const layoutSplitter = document.querySelector('#hs-layout-splitter-to-destroy');
                                  const destroy = document.querySelector('#hs-destroy-layout-splitter');
                                  const autoInit = document.querySelector('#hs-auto-init-layout-splitter');

destroy.addEventListener('click', () => {
                                    const {element} = HSLayoutSplitter.getInstance(layoutSplitter, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                    autoInit.removeAttribute('disabled');
                                  });

autoInit.addEventListener('click', () => {
                                    HSLayoutSplitter.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                    destroy.removeAttribute('disabled');
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div id="hs-layout-splitter-to-destroy" data-hs-layout-splitter='{
                          "horizontalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/></svg></span></div>",
                          "horizontalSplitterClasses": "relative flex border-s border-line-2",
                          "verticalSplitterTemplate": "<div><span class=\"absolute top-1/2 inset-s-1/2 -translate-x-1/2 -translate-y-1/2 block w-6 h-4 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-muted-hover\"><svg class=\"shrink-0 size-3.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"9\" r=\"1\"/><circle cx=\"19\" cy=\"9\" r=\"1\"/><circle cx=\"5\" cy=\"9\" r=\"1\"/><circle cx=\"12\" cy=\"15\" r=\"1\"/><circle cx=\"19\" cy=\"15\" r=\"1\"/><circle cx=\"5\" cy=\"15\" r=\"1\"/></svg></span></div>",
                          "verticalSplitterClasses": "relative flex border-t border-line-2"
                        }'>
                          <div class="flex flex-col border border-line-2 rounded-lg h-150" data-hs-layout-splitter-vertical-group>
                            <div class="overflow-hidden" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                              <div class="flex items-center justify-center h-full p-3 text-foreground">Top</div>
                            </div>
                            <div class="overflow-hidden" data-hs-layout-splitter-item="50.0" style="flex: 50 1 0px;">
                              <div class="flex h-full" data-hs-layout-splitter-horizontal-group>
                                <div class="overflow-hidden h-full" data-hs-layout-splitter-item="48.2" style="flex: 48.2 1 0px;">
                                  <div class="flex items-center justify-center h-full p-3 text-foreground">Left</div>
                                </div>
                                <div class="overflow-hidden h-full" data-hs-layout-splitter-item="30.0" style="flex: 30 1 0px;">
                                  <div class="flex items-center justify-center h-full p-3 text-foreground">Center</div>
                                </div>
                                <div class="overflow-hidden h-full" data-hs-layout-splitter-item="21.8" style="flex: 21.8 1 0px;">
                                  <div class="flex items-center justify-center h-full p-3 text-foreground">Right</div>
                                </div>
                              </div>
                            </div>
                            <div class="overflow-hidden" data-hs-layout-splitter-item="20.0" style="flex: 20 1 0px;">
                              <div class="flex items-center justify-center h-full p-3 text-foreground">Bottom</div>
                            </div>
                          </div>
                        </div>

destroy.addEventListener('click', () => {
                                const {element} = HSLayoutSplitter.getInstance(layoutSplitter, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSLayoutSplitter.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>