🥮 mooncakes.io
    Sign in

    crater-js

    JavaScript bindings and compatibility facade for crater

    Download zip
    Author
    Version
    0.19.0
    License
    Apache-2.0
    Repository
    Last updated
    3 months ago
    Downloads
    1K

    #@mizchi/crater

    CSS Layout Engine - Box/Flex/Grid layout computation, compiled from MoonBit.

    Taffy-compatible test pass rate: 83% (212/256 Grid tests)

    #Installation

    npm install @mizchi/crater

    #Usage

    import {
  renderHtml,
  renderHtmlToJson,
  renderHtmlToPaintTree,
  Crater
} from '@mizchi/crater';

const html = '<div style="width: 200px; display: flex">...</div>';

// Get layout tree as JSON string
const layoutJson = renderHtmlToJson(html, 800, 600);
const layout = Crater.parseLayout(layoutJson);

// Get paint tree with colors
const paintJson = renderHtmlToPaintTree(html, 800, 600);
const paintTree = Crater.parsePaintTree(paintJson);

    #API

    #renderHtml(html, width, height): string

    Render HTML to text layout tree representation.

    #renderHtmlToJson(html, width, height): string

    Render HTML to JSON layout tree.

    #renderHtmlToPaintTree(html, width, height): string

    Render HTML to paint tree JSON with colors and visual properties.

    #renderHtmlToSixel(html, width, height): string

    Render HTML to Sixel graphics for terminal display.

    #renderHtmlToSixelWithStyles(html, width, height): string

    Render HTML to Sixel graphics with actual CSS colors.

    #Crater.parseLayout(json): LayoutNode

    Parse layout JSON to typed object.

    #Crater.parsePaintTree(json): PaintNode

    Parse paint tree JSON to typed object.

    #CLI

    # Via npx
npx @mizchi/crater input.html
npx @mizchi/crater --json input.html
npx @mizchi/crater --styles input.html

# Or install globally
npm install -g @mizchi/crater
crater input.html

    #WASM-GC (Experimental)

    For browsers with WASM-GC support (Chrome 119+, Firefox 120+):

    import loadCrater from '@mizchi/crater/wasm';

const crater = await loadCrater();
const layoutJson = crater.renderHtmlToJson(html, 800, 600);

    Benefits:
    • Smaller bundle size (326KB vs 1.4MB)
    • Potentially faster execution
    • Requires WASM-GC support

    #TypeScript

    Full TypeScript support with type definitions:

    import type { LayoutNode, PaintNode, BoxEdges } from '@mizchi/crater';
import type { CraterWasm } from '@mizchi/crater/wasm';

    #Development

    # Build from MoonBit source
cd js && npm run build

