geonodes-web-render

A browser-based viewer for Blender node trees exported via the Tree Clipper add-on. It renders the exported JSON as a read-only, Blender-styled node graph using React Flow.

📦 npm: geonodes-web-render

What it does

Paste or load a Tree Clipper JSON export and the app displays the node graph with accurate socket colors, node header colors, reroute nodes, float curves, and simulation zones.

Data flow:

Tree Clipper JSON / base64 payload
  → normalizeBlenderGraph   (flatten nodes, flip Y axis, assign colors)
  → toGraphIR               (socket-centric edges, resolve links)
  → mapGraphIRToFlow        (React Flow nodes/edges, simulation zone frames)
  → read-only React Flow canvas

Features

• 10 built-in examples — real Tree Clipper exports loadable from tabs
• Custom JSON input — paste JSON directly into the built-in CodeMirror editor
• Clipboard import — decode a TreeClipper:: base64/gzip payload from clipboard
• Simulation zones — automatically detects and frames nodes between simulation input/output pairs using graph reachability
• Blender fidelity — socket and header colors sourced from Blender's own tables; Math/Compare nodes show human-readable operation labels
• Embeddable — ships a separate embed entry point for use as a library

Controls

| Action | Mouse | Trackpad | | --- | --- | --- | | Box-select | Left-drag | Left-drag | | Pan | Middle-drag | Two-finger drag | | Zoom | Wheel | Pinch | | Zoom (modifier) | ⌘/Ctrl + wheel | ⌘/Ctrl + two-finger | | Context menu | Right-click | Right-click |

Mouse vs. trackpad is auto-detected per scroll, so wheel-zoom and two-finger-pan coexist. In an embed, scroll passes through to the page until you click the canvas to engage; moving the pointer off disengages.

Usage

Standalone app

npm install
npm run dev

Open http://localhost:5173/geonodes-web-render/ and pick an example or paste your own JSON.

Embed in another app

import { mountGraphView, unmountGraphView } from 'geonodes-web-render/embed'

// payload can be a raw JSON string or a TreeClipper:: base64 encoded string
mountGraphView(container, payload)

// later
unmountGraphView(container)

Or use the React component directly:

import { GraphView } from 'geonodes-web-render/embed'

<GraphView payload="TreeClipper::H4sI..." />

Preview the embed locally. The embed view (with the "Copy TreeClipper Magic String" button and toast) isn't reachable from the standalone app, so a dev-only harness page is included. Run npm run dev and open http://localhost:5173/geonodes-web-render/dev-embed.html — it mounts GraphView with a bundled example graph. The harness lives in dev-embed.html

• src/dev-embed.tsx and is excluded from the published package.

Tech stack

• React 19 + TypeScript
• Vite (with React Compiler enabled)
• @xyflow/react (React Flow v12) — graph rendering
• @uiw/react-codemirror — JSON editor with one-dark theme

Deployment

The app is configured with base: "/geonodes-web-render/" for hosting on a subpath (e.g. GitHub Pages). Adjust vite.config.ts if deploying to a root path.