Nodes

screenshot of Nodes
nextjs

same nodes, new digs

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.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.