PaneForge provides components that make it easy to create resizable panes in your Svelte apps. It's designed to be simple to use, and to work well with other Svelte components and libraries. This project has taken a lot of inspiration and code from the work done by Bryan Vaughn and react-resizable-panels and seeks to provide a similar experience for Svelte developers.
npm install paneforge
Here's a simple example of how to use Paneforge to create a horizontal pane group with two panes:
<script lang="ts">
import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>
<PaneGroup direction="horizontal">
<Pane defaultSize={50}>Pane 1</Pane>
<PaneResizer />
<Pane defaultSize={50}>Pane 2</Pane>
</PaneGroup>
The PaneGroup
component is used to initialize a pane group, and the Pane
component is used to create a pane. The PaneResizer
component is used to create a resizer that can be dragged to resize the panes.
The components ship only with the styles necessary to position the panes in the appropriate layout. The rest of the styling is up to you.
For more information, see the Documentation.
This project is supported by the following beautiful people/organizations:
Published under the MIT license.
Made by @huntabyte and community 💛
Join the Discord server to ask questions, find collaborators, or just say hi!