Platform / Authoring

Build a full app interface without leaving Grasshopper

App Builder is how a ShapeDiver model becomes an app. Every model you upload gets a working interface out of the box; App Builder is the no-code way to design a better one (tabs, panels, controls, charts, and more) as components on the Grasshopper canvas, without a separate UI editor or any web development.

Open source. 14-day trial for the platform.

Placeholder for a split view of App Builder components and the rendered app

What it is

Designed in Grasshopper, rendered as an app

Diagram: App Builder components on the Grasshopper canvas (tabs, parameters, chart) become the matching parts of the rendered web app around the 3D viewport

App Builder is the layer that turns a model on the platform into an app people can use, and it works on two sides. In Grasshopper, it adds components for designing the interface - choosing which parameters to show, arranging them in tabs and panels, and adding charts, tables, images, drawing tools, and more. Online, an open-source framework reads those components and renders your model as a web app: the ShapeDiver Viewer handles the 3D, and the interface you defined surrounds it.

You don’t have to design anything to get started. Upload a definition with no App Builder components and it still opens as an app, with automatic controls for the parameters and exports you exposed. Add App Builder components and you take over that interface - the same Grasshopper file now carries both the definition and the app around it. And because the framework is open source, developers can see exactly how it works and extend it.

What you do with it

Design the interface on the canvas

App Builder examplesComponent reference

Lay out the app.

Containers, tabs, and panels organize the interface - group related controls, separate steps, and place the 3D viewport where it belongs.

Control the parameters.

Decide which parameters people see and how, order and group them, and show or hide them based on other choices, so the interface stays relevant as the configuration changes.

Show data, not just geometry.

Charts, tables, and image widgets present the numbers behind a design (dimensions, quantities, pricing, analysis) next to the model they describe.

Add interaction and state.

Drawing tools, action buttons, and saved states let people mark up a model, trigger exports, and return to a configuration later.

Make it yours.

Style the app to match your brand, so what you ship looks like your own product.

Two ways to build the interface

No-code here, or in code when you need it

App Builder is one of two routes for building an app’s front end, and they aren’t exclusive. App Builder is the no-code route: you design the interface in Grasshopper, ship it yourself, and never leave the canvas - usually the quickest way to a custom UI, and the right call for most computational designers. When a project needs a fully custom front end, deeper integration, or a development team’s own framework, you can build against the Viewer API instead: in code, with a coding agent, using ShapeDiver’s Agent Skills. Many teams start in App Builder and reach for code only where they need it.

See agent-assisted build
Diagram: one model on the platform, two ways to build its interface - App Builder with no code in Grasshopper, or in code against the Viewer API with a coding agent; both drive the same ShapeDiver Viewer

AI agent toolsPreview

The AI agent’s tools live on the canvas too

ShapeDiver’s in-app AI agent lets your users change a model by describing what they want - adjusting parameters, moving the camera, and more, through a chat interface. The tools that agent is allowed to call are defined the App Builder way, as components in Grasshopper, so you decide exactly what it can do inside your app. The in-app agent is an early preview; we’ll say more as it matures.

See the AI story
Diagram: the tools the in-app agent can call are Grasshopper components you define (set length, set material, move camera); anything you do not wire up, such as pricing logic, stays out of its reach

Where App Builder fits

One part of how an app comes together

App Builder presents the app, but it isn’t the whole picture. The definition behind it is authored with the ShapeDiver plug-in and uploaded to the platform from the Grasshopper canvas, the same canvas where you design the interface with App Builder. The platform hosts and runs the model; your workspace on the platform is where you organize, version, and share it, and control who can open it. From there the app runs wherever you put it - on ShapeDiver or embedded in your own site.

See how ShapeDiver works
Diagram: the stack from the Grasshopper plug-in through the platform and the workspace to the interface, where App Builder (highlighted) sits, then the 3D viewer and your users

Start from an example

You don’t have to start from a blank canvas

The example-model library includes a full App Builder chapter - working definitions that go from a basic interface to contextual UIs, linked exports and image widgets, and charts and graphs. Open one, upload it, and see how the components fit together before you build your own.

App Builder examples

From the blog

App Builder in practice

All posts

  • Product updates

    App Builder 101

    ShapeDiver's CTO Alex Schiftner on why we built App Builder, what it supports, how it works under the hood, and what comes next.

    Alex Schiftner

  • Tutorials

    No More Broken Grasshopper Models: Automate Your App Builder Tests

    Tired of manually dragging sliders to check if your Grasshopper model broke? We've open-sourced our App Builder Testing Framework. Powered by Playwright, it lets you easily automate browser tests, user interactions, and visual regression checks before your users find the bugs.

    Michael Oppitz

App Builder

Give your model an interface

Install the plug-in, start a free trial, and build an app interface for one of your own definitions - no web development, all on the canvas you already work in. The component reference and guides are in the docs whenever you need them.

Talk to our team

Your Business

How can we help?