NodeExporter for Blender

NodeExporter is a Blender add-on designed to extract node networks (Geometry Nodes and Shader Materials) and compile them into an interactive and independent web viewer based on HTML5, CSS3, and JavaScript.

The purpose of this tool is to facilitate the visualization, documentation, and graphical export of complex node systems outside the Blender environment, maintaining high visual and operational fidelity.

Key Features

• Standalone Web Viewer: Generates a standalone HTML file that does not require local servers or external dependencies to run.
• High-Resolution Image Export: Enables exporting the web canvas to PNG format (2x scale), supporting solid backgrounds or alpha channel (transparency) for integration into graphic composition and editing software.
• Dynamic Interface and Canvas: Implements an infinite and resizable workspace, with an overlay interface that allows real-time customization of the background, grid density, and connection routing (thickness and line style).
• Native State Synchronization: Detects and reproduces the state of elements from Blender, supporting minimized (collapsed) nodes and individual socket hiding, automatically readjusting link topology.
• Interactive Operations: Allows network modification directly in the browser, including block repositioning, link disconnection, and frame management via a context menu.

Installation

1. Download the NodeExporter.zip file from the Releases section of this repository.
2. In Blender, go to Edit > Preferences > Get Extensions (or Add-ons).
3. Click the drop-down menu and choose Install from Disk... (or Install...), select the downloaded NodeExporter.zip file, and confirm.
4. Check the box corresponding to NodeExporter in the extensions list.
5. The control panel will be available in the sidebar (N key) of the Node Editor.

Usage Instructions

1. Open a workspace in Blender containing an active Geometry Nodes tree or Material.
2. Open the sidebar in the Node Editor and locate the NodeExporter tab.
3. Click the Use Active Node Tree button to set the active node tree as the export target.
4. Select the destination directory on your local system.
5. Click Export and Open Viewer. The system will generate the JSON data file, compile the HTML file, and execute it in your default web browser.

Project Architecture

The add-on is structured into three main components:

NodeExporter/
├── __init__.py           # Backend logic: Extraction via Blender API and JSON data formatting.
├── visor.html            # Frontend engine: DOM rendering, canvas calculations, and interactive UI.
└── blender_manifest.toml # Extension metadata for the official Blender platform.