ShapeDiver App Builder SDK

This repository contains the code of the single page application (SPA) which serves as the frontend of ShapeDiver App Builder.

Note

You can find the latest deployed version of this code here: https://appbuilder.shapediver.com/v1/main/latest/

Specific versions can be accessed by using this URL pattern: https://appbuilder.shapediver.com/v1/main/{VERSION}/

Example: https://appbuilder.shapediver.com/v1/main/0.3.0-beta.4/

How to use this

Apart from the App Builder functionality, this repository contains useful React components and hooks for using the ShapeDiver 3D Viewer and the ShapeDiver Platform Backend. If you want to develop a web application using React and ShapeDiver, this is a great codebase to start from.

Feel free to fork from this repository in case you want to develop and deploy your own flavour of the App Builder SPA.

In case you want to contribute to this repository, feel free to fork it and open pull requests.

Some hints about ShapeDiver

The complete API documentation of the ShapeDiver 3D Viewer can be found here.

This example includes some tickets of ShapeDiver models for testing. You can author and upload your own Grasshopper models.

You can insert tickets for your own models here: src/tickets.ts

Dependencies

Basics

The example is coded using TypeScript. We use Vite as a build tool for fast development experience.

UI Kit

This template uses the Mantine UI Kit. However, the code has been developed having reusability in mind, which means it should easily be possible to swap out the UI Kit.

State management

We use the zustand state manager to provide the following stores:

ShapeDiver session and viewport store

This store is used to manage viewports and sessions of the ShapeDiver 3D viewer.

Interface: IShapeDiverStoreViewer, Implementation: useShapeDiverStoreViewer

Related hooks:

• useViewport
• useSession
• useSessions

Related components:

• ViewportComponent makes use of useViewport
• ViewPage creates a single session using useSession and uses a ViewportComponent

Parameter and export store

This store provides a stateful abstraction of the parameter and export functionality offered by the ShapeDiver 3D Viewer.

Interface: IShapeDiverStoreParameters, Implementation: useShapeDiverStoreParameters

Related hooks:

• useSession
• useSessions
• useDefineGenericParameters
• useSessionPropsParameter
• useSessionPropsExport
• useParameter
• useExport
• useParameterComponentCommons
• useSortedParametersAndExports

Related components:

• Parameter components for the most common parameter types supported by ShapeDiver, uses useParameterComponentCommons
• ExportButtonComponent allows to trigger an export and makes use of useExport
• ParametersAndExportsAccordionComponent implements an accordion of grouped parameter and export components

Prerequisites

We recommend using an IDE like Visual Studio Code.

Recommended extensions:

• ESLint

The example works using node.js 18 and 20.

Getting started

Install dependencies:

npm i

Start local development server:

npm run start

This runs the app in development mode. Open http://127.0.0.1:3000 to view it in the browser. The page will re-render when you make edits. You will also see potential errors in the console.

Further available scripts

npm run build

Builds the app for production to the dist folder.

Developer tools

When developing using Chrome, the following browser extensions are useful:

• React Developer Tools
• Redux DevTools: allows to inspect the stores managed by zustand

Learn More

To learn React, check out the React documentation.

This playlist contains some valuable tutorials about React, TypeScript, and Mantine.

• ShapeDiver Help Center
• ShapeDiver Forum

Disclaimer

This code example is provided as is. We do not warrant it to be useful for any purpose.