Introduction

Hi! My name is Alex Schiftner, and I'm the CTO at ShapeDiver. In this article, you will get to know useful background information about ShapeDiver’s App Builder features. We are answering questions such as:

- Why did we start developing App Builder? …and how it is helpful to you.

- What features are currently supported? …and how to use them.

- How does App Builder work under the hood? …and how far you can go developing your apps.

- What are our further plans for App Builder? …and why the name App Builder might disappear again soon.

Let’s dive right in.

The reason for App Builder

Back in 2023, our users had only two options for embedding ShapeDiver models in their web applications: 

- Iframe embedding: Think of this like embedding a YouTube video. You will get a 3D view of your model and a plain UI for interacting with it (sliders, dropdown menus, color pickers, text inputs, but no 3D viewer interaction options). Styling options are also minimal. Here's one example.

- Direct embedding: In this case, our 3D viewer is embedded directly into your web application. You have complete control over the UI and 3D viewer for advanced interactions, but you need design skills to conceive it and web development skills to create it. Here's one example.

The options we were offering were on the extreme sides of a scale: Either take what you can get at minimal effort (the iframe) or develop your web app from scratch. Since most platform users and clients are purely computational designers, we had to find some middle ground.

In autumn 2023, we developed a best practice code example for using ShapeDiver with React, a popular framework for building modern web applications, addressing regular requests from our users. We quickly realized that we needed to do more than just a minimal React app showing a 3D view and some UI controls connected to parameters of the ShapeDiver model. React has a steep learning curve, and one of the biggest challenges is developing stable state management.

For example, consider a parameter (an input) of a ShapeDiver model. The parameter has a definition (what type of parameter it is, what the min/max values are, etc.), and a current value is shown in the UI. It also has a value corresponding to what’s visible in the 3D scene, which sometimes differs from the value shown in the UI. If so, the change of the parameter value might be pending and waiting for the user’s confirmation, or the execution of the change might currently be going on (involving API interactions with ShapeDiver). This example barely scratches the surface, but shows that state management can get pretty intricate.

We didn’t want our users to deal with these complications, so we implemented a properly abstracted state management into the React code example. This involves the inputs and the outputs of ShapeDiver models, the 3D viewports, and the possibility of using multiple ShapeDiver models from a single React app. From there, it was a relatively small step to link a JSON data output of a ShapeDiver model with React components representing various UI elements, like parameter controls, text, and image widgets. This enabled parametric control of a web app directly from Grasshopper without coding. That’s how App Builder was born.

Once the principle was proven to work, we went on to implement:

- Multiple new Grasshopper components to control the UI, 

- Various types of charts, graphs, and tables,

- Interactive inputs for drawing polylines or points, selecting objects in the 3D view, or moving them using a gumball, 

- Support for controlling the look and feel by themes,

- Embedding the apps as iframes,

- Plugins for Shopify and WordPress, 

- An AI agent allowing you to chat with your apps, etc.

The App Builder principles, combined with ShapeDiver’s unprecedented capabilities of turning Grasshopper models into APIs, unleashed our creativity and productivity. So much so that we are lagging behind in getting the Grasshopper components implemented to allow simple use of all the features implemented in the React code. Three notable hints of what is coming:

- Parametrically defined inputs (yep, it sounds mind-blowing). Grasshopper models typically are limited to statically defined inputs (either the input exists, or it doesn’t). App Builder extends this by the possibility of defining inputs on the fly, resulting from a computation in Grasshopper. For example, consider a Grasshopper model that outputs a variable number of objects. Using App Builder, your Grasshopper model can define inputs that individually control each object. 

- Instancing and chaining of Grasshopper models. Keep your models tidy by splitting them up. App Builder composes them into a single scene according to your instructions. Think of it like parametric instances of blocks in Rhino. 

- A theme editor that allows you to configure the styling of your apps interactively. This will be much easier than editing a JSON file defining the theme.

How else can App Builder be helpful to you? 

In addition to simplifying the process of developing a 3D web app, making it as easy as authoring a Grasshopper model, App Builder offers various other benefits:

- Significantly lowers your maintenance costs compared to directly embedding ShapeDiver into your web application. We take care of hosting and keeping it up to date. Note that App Builder is included at no extra fee with your ShapeDiver subscription. 

- You benefit from new features we constantly develop, which you can integrate into your web application. 

- Easily plug your apps into Shopify or WooCommerce stores using our eCommerce plugins.

How far can you go using App Builder? 

The features offered by App Builder are extensive and steadily growing. Before starting to code a 3D web app from scratch, we recommend reviewing whether App Builder can do most of what you need for your project. Still, depending on your requirements, you might run into limitations. Luckily, we provide various ways to mitigate them: 

- All of our users can access our Support Forum and weekly community catchups. For clients, we offer Onboarding Calls, which are private one-on-one sessions with our technical team and me. We are all ears and willing to listen to your requests and ideas, and answer them. Sometimes, a solution is already available or soon to be released.

- For requirements that are not on our near-term roadmap, we offer the possibility of reshuffling the roadmap for a fee, depending on the feature's usefulness for our community of users. 

- Lastly, there is always the option of forking the code or issuing pull requests. Of course, this is only recommended for people with at least some web development skills (although vibe coding with your favorite LLM might yield some results, too!).

What’s in for web developers? 

As explained above, we conceived App Builder as a best practice codebase for using ShapeDiver with React. That’s still the case, and the App Builder SDK (the code of the App Builder web application) is open source. It’s a perfect starting point, should you create a custom React application using ShapeDiver. We have purposefully split the code into two repositories: 

The shared code repo called AppBuilderShared contains code to be shared between different deployments of App Builder. 

- The main repo, called AppBuilderSdk, uses AppBuilderShared as a git submodule and contains just a few lines of code to define the React application.  

This provides you with several possibilities: 

- Create forks with little maintenance cost by integrating the shared code we maintain as a git submodule. For example, this is how we maintain the integration of iJewel3D into App Builder using as little duplicate code as possible. See the code here.

- You can fork everything. However, this comes at a higher maintenance cost because integrating the updates we steadily develop will require more work on your end.

- Fork everything, develop a new feature, issue a pull request, let us review it, and have your feature integrated into the main App Builder distribution (which means we take over maintenance). 

- For the ones who are starting a React app from scratch, cherry-picking parts of the shared code is particularly useful for the state management code of sessions and parameters. 

Why the name App Builder might disappear soon

While we like the term App Builder, we concluded that integrating all the capabilities of App Builder directly into our platform would provide the best experience for our users. As we are writing this blog post, we are getting closer and closer to completing all the features required for that.

Once we get there, there won’t be a difference anymore between viewing a model on the platform and opening the corresponding app - the model and its app will simply be one. At that point, there will not be a need to call it App Builder; it will just be how ShapeDiver is used. Hurray! 

Are you missing a feature in App Builder? Let us know on our Support Forum.