FlexilyPure JavaScript Flexbox Layout

Quick Start ​

npm install flexily

bun add flexily

pnpm add flexily

yarn add flexily

import { createFlexily, FLEX_DIRECTION_ROW } from "flexily"

const flex = createFlexily()

const root = flex.createNode()
root.setWidth(100)
root.setFlexDirection(FLEX_DIRECTION_ROW)

const child = flex.createNode()
child.setFlexGrow(1)
root.insertChild(child, 0)

flex.calculateLayout(root, 100, 100)
console.log(child.getComputedWidth()) // 100

Custom Composition ​

Build your own Flexily instance with only the plugins you need:

import { createBareFlexily, pipe, withTestMeasurer } from "flexily"

const flex = pipe(createBareFlexily(), withTestMeasurer())

Available plugins: withMonospaceMeasurer() (terminal), withTestMeasurer() (deterministic), withPretextMeasurer() (proportional fonts via Pretext).

Low-Level API ​

For direct Yoga-compatible usage without the composable engine:

import { Node, FLEX_DIRECTION_ROW, DIRECTION_LTR } from "flexily"

const root = Node.create()
root.setWidth(100)
root.setFlexDirection(FLEX_DIRECTION_ROW)

const child = Node.create()
child.setFlexGrow(1)
root.insertChild(child, 0)

root.calculateLayout(100, 100, DIRECTION_LTR)
console.log(child.getComputedWidth()) // 100

Who Should Use Flexily ​

Most developers should use a framework built on Flexily, not Flexily directly. Flexily is for:

• Framework authors building a TUI or layout framework that needs a JS layout engine
• Canvas/game developers who need flexbox for non-DOM rendering
• Specialized tools where you need direct control over layout computation
• Anyone replacing Yoga who wants a drop-in pure-JS alternative

Building a terminal UI? Use Silvery, which uses Flexily by default. You get React components, hooks, and layout feedback without touching the low-level API.