TaffyJS

Appearance

TaffyJSA fast, Rust-based layout engine for JavaScript

Get started
GitHub

  • Native performance

    @taffyjs/node runs Taffy as native Rust through Node-API. Tree operations update native state directly instead of maintaining a JavaScript copy.

  • WebAssembly support

    @taffyjs/wasm runs the same JavaScript API in Node.js and bundled browsers when a native addon is not the right fit.

  • Yoga compatibility

    Use @taffyjs/yoga or @taffyjs/yoga-wasm while preserving Yoga's API shape for a straightforward migration to TaffyJS.

From code to layout

Build a tree, compute it, and read back rectangles. This example runs through @taffyjs/wasm in your browser; use @taffyjs/node with the same API in Node.js.

js
import { Dimension, Display, FlexDirection, TaffyTree } from "@taffyjs/wasm";

export function computeHomeLayout({
  availableWidth,
  sidebarWidth,
  headerHeight,
  horizontalGap,
  verticalGap,
}) {
  const tree = new TaffyTree();

  const sidebar = tree.newLeaf({ size: { width: sidebarWidth } });
  const header = tree.newLeaf({ size: { height: headerHeight } });
  const content = tree.newLeaf({ flexGrow: 1 });

  const main = tree.newWithChildren(
    {
      display: Display.Flex,
      flexDirection: FlexDirection.Column,
      flexGrow: 1,
      gap: { height: verticalGap },
    },
    [header, content],
  );

  const root = tree.newWithChildren(
    {
      display: Display.Flex,
      gap: { width: horizontalGap },
      size: { width: Dimension.Percent(100), height: 220 },
    },
    [sidebar, main],
  );

  tree.computeLayout({
    root,
    availableSpace: { width: availableWidth, height: 220 },
  });

  return {
    root: tree.getLayout(root),
    sidebar: tree.getLayout(sidebar),
    main: tree.getLayout(main),
    header: tree.getLayout(header),
    content: tree.getLayout(content),
  };
}

Loading @taffyjs/wasm…