Skip to main content

Reactive Size

An example of how to reactively set the size of the panes.

Panel Min: Infinity
Left
Right
View Example Code

Anatomy

Here's the high-level structure of the example above:

		<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 
	let innerWidth = $state(0);
	let panelMin = $derived(Math.ceil((300 / innerWidth) * 100));
</script>
 
<svelte:window bind:innerWidth />
<PaneGroup direction="horizontal">
	<Pane defaultSize={panelMin} minSize={panelMin}>Left</Pane>
	<PaneResizer />
	<Pane>Right</Pane>
</PaneGroup>