Yoga alone vs Textura

Get Started

// Install
npm install textura

// Use
import { init, computeLayout } from 'textura'

await init()  // load Yoga WASM (once)

const tree = {
  width: 400, flexDirection: 'column', padding: 16, gap: 8,
  children: [
    { text: 'Hello Textura', font: '700 24px Inter', lineHeight: 32 },
    { text: 'Pixel-perfect layout without the DOM.', font: '16px Inter', lineHeight: 24 },
  ],
}

const layout = computeLayout(tree, { width: 400 })
// → { x, y, width, height, children: [{ x, y, width, height, text }, ...] }

MCP Server — AI Layout Analysis

Give your AI coding agent layout vision. Detect text overflow, element overlap, small touch targets, and auto-fix issues — works with any framework.

# Claude Code — one command:
claude mcp add textura npx @razroo/textura-mcp

# Or add to .mcp.json / Codex / Cursor / VS Code:
{
  "mcpServers": {
    "textura": {
      "command": "npx",
      "args": ["-y", "@razroo/textura-mcp"]
    }
  }
}

Tools: compute_layout · analyze_layout · validate_responsive · fix_layout