@jsxui/layout

Manage complex layouts performantly using simple constructs.

Install

yarn add @jsxui/layout
npm install @jsxui/layout

Get Started

• Grid
• Column
• Row
• Space

Grid

import { Column, Grid, Node } from '@jsxui/layout'

const grid = new Grid({
  columns: 12,
  rows: 12,
  children: [
    new Column({
      width: 6,
      height: 12,
      children: [new Node({ width: 3, height: 1 })],
    }),
  ],
})

Column

import { Column, Node } from '@jsxui/layout'

const column = new Column({
  children: [
    new Node({ width: 2, height: 2 }),
    new Node({ width: 4, height: 2 }),
  ],
})

column.addChild(new Node({ width: 6, height: 2 }))

Row

import { Node, Row } from '@jsxui/layout'

const row = new Row({
  children: [
    new Node({ width: 2, height: 2 }),
    new Node({ width: 2, height: 2 }),
  ],
})

Space

import { Grid, Node, Space } from '@jsxui/layout'

const grid = new Grid({ columns: 12, rows: 1 })
const space = new Space()

grid.addChild(new Node({ width: 2, height: 1 }))
grid.addChild(space)
grid.addChild(new Node({ width: 2, height: 1 }))

Why?

Building performant layouts at scale is extremely hard. It's easy to introduce performance regressions, layout thrashing, and taking a toll on your overall application's performance. This package helps avoid these problems by providing a simple API to manage complex layouts. It does so by using strict grid principles developed by early graphic designers while utilizing novel techniques like collapsing nodes into one position.

Collapsing Layouts

Collapsing layout is the process of removing unnecessary nodes from the tree that are not required to position a node correctly.

For example, the following layout will collapse to a simple placement in the parent grid:

import { Column, Grid, Row, Node, Space } from '@jsxui/layout'

const node1 = new Node({ width: 2, height: 1 })
const node2 = new Node({ width: 2, height: 1 })
const space = new Space({ size: 2 })
const column = new Column({ children: [node1, space, node2] })
const grid = new Grid({ columns: 16, rows: 24 })

node2.getLayout() // { column: 1, row: 4, width: 2, height: 1 }

This encourages declarative layout by not penalizing the user for using nested layouts. In the future, a compiler can do these optimizations ahead of time where possible.