# Run playground
cd js/playground && npm run dev

    #License

    Apache-2.0

    FlatLayoutNode

    source
    pub(all) struct FlatLayoutNode {
      id : String
      parent_id : String
      index : Int
      x : Double
      y : Double
      width : Double
      height : Double
      content_x : Double
      content_y : Double
      content_width : Double
      content_height : Double
      text : String
    }

    Flat layout node (children referenced by parent-id)

    FlatLayoutResult

    source
    pub(all) struct FlatLayoutResult {
      nodes : Array[FlatLayoutNode]
      root_id : String
    }

    Layout result with all nodes flattened (depth-first order)

    addChild

    source
    fn addChild(parent_id : String, child_id : String) -> Bool

    Add a child node to parent (appends to end) Returns true if successful

    calculateLayout

    source
    fn calculateLayout(width : Double, height : Double) -> String

    Calculate layout (Yoga-compatible name)

    calculateLayoutStructured

    source
    fn calculateLayoutStructured(width : Double, height : Double) -> FlatLayoutResult

    Calculate layout (returns structured FlatLayoutResult)

    computeFull

    source
    fn computeFull() -> String

    Compute full layout (ignores cache) Returns JSON layout tree

    computeFullStructured

    source
    fn computeFullStructured() -> FlatLayoutResult

    Compute full layout (returns structured FlatLayoutResult)

    computeIncremental

    source
    fn computeIncremental() -> String

    Compute layout incrementally (uses cache when possible) Returns JSON layout tree

    computeLayout

    source
    fn computeLayout(html : String, width : Int, height : Int) -> FlatLayoutResult

    Compute layout from HTML (returns structured FlatLayoutResult)

    computeLayoutJson

    source
    fn computeLayoutJson(html : String, width : Int, height : Int) -> String

    Compute layout from HTML (returns JSON string)

    computeStructured

    source
    fn computeStructured() -> FlatLayoutResult

    Compute layout incrementally (returns structured FlatLayoutResult)

    createNode

    source
    fn createNode(id : String) -> Int

    Create a new node with optional ID Returns the node's UID

    createTree

    source
    fn createTree(html : String, width : Int, height : Int) -> Int

    Create a new layout tree from HTML Returns tree ID (always 0 for now, single tree)

    destroyTree

    source
    fn destroyTree() -> Unit

    Destroy the current tree

    extractMainContent

    source
    fn extractMainContent(html : String) -> String

    Extract main content from HTML using Arc90 algorithm Returns JSON with extracted text and metadata

    extractMainContentWithLayout

    source
    fn extractMainContentWithLayout(html : String, width : Int, height : Int) -> String

    Extract main content with layout calculation for better accuracy Uses visual position and size information for scoring

    flatten_layout

    source
    fn flatten_layout(layout : 
    Layout    ) -> FlatLayoutResult

    Flatten a hierarchical Layout tree to FlatLayoutResult

    getAccessibilityTree

    source
    fn getAccessibilityTree(html : String) -> String

    Get full accessibility tree as JSON

    getAriaSnapshot

    source
    fn getAriaSnapshot(html : String) -> String

    Get ARIA snapshot in YAML format (Playwright-compatible)

    getAriaSnapshotJson

    source
    fn getAriaSnapshotJson(html : String) -> String

    Get ARIA snapshot in JSON format

    getCacheStats

    source
    fn getCacheStats() -> String

    Get cache statistics as JSON

    getChildCount

    source
    fn getChildCount(node_id : String) -> Int

    Get child count

    getComputedHeight

    source
    fn getComputedHeight(node_id : String) -> Double

    Get computed height

    getComputedLeft

    source
    fn getComputedLeft(node_id : String) -> Double

    Get computed X position

    getComputedTop

    source
    fn getComputedTop(node_id : String) -> Double

    Get computed Y position

    getComputedWidth

    source
    fn getComputedWidth(node_id : String) -> Double

    Get computed width

    hasNewLayout

    source
    fn hasNewLayout(node_id : String) -> Bool

    Check if node has new layout

    insertChild

    source
    fn insertChild(parent_id : String, child_id : String, index : Int) -> Bool

    Insert child at specific index

    markDirty

    source
    fn markDirty(node_id : String) -> Bool

    Mark a node as dirty by ID Returns true if node was found and marked

    markLayoutSeen

    source
    fn markLayoutSeen(node_id : String) -> Bool

    Mark layout as seen

    needsLayout

    source
    fn needsLayout() -> Bool

    Check if tree needs layout recomputation

    removeChild

    source
    fn removeChild(parent_id : String, index : Int) -> Bool

    Remove child at index

    renderHtml

    source
    fn renderHtml(html : String, width : Int, height : Int) -> String

    Render HTML to layout tree (text representation)

    renderHtmlToJson

    source
    fn renderHtmlToJson(html : String, width : Int, height : Int) -> String

    Render HTML to JSON layout tree

    renderHtmlToPaintTree

    source
    fn renderHtmlToPaintTree(html : String, width : Int, height : Int) -> String

    Render HTML to paint node tree (JSON format with colors)

    renderHtmlToSixel

    source
    fn renderHtmlToSixel(html : String, width : Int, height : Int) -> String

    Render HTML to Sixel graphics string

    renderHtmlToSixelWithStyles

    source
    fn renderHtmlToSixelWithStyles(html : String, width : Int, height : Int) -> String

    Render HTML to Sixel with actual CSS colors

    resetCacheStats

    source
    fn resetCacheStats() -> Unit

    Reset cache statistics

    resizeViewport

    source
    fn resizeViewport(width : Int, height : Int) -> Unit

    Resize viewport

    setAlignItems

    source
    fn setAlignItems(node_id : String, value : Int) -> Bool

    Set align items: 0=start, 1=end, 2=center, 3=stretch, 4=baseline

    setDisplay

    source
    fn setDisplay(node_id : String, value : Int) -> Bool

    Set display: 0=flex, 1=none, 2=block, 3=grid

    setFlexBasis

    source
    fn setFlexBasis(node_id : String, value : Double) -> Bool

    Set flex basis in pixels

    setFlexDirection

    source
    fn setFlexDirection(node_id : String, value : Int) -> Bool

    Set flex direction: 0=row, 1=row-reverse, 2=column, 3=column-reverse

    setFlexGrow

    source
    fn setFlexGrow(node_id : String, value : Double) -> Bool

    Set flex grow

    setFlexShrink

    source
    fn setFlexShrink(node_id : String, value : Double) -> Bool

    Set flex shrink

    setFlexWrap

    source
    fn setFlexWrap(node_id : String, value : Int) -> Bool

    Set flex wrap: 0=no-wrap, 1=wrap, 2=wrap-reverse

    setGap

    source
    fn setGap(node_id : String, value : Double) -> Bool

    Set gap (row and column)

    setHeight

    source
    fn setHeight(node_id : String, value : Double) -> Bool

    Set height in pixels

    setHeightAuto

    source
    fn setHeightAuto(node_id : String) -> Bool

    Set height to auto

    setHeightPercent

    source
    fn setHeightPercent(node_id : String, value : Double) -> Bool

    Set height as percentage (0-100)

    setJustifyContent

    source
    fn setJustifyContent(node_id : String, value : Int) -> Bool

    Set justify content: 0=start, 1=end, 2=center, 3=space-between, 4=space-around, 5=space-evenly

    setMargin

    source
    fn setMargin(node_id : String, value : Double) -> Bool

    Set margin on all sides

    setPadding

    source
    fn setPadding(node_id : String, value : Double) -> Bool

    Set padding on all sides

    setWidth

    source
    fn setWidth(node_id : String, value : Double) -> Bool

    Set width in pixels

    setWidthAuto

    source
    fn setWidthAuto(node_id : String) -> Bool

    Set width to auto

    setWidthPercent

    source
    fn setWidthPercent(node_id : String, value : Double) -> Bool

    Set width as percentage (0-100)

    updateStyle

    source
    fn updateStyle(node_id : String, css : String) -> Bool

    Update node style property Returns true if successful

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io