Resizable

Two panes on a draggable hairline. Arrow keys work; state lives in ARIA.

Left pane

Right pane

Install

npx raster add resizable

Markup

<div class="rs-split"><div class="rs-split-pane" style="width:50%">Left</div><button class="rs-split-handle" role="separator" aria-valuenow="50"></button><div class="rs-split-pane" style="width:50%">Right</div></div>

React

import { Split } from "@/components/raster/resizable";

<Split initial={60} min={30} max={80}>
  <Editor />
  <Preview />
</Split>

Classes

.rs-split.rs-split-pane.rs-split-handle