🥮 mooncakes.io

crater-js

JavaScript bindings and compatibility facade for crater

moon add mizchi/crater-js@0.19.0
Download zip
Author
Version
0.19.0
License
Apache-2.0
Repository
Last updated
last month
Downloads
1K

Dependencies

README

#@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