Resizable

Paid

Split panes with a focusable separator carrying aria-valuenow, so the layout is adjustable by arrow keys and not only by dragging.

Split panes

Sidebar

Drag the divider, or focus it and use the arrow keys.

Content

This pane takes the remaining space.

Editor
Preview

Three panes

Files

Left pane.

Editor

Drag either divider, or focus one and use the arrow keys.

Preview

Right pane.

Vertical split

1 import { Button } from "@/components/letrix/button";
2
3 export function Save() {
4   return <Button>Save changes</Button>;
5 }
✓ compiled in 214ms
✓ 3 components written
→ waiting for changes…

Editor takes 60% · drag the divider, or focus it and use the arrow keys.