Playground
Real code, run by the real engine as you type — with type checking, completions, and hover docs against the library's own declarations. renderPlayground(root)lays the tree out against the preview viewport and draws it; everything else is exactly what you would write in your own project. Code runs only in your browser. Start from an example below and edit it, or drag the viewport's right edge to see the layout reflow. See the docs for the full style vocabulary.
Header, footer, fluid centre, two fixed side columns — the classic page. Drag the viewport: only the centre moves.
import { LayoutNode } from 'bento-layout';
const header = LayoutNode.make({ height: 48 });
const nav = LayoutNode.make({ width: 140 });
const main = LayoutNode.make({ flexGrow: 1, minWidth: 0 });
const aside = LayoutNode.make({ width: 110 });
const footer = LayoutNode.make({ height: 36 });
const body = LayoutNode.make(
{ flexGrow: 1, columnGap: 12 },
[nav, main, aside],
);
const page = LayoutNode.make(
{
flexDirection: 'column',
width: '100%',
height: 380,
padding: 12,
rowGap: 12,
},
[header, body, footer],
);
renderPlayground(page);