Overview

Nodepen is an innovative web client tailored for Grasshopper users, facilitating a seamless integration of graph management within the browser. As a monorepo, it houses the primary @nodepen/nodes React app library along with its supporting packages, and it is currently undergoing active development towards a highly anticipated 2.0 release. This new version promises to enhance user experience by publishing useful features as independent libraries and incorporating Speckle for improved backend processes and frontend visualization.

The platform allows users to compose, execute, and analyze Grasshopper graphs conveniently in their browsers, while also providing tools to upload existing scripts for continued online work. With an emphasis on usability and flexibility, Nodepen aims to redefine how designers and developers interact with their projects in a web environment.

Features

Graph Composition and Execution: Create, execute, and view results of Grasshopper graphs directly within your browser, streamlining your workflow without the need for local software.
Script Upload: Import existing Grasshopper scripts to continue your work seamlessly on the web, ensuring that you can pick up right where you left off.
Parameter Pinning: Easily pin multiple parameters for a quick configurator-like experience, optimizing your design processes with more accessible configuration options.
Multi-Window Support: Open the same graph across multiple browser windows, allowing for a “two screen” UX that mimics the functionality users love in traditional Rhino and Grasshopper setups.
Offline Accessibility: Download your current graph to continue working offline in Grasshopper, making it easier to manage your projects without being tethered to an internet connection.
Core Libraries: The project consists of three essential libraries—@nodepen/nodes for the main React application, @nodepen/core for TypeScript utilities, and NodePen.Converters for serialization tasks, which bolster the functionality of the platform.
Local Development Setup: While a bit complex, Nodepen includes comprehensive guidance for local development, catering to tech-savvy users eager to customize and experiment with the applications.
Integration with Speckle: By connecting with the Speckle server, Nodepen enhances backend processing and enables robust visualization capabilities for its users, ensuring an efficient flow of data and results.

Nodepen

Nodes