Live Pane

A client-side, dependency-free, set hooks and components to easily create resizable panels in your Phoenix applications.

This project has taken a lot of inspiration and code from the work done by paneforge and react-resizable-panels.

Installation

Add live_pane to your list of dependencies in mix.exs:

def deps do
  [
    {:live_pane, "~> 0.6.3"}
  ]
end

Then open up your app.js and import/setup the hooks.

If you have a package.json file at the top of assets, you can add this to it:

"dependencies": {
  "live_pane": "file:../deps/live_pane",
},

And then import the module:

import { createLivePaneHooks } from 'live_pane';

Or you can import the file directly:

// this path would be relative to where your app.js happens to be.
import { createLivePaneHooks } from '../deps/live_pane'

Finally setup the hooks in your app.js file:

const { groupHook, paneHook, resizerHook } = createLivePaneHooks()

let Hooks = {}
Hooks.live_pane_group = groupHook;
Hooks.live_pane = paneHook;
Hooks.live_pane_resizer = resizerHook;

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  ...
})

Also add '../deps/live_pane/lib/**/*.*ex' to your list of paths Tailwind will look for class names, in your tailwind.config.js:

// assets/tailwind.config.js

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/your_app_web.ex',
    '../lib/your_app_web/**/*.*ex',
    '../deps/live_pane/lib/**/*.*ex', <-- add this line with the correct path
  ]
}

Usage

Now you can use the Group, Pane and Resizer components in your LiveView templates.

<LivePane.group id="demo" class="h-[450px]">
  <LivePane.pane group_id="demo" id="demo_pane_1" class="h-full flex items-center justify-center">
    One
  </LivePane.pane>

  <LivePane.resizer
    id="demo-resizer"
    group_id="demo"
    class="flex h-full w-2 items-center justify-center"
  >
    <div class="size-4 rounded-sm border bg-brand"></div>
  </LivePane.resizer>
  <LivePane.pane group_id="demo" id="demo_pane_2" class="h-full flex items-center justify-center">
    Two
  </LivePane.pane>
</LivePane.group>

Just make sure to set an id for the group and then use the same id in each pane and resizer for the group_id attribute, so they can be linked together.