Nodepen is a web client for Grasshopper. This monorepo is for the main @nodepen/nodes React app library and its supporting packages.
This project is under active development towards a 2.0 release that will:
- Publish useful bits of the previous release as independent libraries
- Integrate with Speckle for backend processes and frontend visualization
- Compose, execute, and view results from your Grasshopper graphs in the browser
- Upload an existing script and continue working on the web
- Easily pin any number of parameters for a quick configurator-like experience
- Open the same graph in multiple browser windows for the "two screen" UX we've come to love with Rhino and Grasshopper
- Download your current graph to continue work in Grasshopper offline
This monorepo contains the core NodePen libraries (/packages) and a collection of example applications (/apps) that use them. The applications are meant to be a simple demonstration of how to run a Grasshopper-like environment and how NodePen integrates with Speckle technology.
NodePen currently supports three core libraries:
A React component library that exports the main NodePen client-side "app" for interacting with nodes and viewing results. It also exports the individual "views" which may be included and configured as necessary.
A typescript library that exports types and utilities for NodePen concepts. Useful if you need to perform operations with NodePen-shaped data but do not need to include the client-side logic.
A C# library that can be used to serialize/deserialize types to/from the NodePen Document JSON format.
A thin next.js client that communicates directly with the Rhino Compute server for Grasshopper solutions and the Speckle server to receive results from Speckle streams.
A minimal Rhino Compute server with endpoints for updating a given NodePen document. Writes results directly to the local Speckle server instance it's configured to point to.
Running NodePen locally requires a number of dependencies and, at the moment, a bit of manual work for first-time setup. Please also see the section below about known limitations.
In order to run all of the example applications, you will need:
- Git with SSH auth
- Nodejs 16, 18
- Dotnet CLI
- Rhino 7+
- Access to a running Speckle Server
Clone this repo:
git clone git@github.com:nodepen/nodes.git
From the root directory, run:
npm i
npm run build
This should install dependencies for all of the javascript projects and build them once. Build failures may still occur for the last project, nodepen-client, and can be ignored.
From /apps/rhino-compute-server run:
dotnet build
This should restore dependencies for and build both the example application and NodePen.Converters.
Last, follow Speckle's instructions for how to set up your local development environment for the speckle-server project. Run the server.
Visit your local Speckle server and:
- Create your admin user (the first user on the server)
- Create a new stream
- Create a personal access token for your account.
Alternatively, you may also source these values from a live Speckle server you have access to.
In apps/nodepen-client, copy .env.development to a .env.development.local and populate each environment variable with the relevant information from the previous steps.
In apps/rhino-compute-server, copy appsettings.json to an appsettings.local.json and populate the named variables in the same way.
At this point, you may leave your Speckle server running and continue onto the next section.
Both services in the /apps directory must be running in order to develop with NodePen locally. For all current features, you must also have access to a running speckle server (local or otherwise).
Once all three are successfully running, you can navigate to http://localhost:4000 to begin working.
You can validate that everything is working by dropping a grasshopper script onto the canvas and viewing the results in the next tab. (Please see the limitations section below if you script does not appear.)
From the root directory, run:
npm run dev
This uses turborepo to watch and react to changes made in either the client application or any of the packages it consumes.
From the apps/rhino-compute-server directory, run:
dotnet watch
After a short wait for Rhino startup processes, you will see The Rhino.Compute service is now running when it's ready for communication with the other apps.
Follow Speckle's instructions for local development here.
- Grasshopper script conversion (upload Grasshopper file => create NodePen doc) will fail often because several important component types are not yet handled. You may safely use most default components, but you can't (yet!) use anything with a special type or behavior like the Number Slider or floating parameters.
- You may only expose number-based input parameters at this time in the HUD inputs window.
Rhinoceros and Grasshopper are registered trademarks of Robert McNeel & Associates.
All 3D visuals are powered by the Speckle Viewer.
Previous drafts of NodePen included the "RestHopper" headless Grasshopper prototype developed at the 2018 AEC Tech Hackathon.