Split Layout

A resizable two-pane layout for workspaces, inspectors, and previews.

Split Layout pairs a primary work area with a resizable complementary panel, suitable for inspectors, preview panes, editors, and dense operational interfaces.

Variants and behaviour

Choose horizontal or vertical direction and bind size when the application needs to persist a user’s preferred pane dimension.

Customization

Provide the aside as a snippet and compose any components inside either panel. The resize interaction is delegated to the library’s Resizable component for consistent keyboard and pointer behavior.

Examples

Installation

Install Fractalsvelte, then import the block from the dedicated blocks entry point.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { SplitLayout } from 'fractalsvelte/blocks';
</script>

Usage

<script lang="ts">
	import { SplitLayout } from 'fractalsvelte/blocks';
</script>

<SplitLayout aside={inspector}>
	<main>Workspace</main>
</SplitLayout>

Props

Prop	Type	Default	Description
`aside`	`Snippet`	`-`	Content for the secondary pane.
`size`	`number`	`32`	Initial secondary-pane percentage.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Pane arrangement.

Source

Block source is published with the package and can be inspected here.

SplitLayout.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import Resizable from '../components/resizable/Resizable.svelte';
	interface Props { aside: Snippet; size?: number; direction?: 'horizontal' | 'vertical'; children: Snippet; }
	let { aside, size = $bindable(32), direction = 'horizontal', children }: Props = $props();
</script>
<div class="split-layout"><Resizable {direction} bind:size>
	{#snippet first()}{@render aside()}{/snippet}
	{#snippet second()}{@render children()}{/snippet}
</Resizable></div>
<style lang="sass">
	.split-layout
		transition: opacity 200ms ease
	@media (prefers-reduced-motion: reduce)
		.split-layout
			transition: none
</style>