Until now, making geometry on Bitbybit meant writing it: wiring nodes in Rete, snapping blocks in Blockly or typing TypeScript. Those editors shine when a model is a program, a family of parts generated from a few numbers. But a lot of design isn't programming. You want to draw a profile, pull it into a solid, round an edge, drill four holes and see the result straight away.

The Designer is our answer: a parametric CAD modeller you use with the mouse, in your browser. Draw a sketch, extrude it, fillet it, drill it, then put parts together with joints and pose the assembly. Every step is kept, so changing a size later rebuilds everything that depends on it. The Bitbybit OCCT Kernel does the modelling on your own machine, so there is nothing to install. And because the Designer was built for AI agents as much as for people, an agent can work in the same document beside you, while you keep or undo each of its changes.

Watch a desk arm built from a blank page​

The film follows a desk robot arm from its first sketch to a moving assembly: a profile drawn and revolved into the base, a shoulder extruded, rounded and mirrored, a link driven by five parameters, the parts joined, posed and cut open, and finally a change made by a browser agent and kept in review. Every build runs at its real speed and the time it took is on screen; the stretches that are sped up are marked as a time-lapse.

A CAD program in a browser tab​

The Designer looks and works like a desktop CAD program. Menus and a toolbar run along the top. The Features panel on the left lists the project's documents and the history of the one you have open. The view sits in the middle, with a view cube and a bar of display switches, and Properties and the dock fill the right. Each panel docks left, right or at the bottom, or floats. Press Ctrl+K (⌘K on macOS) to find any command by name.

A Designer project lives on bitbybit.dev like any other: it saves as you work and keeps versions you can go back to. The geometry a build makes is kept beside the project, so even a large model usually opens in seconds.

Sketch, then build features on it​

A part starts with a sketch: lines, arcs and rounded corners drawn on a plane or on a face of the part, with snapping, a grid and typed values. Every segment has a name, so the features that follow refer to the faces it makes by name rather than by a fragile number.

From a sketch you build features: extrude and revolve, loft and sweep, a boss or a pocket on a face, push/pull of any face, fillets and chamfers, a shell, holes with counterbores, linear and polar patterns, mirror, booleans and move. When those are not enough, an operation feature runs a modelling operation of the Bitbybit API as a step of the history.

Each feature opens a dialog with a live preview and handles in the view. Drag a handle and a light proxy follows the pointer at once, while the kernel builds the real preview behind it.

Every step is kept​

The Features panel is the part's history. Double-click any feature to edit it in its dialog, drag it to a new place in the order, or roll the part back to see it as it was at any step. References follow faces by the names the document gives them, so an edit early in the history doesn't quietly break a fillet that comes later. When a reference does get lost, the feature turns red, the Problems tab says why, and a repair view offers the faces that fit.

Parameters drive the design​

Name the sizes that matter and write the others as expressions of them. The desk arm's link is one document with five parameters (length, width, gap, hub and tip), and its waisted outline, the fork at its far end, the lightening window and both pivot holes are all expressions of them. Change the length and the whole link follows.

A configuration keeps a set of values under a name, so one model can have a Rest and a Reach pose, or a short and a long version. And one document can serve many times: the desk arm's upper arm and forearm are the same link, inserted twice with values of their own.

Parts with materials, and a realistic look​

A part has a name, a material, a colour and a finish, and the Designer works out its volume and mass from the material's density. Switch on the realistic look to see the materials with reflections and soft shadows, or show only edges, or the triangles the view draws.

Assemblies that move​

An assembly places parts as components and joins them at connectors: a flat face, a hole's wall, a cylinder or a circular edge. Joints turn or slide within limits you set, or hold a part fast, and parameters or configurations drive them. Drag a joint's value and the assembly poses straight away, while the kernel's build follows behind.

Fasteners take one step each. Replicate puts one screw on every hole of a hole pattern, and a pattern repeats a component around an axis or along a line. That is how all 22 blades of the jet engine's fan are one component.

Then inspect what you made. The bill of materials counts every part through every level. The clash check lists parts that overlap or come too close. Measure gives the lengths, areas, radii, distances and angles of what you pick. The section view cuts the model with a plane so you can look inside, with the cut filled in by the kernel.

Work beside an agent​

The Designer was built for two authors at once. While it is open, it offers its tools to AI agents: to the browser's own agent through WebMCP, in browsers that support it, and to scripts on the page as window.bitbybitDesigner. An agent runs the same commands you do. It can read the build, pick faces by their names, sketch, add features and joints, change parameters and capture the view. (In the film, the agent's part is a scripted run of these same WebMCP tools.)

You stay in charge. The status bar names the agent that is working, its picks are drawn in a colour of their own, and every change it makes waits in the Review tab for you to keep or undo. Follow agent decides whether the agent's views move your camera. Deleting documents, imports, exports and reviewing stay with you.

Everything you do is recorded as steps, too. Save the steps gives you a file that rebuilds the project command by command. The Designer's own tutorials are written in that format, and an agent can read the steps of a session to learn how a model was made.

Learn it inside the app​

Help > Tutorials plays a tutorial right in the Designer. A card shows each step, explains it and rings the control to use. Make the step yourself, or press Do it.

• Make your first part: a plate with rounded edges and holes, driven by parameters. Start here.
• Model a desk robot arm: nine chapters and 167 steps that make eight parts and an assembly: a revolved base, a shoulder with a clevis, one link used twice, a wrist, a gripper with sliding jaws, and the screws and nuts that hold it together. On learn.bitbybit.dev every step has its own picture.

Three showcases​

• A robot arm: a six-axis industrial arm with cable harnesses and a three-finger gripper. 28 documents and 77 components, with joints and limits at every axis and finger, posed by four configurations.
• A jet engine: a turbofan with 4,853 parts placed from 130 different ones. Each blade and vane row is one patterned component, and the engine can be shown closed, with its casing open, or exploded.
• The desk arm of the tutorial.

Open any of them in the Designer from the showcases page, or download its design documents.

Open documents, standard files​

A Designer project is a set of design documents: plain JSON that describes the features, parts and assemblies. The same documents build in code with the free @bitbybit-dev/occt package, so a model made in the Designer can be rebuilt, with other parameter values, in your own app. It works the other way round too: an agent outside the browser can write design documents with the help of the Bitbybit CAD MCP, and you bring them in with Import design documents. Design documents explains the format.

For other programs, export STEP with the assembly tree, names and colours, or GLB, STL and BREP, and bring STEP, IGES and BREP files in.

Who can use it​

Making and changing designs is part of the Gold plan. Anyone can open a design that is shared with them: turn it, inspect it, measure it, cut it with a section, switch its configurations, try the parameters its author offers, and download what its author allows.

Try it​

Open the Designer, play your first part, then build the desk arm. The introduction and the tour cover the rest. We'd love to see what you make.

Bitbybit has three coding editors: Rete, where you wire nodes together; Blockly, where you snap blocks; and TypeScript, where you write code against the same API. This release rebuilds a large part of all three. Most of the work went into Rete, which now stays readable when a script grows to hundreds of nodes. Blockly functions can await geometry, TypeScript scripts can span many files, and an AI agent can drive any of the three editors.

To show what that adds up to, we built one drone in all three editors: a quadcopter with a carbon frame, motors with cooling slots, propellers that alternate their spin, a canopy traced with a honeycomb and the bitbybit logo on its hatch, sprung landing legs and a camera on a gimbal. Each build is a tutorial with a picture after every step.

Watch the drone's Rete script at work, from the whole graph down to a single wire, then the same drone in TypeScript and Blockly:

A drone, built three ways​

The drone is the showcase of each editor, and the tutorials build it in seven chapters: sizes and the frame, a way to repeat a part around the drone, one arm, arms around the frame, the canopy, the landing gear and the payload. Every chapter has a picture of the editor after every step.

• In Rete: 202 components in commented groups, two modules (one repeats a part around the drone, one makes an arm with its motor, propeller, bolts and light), and code components where a few lines say more than a dozen nodes.
• In Blockly: variables for the sizes, a function for every part, loops that repeat parts and cut their holes, and async functions for the parts that measure geometry. The functions are collapsed, so the stacks that call them read like a list of parts.
• In TypeScript: a script of nineteen files, one function per part and a folder for the arm, put together in main.ts.

Change the number of arms to six and the drone rebuilds, and the propeller shrinks to fit between its neighbours.

Rete: wires you can read​

In a large graph, curved wires cross the canvas and turn it into a tangle. Rete now draws wires right-angled: each output turns in a lane of its own, so wires that leave one node run side by side instead of on top of each other.

A wire between two groups is no longer drawn across the canvas at all. It becomes two short ends, each labelled with the other end: the output says where the value goes, and the input says where it comes from. Point at a label to see the whole wire, or select a node to see all of its wires. Both behaviours are switches in the settings, if you prefer the old look.

Groups, comments and an arrange that keeps them​

Groups frame the nodes that belong together, with a title, a colour and a description; drag the group and everything in it moves. Comments hold Markdown, so a group can say in a sentence what it makes and how.

Auto-arrange now keeps groups whole. It lays each group out inside itself, in the order its wires run, wraps tall groups towards a square, and places the groups beside one another without overlap. Press it whenever the canvas gets crowded; the drone tutorial's pictures were taken right after it.

A colour-coded, typed graph​

The whole graph is colour-coded by category. The colour runs from the category you pick a component from, through the component on the canvas, to its sockets, so you can tell at a glance which nodes are OCCT solids, which are meshes and which are points.

Sockets now carry types. Each socket is tinted for the kind of data it carries, and when you point at one, a tip names the type and shows the value it holds after the last run. If you'd rather have a calmer canvas, monochrome mode is one switch away in the settings.

Socket coaching instead of silent failures​

With typed sockets, the editor can help you wire things correctly:

• A refused wire says why. Drop a wire on an input that cannot take it and a short message says what that input needs and which nodes make it.
• Opened scripts keep their wiring. An older script whose connections no longer pass the type check keeps them, drawn red and dashed, and a message counts them, so nothing quietly disappears.
• Nodes show what they do with lists. When several wires feed one input, the node runs once per value and a badge says how many it received. Pair lists by position with 1:1 in the node's options.

Modules: graphs you use many times​

A module packages part of a graph with its own inputs and outputs. Define it once, then drop instances of it wherever you need it, the way you call a function in code. Double-click a module to edit the graph inside, with a breadcrumb back to the main canvas; an input's sample value stands in for what an instance gives it, so you can see what the module makes while you build it. The drone uses two modules: Around repeats any part evenly around the drone, and Arm makes a whole arm from its length and the propeller's diameter.

Find anything on the canvas​

The component search now does two jobs. Add components searches the catalogue as before, and Find on canvas searches the script in front of you. It matches component names, titles, inputs, outputs, group titles and comment text, counts the matches, and steps through them with the arrows. Each match is framed and pulses so your eye goes straight to it.

Selection that shows its geometry​

Selecting a node highlights the geometry it made in the 3D view, with a glow that draws on top of everything else. If the node's geometry is hidden, it is drawn while the node stays selected. Double-click a node to frame its geometry and centre the canvas on the node itself.

Code where code is clearer​

Some things are easier to say in a few lines than in a dozen nodes: a formula, a loop with a condition, a list reshaped. A typescript editor node holds a function that receives what is wired into it and returns what it gives out, with the same IntelliSense as the TypeScript editor. The drone mixes both: simple shapes are nodes, and parts with a profile of many points or a loop are code nodes.

Settings and split screen​

Work on the graph and the 3D view side by side, with a divider you can drag, or swap the canvas to give the model the whole screen. The Settings dialog holds split screen, monochrome colours, the camera gizmo, right-angled wires and labelled wire ends, the language, the rendering engine (WebGL or WebGPU) and the OCCT kernel. Settings are remembered on your device.

Blockly: functions that wait​

Blockly functions could always return a shape, because every bitbybit block waits for the shapes it receives. What they could not do was wait for a value themselves: an await block inside a function failed when the script ran.

Now a function with an await block in it runs as async. A call of it as a block of its own waits for it to finish before the next block runs, a set block that keeps its result waits for it too, and a function that calls it becomes async too. Functions without await blocks run exactly as before, so existing scripts behave the same.

We also fixed a long-standing bug on the way: a function whose return was a bitbybit block, such as a cylinder plugged straight into its return, gave back nothing, because of where a line break fell in the generated code. Such functions now return their shape. And a block dragged from the toolbox no longer fills a number the API leaves unset with 0, which had tinted the edges of a shape drawn with the full drawing options. In the drone, async functions read each light's centre to sort the lights into green and red, and measure the canopy's faces to trace its honeycomb. Collapse functions once they work, and a large Blockly script reads like a list of parts.

TypeScript: scripts of many files​

A TypeScript script can now be many files in folders, with main.ts as the file the run starts from. Files import each other by relative path, every file is checked as you type, and a mistake in a file you have closed still shows its count in the tree. The TypeScript drone keeps each part in a file of its own.

Agents can drive the editors​

While an editor is open, it offers its tools to AI agents, through window.bitbybitEditor and through WebMCP in browsers that support it. An agent can search the components or blocks, read the graph or the files, apply a batch of changes that the editor checks first and that one undo takes back, run the script and read what failed, and capture the 3D view. The drone tutorials were built through these tools: each step is a checked batch of edits, played in the real editor and photographed.

Faster, and lighter on your machine​

Under all of this, the editors were rebuilt. The 3D scene renders only when something changes instead of 60 times a second. Zoomed far out, Rete nodes simplify to placeholders so the canvas stays smooth. Rete keeps each node's last result and runs again only what a change affects. Large graphs like the drone's 202 nodes stay quick to pan, zoom and edit.

New pages on learn.bitbybit.dev​

Each coding editor now has its own section in Getting Started: an introduction, a tour of the window, the showcases, tutorials with a picture after every step, a page for each area of the editor and its shortcuts. Start with Rete, Blockly or TypeScript.

Try it out​

All of this is live in the Rete, Blockly and TypeScript editors. Open the drone from a showcase page, change its sizes, and take it apart. We'd love to hear what you build.

More and more of the code that uses Bitbybit is not typed by a person. It is written by an AI coding agent, inside an editor or a terminal, while a person describes what they want and judges what comes back. We think this is where 3D development is heading, and we want Bitbybit to be the CAD library that agents get right. That is why Bitbybit now runs its own MCP servers: one that teaches any agent the exact Bitbybit API, and one that lets an agent run real CAD operations for you.

To show what that looks like in practice, we asked an agent to build something far beyond a demo cube: a two-spool turbofan engine with 130 unique parts placed 4,853 times, bolted flanges, blades seated in slotted disks, a casing that opens, an exploded view and a welded transport stand. This post explains what MCP is, the use cases we care about most, what they mean for you, and how the engine was made.

Watch It Come Together​

Here is the finished engine in our TypeScript editor: it starts exploded in empty space, assembles itself, takes its place on the stand with its labels, then opens up for a closer look at the fan, the compressor, the combustor, the turbines and the stand.

Why an agent needs more than its memory​

A language model learns libraries from whatever it read during training. For a small, stable library that works. For Bitbybit it does not: the API has close to two thousand functions across three CAD kernels, it changes with every release, and many functions take one argument object with a dozen named fields and defaults. An agent that writes Bitbybit code from memory produces names that sound right and do not exist, or fields that existed two versions ago. The code looks plausible, it fails to compile, and you lose the time you hoped to save.

The fix is not a bigger model. The fix is giving the agent a way to look things up at the moment it needs them, the same way a person opens the documentation.

What MCP is, in one paragraph​

The Model Context Protocol is an open standard for connecting AI assistants to tools and data. A server publishes a set of tools, the assistant discovers them and calls them while it works, and the answers flow back into its reasoning. Claude Code, Codex, Cursor, VS Code, Gemini CLI, Windsurf, Zed, the JetBrains IDEs, claude.ai and ChatGPT all speak it. One server, written once, works in all of them.

Our two servers​

Connecting the free one to Claude Code is a single line:

claude mcp add --transport http bitbybit https://mcp.bitbybit.dev/mcp

Every other host is covered on the MCP page, most of them with a one-click install.

The use cases that matter most​

1. Code that compiles the first time​

This is the everyday one. Before an agent writes a Bitbybit call, it asks the server: search_api finds the function from a few words ("box with rounded edges"), describe returns its exact signature with every field, default and range, and get_examples returns calls that are known to work. The answers are version exact: the local server reads the version installed in your project, so an agent working on a project pinned to an older release is not handed functions from a newer one. A half-remembered name comes back with the nearest real ones, so a near miss still lands.

2. Learning the API by asking​

You do not need an agent to write code for you to benefit. Ask it "how do I fillet only the vertical edges of this solid?" or "which kernel should I use for a fast boolean on a mesh?" and it answers from the same index we publish with every release, not from a blog post it half remembers. For people new to Bitbybit, this turns the API from something to study into something to talk to.

3. Honest advice about where geometry should run​

Bitbybit geometry can run in your users' browsers, on your own Node servers, or on CAD Cloud. The server carries our integration guide and serves it to agents verbatim through get_guide, and every function it describes carries a tier: oss (in the free MIT packages, runs anywhere), platform-pro (available in the bitbybit.dev editors on Silver and Gold plans) or cloud-pro (runs only on CAD Cloud). An agent that reads the tier never sends you to a paid service for something the free packages already do. We wrote it that way on purpose, because agents repeat what they are told.

4. Answers about real geometry, without writing code​

A language model cannot measure a part by looking at it, and it will happily guess a number anyway. With the CAD Cloud server it does not have to. "How heavy is this bracket in aluminium?" becomes an upload, a pipeline that loads the STEP file and measures its volume, and a multiplication. "Will it fit in a 60 by 40 by 20 box?", "where is the center of mass?", "convert this STEP to glTF for my web page", "flatten this sheet-metal part": each becomes one request, computed by the same kernels that run in our editors, and returned as a number or a file link.

5. Automation and batches​

Twenty variants of a parametric model as STL, a folder of STEP files converted for the web, a measurement run over a whole catalogue: an agent with the CAD Cloud server chains operations into one pipeline per request, so the heavy lifting happens next to the kernels and only the results come back. This is the path for work that is too big or too repetitive to do by hand, and for backends such as edge functions that cannot host a CAD kernel themselves.

6. Scripts for the Bitbybit editors​

The same server describes the platform-pro members that exist only inside our editors, so an agent can write TypeScript for the Monaco editor at bitbybit.dev with the full API, including the parts you will not find on npm. The jet engine below ended up exactly there.

What this means for you​

• If you write code with Bitbybit, connect the free server once and let your agent look things up. You spend your time on the design, not on correcting invented function names.
• If you script in our editors, an agent can now draft multi-file projects for you, and the editors run them as they are.
• If you scaffold an app with npm init @bitbybit-dev/app, it already comes wired for agents: an AGENTS.md that tells the agent how to work, the MCP server configured for Claude Code, Cursor and VS Code, and a smoke test the agent can iterate against. See create-app.
• If you do not write code at all, the CAD Cloud server lets an assistant answer questions about your parts and convert your files, with nothing to install but a connector.
• If you run a company that needs its own operations, we build and host private algorithm namespaces on the same infrastructure, so your agents can call your geometry the same way they call ours. Write to us.

The example: a turbofan engine, built by an agent​

We wanted an example that would break a careless approach. A jet engine is a good test: thousands of blades that must sit in their slots, flanges that must line up bolt for bolt, a casing that splits in two, two spools turning at different speeds, and every part named and placed so the assembly exports as a proper STEP file.

The engine was built by Claude Opus 5.5, Anthropic's model, working as a coding agent in Claude Code, in a project scaffolded with npm init @bitbybit-dev/app, on our three.js template, with the Bitbybit CAD MCP configured from the first minute. A person directed the work, as you would direct a colleague: "make the blades smoother up close", "the fillets on the stand's triangular plates are not symmetric", "the front A-frame does not touch the sides of the base". The agent wrote and corrected every line.

What it contains:

• a fan with wide-chord swept blades on dovetail roots in a slotted disk, a spinner held by a ring of screws, and twice as many outlet guide vanes as fan blades;
• booster and high-pressure compressor stages with blades in grooved drums, stators split into halves, and variable stator levers on unison rings;
• a combustor with fuel nozzles, a manifold ring and drilled liner tiles;
• high- and low-pressure turbines with fir-tree blades and clearance-control pipes clipped to the case;
• shafts, two bearings, an accessory gearbox with its pumps, and mounts;
• 360 bolt sets (bolt, washer and nut defined once and placed by reference) on every flanged joint and split line;
• a welded transport stand on four swivel casters, sized from the fan so the engine always clears the frame.

Every blade, vane and bolt is one part placed many times, not a copy. That is what keeps an assembly of this size light: 130 unique shapes, 4,853 placements, 3,060 of them blades and vanes. The same structure goes into the exports: the STEP file holds one product per unique part with every placement as an instance, so it opens in your CAD tool as an assembly with names and colours, not as a soup of solids.

How an agent checks geometry it cannot see​

The most interesting part of the project was not writing the parts. It was verifying them. An agent cannot look at a blade root and notice that it bites into its groove, so we did not let it rely on looking. The project has a smoke test that builds the whole engine headlessly on the same OpenCascade kernel and asks the kernel the questions a reviewer would ask:

• does every part have real volume?
• do 103 pairs of neighbouring parts share any volume at all, measured exactly?
• do the parts that are meant to touch, such as blade roots in slots, races on shafts and the engine on its stand, actually touch?
• does the exported STEP read back with exactly the expected number of solids, standing on the ground?

A separate scan checks every part for self-intersection and every pair of parts for interference. Together these checks caught real mistakes that no screenshot would have shown: drum spacers built inside out, blade roots sinking 0.2 mm into their grooves, a turbine flange reaching into a nozzle groove, a guide vane whose trailing edge overhung its platform. The agent found each one in a test result, fixed the code, and ran the checks again. This loop of writing, measuring and correcting, with the kernel as the judge, is how we believe serious CAD gets built with agents.

Parametric to the last bolt​

The engine is not a fixed model. The fan blade count, the fan diameter, and the number of compressor and turbine stages are parameters, and a change rebuilds only the parts whose inputs moved. Here is the same code at three settings, seen from the same camera:

• an 18-blade, 1,400 mm fan with six compressor and three turbine stages: 116 parts placed 3,389 times;
• the default 22-blade, 1,600 mm fan with nine and five: 130 parts placed 4,853 times;
• a 24-blade, 2,000 mm fan with ten and six: 136 parts placed 5,560 times.

The stand resizes itself from the fan, and every bolt circle, blade row and label follows.

From a three.js app to our TypeScript editor​

The engine started as a standalone three.js app on our npm packages. Because the model code never touches a renderer, moving it into the Babylon.js editor at bitbybit.dev was a matter of rewriting the viewer and the panel: 30 of the 43 files carried over unchanged. The result is a multi-file project of about 4,800 lines in the editor, with folders for the CAD helpers, the engine plan, the parts, the viewer and the user interface, that builds the engine in the browser in well under a minute and animates it smoothly.

Get the source​

The complete source of the engine, as a multi-file project you can open, run and change in our TypeScript editor, is available to Gold plan subscribers. Use it as a reference for assemblies, instancing, fasteners placed by reference, parametric rebuilds, exploded views, labels and STEP export, or hand it to your own agent as a worked example. See the plans.

What the agent did, and what it did not​

We want to be precise about this, because it is easy to oversell. The agent wrote the code, looked up the API instead of guessing it, and found and fixed its own mistakes through tests. A person decided what to build, judged how it looked, and pointed at what was wrong. The engine is a detailed showcase, not a certified design: its proportions are plausible, not taken from a real engine's drawings. That division of work, a person with intent and judgement and an agent with patience and precision, is what we are building for.

Our ambition: Bitbybit, ready for agents​

Making a library usable by agents is not one feature. It is a way of maintaining the whole product:

• Every function documented for machines as well as people. The API reference your agent reads is generated from the same source as the libraries, published with every release and addressed by exact version, never by a moving "latest".
• Clear tiers. Every function says where it runs and what it costs, so neither a person nor an agent is surprised.
• Scaffolds that teach agents how to work. New projects come with instructions for the agent, the MCP server configured, and a test it can iterate against.
• Learning from the gaps. The public server records which names agents reach for that do not exist (never your prompts or your code), and we use that to improve the API and its documentation.
• One vocabulary everywhere. The dotted API an agent learns from the free server is the same one it runs on CAD Cloud, the same one in our editors and the same one in the npm packages.

We think the next generation of CAD will be designed in conversation: you describe the product, an agent writes the parametric model on proven geometry kernels, the kernels check the result, and you decide. Bitbybit's job is to make every step of that reliable.

Get started​

1. Connect the free server to your agent: claude mcp add --transport http bitbybit https://mcp.bitbybit.dev/mcp, or see the MCP page for every other host.
2. Ask for something: "Using the bitbybit MCP, make a 10 by 20 by 5 box, fillet its edges by 1 and draw it with three.js."
3. Start a real project with npm init @bitbybit-dev/app and let your agent iterate against its smoke test.
4. When you want the agent to compute geometry for you rather than write code, connect the CAD Cloud MCP.

The Using AI with Bitbybit section has the details. We would love to see what you and your agents build.

Some companies pick a name and then have to live up to it. Gamechanger Furniture builds gaming chairs by hand in northern Germany, and when they decided that every customer should design their own chair - the fabric, the colours, the stitching, their initials embroidered on the headrest, even their own logo - they needed a product page that could keep up with the name. What they launched is, quite literally, a game changer for how a chair gets sold: shoppers put it together in 3D, watch the price follow every choice, see their name appear on the chair, and take a PDF of their design away with them. All of it was built inside the 3D Bits app for Shopify, without a single line of code.

The Client: Gamechanger Furniture​

Gamechanger is a German gaming chair brand. Their chairs are largely handcrafted in a manufactory in northern Germany, from components sourced in Germany and the EU, and come with a five-year warranty. Their promise is that no two chairs need to look alike: three upholstery materials, dozens of colours for every part of the chair, a choice of stitching colour, and embroidery of your initials or your logo on the headrest and the side panels.

That promise is easy to make on a brochure and hard to keep on a product page. A shopper needs to see the chair they are describing, not imagine it from a list of dropdowns. That is where 3D Bits came in.

See It in Action​

Here is the configurator as a shopper sees it on the Gamechanger store: picking materials and colours, switching on the upgrades, typing initials and watching them appear on the chair, and downloading the PDF at the end.

One App for the Whole Configurator​

Readers of our earlier case studies will remember that a 3D Bits configurator used to be a team effort between apps. The 3D scene came from us, the options usually came from Shopify variants or a product options app, and the prices came from wherever those options lived. Some merchants, like Strength Shop, went further and built their own option panel from scratch.

That is no longer necessary. 3D Bits has grown into a complete configurator app. The panel of options your shoppers use, the prices behind every choice, the personalisation, the guided camera, the documents that go with the order - all of it is set up in one place, our visual editor called Composer, and published to the product page with one switch. There is nothing else to install and nothing to code.

Gamechanger is the first case study we are publishing that uses this new, all-in-one setup from end to end. Every part of what you see on their product page was authored in Composer:

• The option panel - four collapsible groups with pills, colour swatches, switches, text fields, font pickers and file uploads
• The prices - a starting price, an amount for each upgrade, and a live breakdown that Shopify charges exactly at checkout
• The personalisation - initials, text and logos projected onto the headrest and the side panels
• The camera - eighteen automatic camera moves that show the shopper whatever they just changed
• The documents - a PDF for the shopper and a separate one for the workshop, generated from the exact configuration

Let's walk through each of them.

The Option Panel, Built in Composer​

The panel a shopper sees next to the chair is arranged in four groups, each one an accordion that opens and closes:

1. Choose your size - S/M, L or XL, presented as pills, with the XL adding to the price
2. Choose your materials and colours - five zones of the chair, each with its own material and colour
3. Upgrades for maximum comfort - padded armrests, polished aluminium, memory foam, lumbar support, gas spring, base and castors
4. Your logo or lettering - front, back, and the two side panels

The materials group is where the real variety lives. The main surface, the appliqués, the outer edge and the back of the chair each get a material choice - fabric, faux leather or real leather - and a colour swatch list that depends on that material. Fabric comes in fifteen colours, faux leather in nineteen (seven of them breathable, at a small extra charge) and real leather in five. Pick fabric and only the fabric colours appear. Pick real leather and the list changes. A nineteen-colour swatch for the stitching completes the group.

That "only show what applies" behaviour is a condition on a control in Composer, and it is the tool that keeps a panel with fifty-three controls from feeling like fifty-three controls. The shopper only ever sees the handful that matter for what they have already chosen.

Every choice is wired to the 3D model. Behind the scenes the chair carries 277 prepared material finishes and 126 textures, and each colour swatch simply tells the model which finish to show on which part. The result is millions of possible chairs, and every one of them renders correctly.

The panel is also full of Gamechanger's own voice. Short texts sit between the options - "81% choose the additional memory foam padding", "people over 193 cm should choose the high gas spring", "we embroider your initials in the stitching colour" - and some of them appear only once the option they explain has been chosen. These are ordinary text elements dropped into the layout, and they turn a form into a sales conversation.

Styled to Match the Store​

The panel's look - a soft grey background, rounded corners, a slight blur, the accordion borders, the heading weights - was set in Composer's Style tab. The add-to-cart button carries Gamechanger's pink-to-purple gradient and pulses when an item is added. The built-in texts that 3D Bits shows on its own ("show price details", "almost done", "your document is being prepared") were translated into German in the Translations tab, so the whole page speaks one language.

Prices That Follow Every Choice​

Gamechanger's chair has a starting price, and most upgrades add to it: the XL size, real leather on any zone, the breathable faux leather colours, padded armrests, the aluminium armrest supports, memory foam, the adjustable lumbar support, a different gas spring, the polished base, lockable castors, and each embroidery.

All of that is authored in the same place as the options. Each option simply has an amount next to it. The price element at the bottom of the panel updates live as the shopper clicks, and can unfold into an itemised breakdown - starting price, then every choice that added something - so the total is never a mystery.

The important part is what happens next. When the shopper adds the chair to the cart, Shopify charges exactly the amount that was shown. Taxes, shipping, discount codes, payment and refunds all stay with Shopify as they always have. 3D Bits decides what the configured chair costs; Shopify collects it. There is no separate pricing app, no spreadsheet of variant combinations, and no risk of the panel saying one number and the checkout another.

Your Name, on the Chair: Projections and Decals​

This is the part of the configurator that makes people stop and play with it, so it deserves a proper explanation.

Gamechanger embroiders initials, short text or a logo onto the front and back of the headrest, and short text onto the left and right side panels. On the product page, the shopper types their letters or uploads their logo - and it appears on the chair, following the curve of the padding, exactly where it will be stitched.

We call these decals, and the way they work is easiest to picture as a small slide projector pointed at the chair. Whatever is on the slide - the letters the shopper typed, the image they uploaded - is beamed onto the surface in front of it. Because it is projected rather than pasted on flat, the artwork wraps around the curved headrest the way real embroidery would, instead of floating in front of it.

In Composer, that projector is a box you can see and drag around the model: where it sits, how big it is, which way it points and how deep it reaches. Get the direction right and the artwork wraps correctly; then a single angle value levels the lettering. The chair has nine of them:

• Front of the headrest - a text decal for initials (up to six characters), an image decal for an uploaded logo, and an image decal that shows the Gamechanger logo itself
• Back of the headrest - the same three
• Left and right side panels - a text decal each, up to eleven characters
• The floor - one more image decal projects the Gamechanger logo onto the ground under the chair, a small branding touch that costs nothing

Only the right decal shows at any moment. Choose "your logo" on the front and the upload field appears with its decal; choose "initials" and the text field and font picker take its place. That is the same condition mechanism the colour lists use.

Eight Fonts, and Stitching That Matches​

Text decals render in real fonts. Eight script and display typefaces were registered once, in the Style tab, and every text field in the panel offers the shopper the same list. Change the font and the lettering on the chair changes with it.

The detail we like most is the colour. Gamechanger embroiders in the stitching colour of the chair, so on the product page the letters and the logo are drawn in whatever stitching colour the shopper picked. Choose red seams and your initials are red; switch to sand and they follow. This is done with a handful of small logic rules in Composer: when the stitching swatch changes, the rule passes the matching colour to the decals. The white Gamechanger logo is recoloured the same way, so even the brand mark is stitched in the shopper's thread colour. What is on screen is what the workshop will make.

Uploaded logos are shown as they are, and a text next to the upload field says that a proof will be sent for approval before anything is stitched. The uploaded file travels with the order, so the workshop has the original.

A Camera That Knows Where to Look​

A chair has a lot of surface, and most of the options change a small part of it. If the shopper picks a castor colour while looking at the headrest, nothing they can see changes and the feature feels broken.

Focals solve this. A focal is a camera move that fires on its own when a shopper does something. This configurator has eighteen of them, roughly one per group of options:

• Change the main colour and the camera settles on the seat and backrest
• Change the appliqués, the outer edge or the back, and it turns to show that zone
• Switch on the padded armrests, or pick their colour, and it swings round to the armrest
• Touch the gas spring, the base or the castors and it drops down to the base
• Toggle the lumbar support or the memory foam and it shows you where they go
• Start typing on the left side panel and it flies there so you can watch the letters appear; the right panel, the front and the back each have their own

A "show the whole chair" button pulls back to the full view, and a reset button restores every option to its default. Alongside these there are seven points of interest - clickable markers for top, side, front, back, seat, armrest and overall view - which the shopper can switch on with a toggle in the corner of the 3D view. A second toggle switches shadows on for a more realistic look.

The effect on the shopper is hard to overstate. They never have to hunt for what changed. They change something and they are shown, every time, and then they are free to spin the chair themselves.

Upgrades That Swap Real Parts​

Not everything is a colour. The memory foam upgrade replaces the seat cushions with thicker ones. The padded 4D armrests replace the hard armrests with upholstered ones that get their own material and top-and-bottom colour choice. The adjustable lumbar support adds its knob to the backrest. Each of these is a part of the 3D model that shows or hides based on the switch in the panel, so the shopper sees the actual thing they are paying for.

The Buy Panel Lives on the 3D View​

One layout decision worth copying: the price and the add-to-cart button do not sit at the bottom of a long list of options. They float in a card over the bottom-right corner of the 3D view, together with the delivery promise, "at your home in 14 to 21 days". A second card in the bottom-left corner holds the small tools - the viewpoint toggle, the shadow toggle and the three icon buttons for the full view, reset and PDF.

These are Composer's areas: parts of the panel that can be placed over the 3D canvas instead of beside it. On a desktop screen the shopper always sees the price and the buy button, however deep they are in the options, while the tools card starts folded away and opens on a tap, so the chair keeps the screen.

Built for Phones​

Most shoppers will meet this chair on a phone, and a layout that works on a wide screen can turn into one long scroll on a small one. 3D Bits handles this on its own. On a phone the page splits in two: the 3D view takes the top of the screen, and the options live in a panel below it that scrolls on its own. The shopper works down through size, materials, upgrades and lettering while the chair stays exactly where it is - it never jumps or shrinks as the panel scrolls, and it can still be spun and zoomed at any point. The two cards that float over the 3D view on a desktop cannot float on a phone, so they join the scrollable part below the panel instead, with the price and the buy button where a shopper expects to find them at the end.

None of this needed configuring. The panel is built once in Composer, and the app adapts it to the screen. The only choice a merchant makes is how much of the phone screen the 3D view should take, and that is set separately for desktop and mobile in the app's display settings - a view that fills three quarters of a laptop screen would swallow a whole phone, so the two get different answers.

Readers of the Strength Shop case study will recognise the pattern - 3D view fixed on top, options scrolling below - which their team built by hand for their custom interface. Here it comes built in.

One PDF for the Shopper, Another for the Workshop​

A chair that costs this much is rarely bought on the first visit. People want to think about it, show it to someone, or compare two versions. So the customer PDF is switched on. One click on the PDF button and the shopper downloads a branded document with a cover, eight rendered pictures of their chair - overall, front, back, both sides, top, and two close-ups taken from the same camera positions the focals use for the seat and the armrest - a table of every choice with its colour swatch and its price, and a price summary.

A second document, the order PDF, is generated when the chair is added to the cart and attached to the order. This one is for the people who make the chair: the product description on the cover, one picture of the configured chair, and a numbered table of every choice with its swatch and the colour code the workshop needs. Prices are left out, because the workshop does not need them. A rendered "configuration preview" image is also saved with the order, so anyone opening it in Shopify sees the chair at a glance.

Finally, every configuration can be shared as a link - uploads included - so a shopper can send their exact chair to a friend, or come back to it a week later. Try it yourself, click this link

What Gamechanger Says​

Key Takeaways​

Gamechanger's configurator shows what a merchant can build today with 3D Bits alone:

1. Everything in one app - the option panel, the prices, the personalisation and the PDFs were all set up in Composer, with no options app, no pricing app and no custom development
2. Conditions keep a big panel small - fifty-three controls, and the shopper only ever sees the ones that apply to what they have chosen
3. Projected decals sell personalisation - initials and logos wrap onto the headrest the way embroidery does, in the thread colour the shopper picked, so the screen matches the finished chair
4. Focals do the guiding - eighteen automatic camera moves mean the shopper is always looking at the part they just changed
5. Two PDFs, two audiences - a branded document the shopper takes away, and a production document the workshop works from
6. Shopify stays Shopify - the configured price is charged exactly at checkout, and shipping, tax, discounts and payment are untouched

Ready to Build Your Own Configurator?​

If you sell products that customers want to make their own, 3D Bits can give them the page Gamechanger's shoppers have. Personalisation, PDF documents and parts lists are part of the Pro plan, which also includes hands-on help from us when you set up your first configurator. Guided camera moves and points of interest start on the Standard plan, and the option panel with live pricing is included on every plan.

Interested in exploring what's possible? Reach out to us.

Get started with 3D Bits

In April 2026 Bitbybit travelled to Hannover, where Matas Ubarevičius delivered the presentation titled "The Browser Is the New CAD: From Code to Configurable Products" at Hannover Messe, the world's leading trade fair for the manufacturing industry. The talk was accepted by CAE-Forum for their curated presentation stage and featured in their newsletter. In this blog post he shares his experience from the event and explains why this discourse matters for the manufacturing industry today.

Open the Live Presentation​

The full Hannover Messe 2026 presentation runs as a browser app. Press Start Script below to load it inline, or use the Fullscreen button in the embedded toolbar to view it edge-to-edge.

The Browser Is the New CAD - Hannover Messe 2026 Presentation

Enter Presentation

A Strange Thing Happened to CAD​

For most of its history, CAD lived in a very specific place: on a powerful workstation, behind a license dongle, operated by someone with years of training and a deep mental map of menus, modifiers, and shortcuts. That world is not going away. The engineers, architects, and product designers who shape our physical reality still need professional desktop tools, and they will continue to need them for the foreseeable future.

But something quieter has been happening in parallel, and at Hannover Messe 2026 I had the opportunity to talk about it directly to the people who care most: the manufacturers, technology leaders, and industrial innovators who already know how hard it is to translate engineering intent into something a customer can actually use. The official talk page is still on the Hannover Messe site. I am grateful to CAE-Forum, who curated the presentation stage and selected this talk to be featured in their newsletter.

The shift is this. The browser has quietly become capable enough to be a serious CAD environment. Not a viewer. Not a thin client streaming pixels from a server. An actual environment where geometry is created, modified, evaluated, and rendered - in real time, on a device almost everyone already owns, behind a URL anyone can open.

That single change has consequences that ripple through how products are sold, configured, manufactured, and supported. And it is what the entire talk was built around.

Who This Talk Was For​

Hannover Messe is not a CAD conference. It is the world's leading trade fair for the manufacturing industry, and the crowd reflects that: people who build machines, run factories, integrate systems, and ship physical products at scale. The motto of the 2026 edition was "Think Tech Forward," and the program leaned heavily into industrial AI, automation, energy infrastructure, and digital manufacturing.

In that context, "CAD for everyone" is the kind of phrase that can earn an eye-roll from a room full of experts - and rightly so. Real engineering is not democratized by sliders and dropdowns. There are tolerances, materials, load paths, regulations, and edge cases that cannot be hidden behind a friendly UI without consequences.

So the talk was not about handing professional CAD to amateurs. It was about something more useful: how to take the parametric expertise that already exists inside a company and project it outward, into the hands of customers, dealers, sales teams, and end users - without losing control of the engineering intent behind it.

Most industrial companies recognize that problem immediately. They have configurators, product variants, CPQ systems, order forms, PDFs full of options. What they often do not have is a way to let a customer see and manipulate the actual product they are buying, in 3D, in the browser, bound to the same rules their engineers already use.

Opening With the Demos​

Rather than build up to the demos slowly, I opened the talk with them. Before any architecture diagrams, before any platform pitch, I wanted the audience to see what browser-based, configurable CAD actually feels like when it is solving a real commercial problem. Each demo was chosen to illustrate a different shape of that problem.

The Shim Shack - real-time CAD kernel in the browser​

The Shim Shack is a real-time, CAD-kernel-driven configurator running fully in the browser. Every change a user makes flows through an actual geometry kernel and produces a precise, manufacturable result on the spot - with STEP and DXF export at the end. This is the case where the browser is doing serious CAD work, not just visualization.

Strength Shop - 3D Bits for Shopify, tuned for modular products​

Strength Shop illustrates something quite different: a 3D Bits for Shopify experience, built with Bitbybit's no-code editor and tuned for modular, performant products that need to feel native inside an e-commerce flow. The goal here is not to expose a full kernel - it is to deliver a fast, beautiful, conversion-friendly configurator embedded directly into the webshop.

Stock MHS - a fully custom configurator for internal sales​

Stock MHS sits at yet another end of the spectrum: a fully custom configurator built and tuned to support internal sales processes. The interface, the rules, and the workflow are all shaped to how a specific team sells, quotes, and hands work over to production - the configurator is part of their operational toolchain, not a public storefront feature.

Three demos, three very different problem shapes, one underlying platform. That contrast was the point. Browser-based CAD is not a single product category; it is a foundation flexible enough to power a quick Shopify add-on and a deep, customer-specific sales tool.

Extend, Do Not Replace - Usually​

The framing I used to tie those demos together is this: we are extending CAD, not replacing it.

Professional desktop tools remain the place where complex parametric logic, manufacturing detail, and engineering judgment are encoded. They are excellent at this and, even as AI becomes more capable inside them, they will keep needing to be understandable to humans - because the people accountable for the engineering still need to read, review, and trust what is being produced. AI accelerates the expert; it does not relieve them of the need to comprehend what is on the screen. That constraint is not going away.

What the browser adds is a second surface - an outward-facing one - where the parametric logic encoded by experts can be consumed by people who do not need to (and should not have to) understand it.

In this model:

• The expertise stays with you. Engineers still own the rules, the constraints, the families, the manufacturing data.
• The interface becomes approachable for your customers. What ends up in the browser is a carefully chosen subset: the parameters that matter to the buyer, the visual feedback that helps them decide, and the validation that prevents them from configuring something you cannot make.

That said, "extend" is the common case, not the universal one. Modern CAD kernels running in the browser and in the cloud are powerful enough that, in some projects, they genuinely replace parts of the traditional pipeline - generating parametric models end-to-end without a desktop tool in the loop at all. That is not necessary for most use cases, but it is on the table for more complex applications where it makes sense, and we have shipped projects where it does.

Where These Configurators Actually Live​

A common misunderstanding about browser-based CAD is that it produces standalone tools - little 3D playgrounds that live on their own subdomain and do not connect to anything important. In practice the opposite is true. The configurators shown during the talk live exactly where commerce and operations happen:

• Inside e-commerce platforms and webshops, where the 3D model is part of the buying flow.
• Inside ERP and PIM systems, so the configured product maps directly to a SKU, a BOM, and an order.
• Inside service portals and dealer tools, so partners can configure on behalf of customers using the same engine.
• Inside internal sales applications, so quoting and visualization are no longer disconnected.

A configurator that updates the cart, the price, the lead time, and the production order is not a demo. It is infrastructure.

Client-Side and Server-Side, Together​

Can the browser really do all of this? The browser alone, sometimes. The browser plus the cloud, almost always.

The architecture I walked through is deliberately hybrid:

• Client-side, the browser handles interaction, visualization, real-time geometry updates, and immediate feedback. When a user drags a slider, rotates the model, or toggles an option, they should not be waiting on a network round-trip. WebGPU, WebAssembly, and SharedArrayBuffer-driven multithreading make this responsiveness possible even for non-trivial geometry.
• Server-side, heavier computation runs where it belongs. This is what Bitbybit CAD Cloud is for: long-running geometry computations, large parametric assembly generation, complex boolean operations, mesh preparation for manufacturing, and any workload that depends on data the browser should not have direct access to. Those jobs are offloaded to scalable cloud workers and streamed back as results.

The point is not to pick a side. It is to put each piece of work where it makes sense, and make the boundary invisible to the end user. From their perspective, they are using a fast, capable 3D tool in a tab. Behind the scenes, the system is quietly deciding what to compute locally and what to delegate to CAD Cloud, and scaling the remote side up or down based on demand.

This is what makes it realistic to serve thousands of concurrent users without compromising on either performance or fidelity - and what makes the same underlying platform suitable for everything from a Shopify-embedded configurator to a heavy internal engineering tool.

What Makes This Possible Now​

It is worth pausing on why this is achievable in 2026 specifically. Several independent curves had to cross:

• WebAssembly matured to where CAD kernels and geometry libraries that used to require native binaries now run in the browser at near-native speed.
• WebGPU gave browsers direct, modern access to the GPU, closing most of the visual gap between web and desktop 3D.
• Browser-based CAD kernels - including ports of well-known geometry engines - became stable enough to power production applications, not just demos.
• Cloud compute became cheap and elastic enough that the server side of the hybrid architecture is just an implementation detail.
• Modern frontend frameworks and 3D engines made it practical to build configurators that feel like first-class applications.

None of these on their own would be enough. Together, they make browser-based CAD a genuinely viable layer in an industrial software stack.

Where Bitbybit Fits In​

The platform behind every demo in the talk is bitbybit.dev.

Bitbybit is built for developers and CAD professionals who want to bring advanced geometry and parametric workflows to the web. It combines an open-source core with proprietary apps and cloud services, and it exposes that capability through three complementary surfaces:

• Visual programming, for people who think in nodes and flows and want to assemble parametric logic without writing code.
• TypeScript, for developers who want full control, version-controlled scripts, and integration with the rest of their stack.
• No-code interfaces, for the end-user side of the equation - the configurators themselves, where the underlying complexity is hidden behind clean, purpose-built UI.

Parallel to all that sits Bitbybit CAD Cloud, which carries the heavier loads: long-running geometry computations and parametric assembly generation that would be impractical to run entirely in a browser tab.

The same geometry engine runs across all of these surfaces. A model authored visually can be wrapped in TypeScript, deployed into a webshop, served through the cloud, and exposed to AI agents without doing heavy rewriting on the underlying logic at each step. The same algorithms are accessible throughout the ecosystem.

Where AI Actually Helps Today​

AI shows up in this picture in two distinct places, and it is worth being precise about which is which.

The place where it already pays off is on the building side. Bitbybit exposes AI agent prompt contexts that let coding agents work against its API directly - so developers building configurators can let an AI assistant write, refactor, and extend Bitbybit code with real awareness of how the platform actually works. This meaningfully shortens the path from "we want a configurator that does X" to a working prototype.

The other place AI will matter is on the design side - actually shaping the parametric product itself. That is still finding its footing, and an expert needs to stay close to the loop while it does. What is already clear, though, is the second-order effect: as agents make it easier to build configurators and generate parametric models, the volume of geometry that needs to be computed, assembled, and served goes up sharply. That is exactly where Bitbybit CAD Cloud comes in - and where we see our own future. The configurators still have to be meant for humans at the end of the line, but the compute behind them is going to need a lot more room to run.

Why This Matters for Manufacturing​

For the Hannover Messe audience, and for the wider CAE-Forum readership, the practical takeaway is this. The companies that figure out how to expose their parametric expertise through the browser, safely and at scale, are going to have a structural advantage in how they sell and support configurable products.

That advantage shows up in several places at once: shorter sales cycles, because customers can self-configure with confidence; fewer errors, because the configurator enforces the same rules as the engineers; better data, because every configuration is captured as structured input; stronger customer relationships, because the buying experience itself becomes a tool customers actually want to use; and more leverage from engineering, because the parametric work done once gets reused across web, sales, and production. The pipeline behind all of this has to stay deterministic, though - hallucinated products cannot be manufactured.

None of this requires abandoning the desktop tools that already work. It requires building a thin, well-designed layer on top of them - and putting that layer where the customer already is, which is the browser.

The shift worth paying attention to is not that engineering becomes easier. It is that the value of engineering becomes visible and usable in places it has never quite reached before. Configurators are unforgiving about gaps in logic, and that turns out to be a useful side effect: they push teams to enforce standards and structure their workflows whether they planned to or not. The browser is not replacing CAD. It is extending its reach - and, where it makes sense, quietly taking on parts of the job itself.

My thanks to CAE-Forum for featuring this talk in their newsletter, and to everyone who stopped by at Hannover Messe 2026 to continue the conversation. For questions or to discuss a configurator project, get in touch.

After nearly 100 releases in the 0.x.x range and a release candidate phase, Bitbybit v1.0.0 is officially here. This release brings our new CAD foundation, cloud infrastructure, and an expanded toolkit for developers.

This post outlines the major architectural changes and new capabilities available across our NPM packages, TypeScript SDK, Bitbybit Studio, and the Managed CAD Cloud.

Check out this in-depth dive into Bitbybit platform. Matas shows how various parts of Bitbybit can be used in your websites.

Native OCCT 8 Kernel​

The biggest change in v1.0.0 happens under the hood. We have transitioned away from our OpenCascade.js dependency and rebuilt Bitbybit's core directly on top of the native OCCT C++ library. By compiling directly to WebAssembly with bindings customized for Bitbybit, we've improved overall performance and maintainability.

Powered first by OCCT v8.0 (Release Notes from April 8'th 2026), this new kernel provides clear performance improvements in boolean operations and filleting, and ensures the architecture remains fully under our control.

To accommodate different deployment needs, Bitbybit now offers three WebAssembly builds:

• 32-bit: Compatible with mobile browsers and older hardware.
• 64-bit: Handles larger models with up to 16 GB of memory allocation.
• 64-bit multi-threaded: Designed for higher throughput and parallel operations.

You can select your preferred variant when scaffolding a project via npx @bitbybit-dev/create-app.

STEP Assembly Support​

Bitbybit can now handle assemblies natively in the browser, preserving part hierarchies, positioning data, and colors.

The expanded occt.assembly module is split into two workflows:

Assembly Management: Construct and export documents. Group shapes, assign names and colors, and position instances using translation, rotation, and scale. Import existing STEP files (including compressed STEP-Z), modify their structures, and export them back with colors preserved, or convert them directly to GLTF/GLB formats for web and AR applications.

Assembly Querying: Inspect your assemblies. Extract the complete hierarchy tree, isolate specific shapes by label, retrieve transforms, and parse metadata.

Learn How To Create Assembly

We've also added three IO methods:

• convertStepToGltf: One-call conversion preserving hierarchy, colors, and transforms.
• convertStepToGltfAdvanced: Conversion with fine-grained meshing and export controls.
• parseStepToJson: JSON inspection without full geometry processing.

A brief note on colors: Standard STEP exporters frequently strip visual data. Bitbybit uses OCCT's XCAF framework to embed color information, so models exported from Bitbybit retain their appearance when imported into tools like FreeCAD.

The Managed CAD Cloud​

While Bitbybit remains browser-first, enterprise deployments often require server-side computing. The Managed Bitbybit CAD Cloud provides a RESTful API designed to offload heavy geometry computations to our server infrastructure.

The CAD Cloud is the ideal solution if you want to avoid bundling heavy CAD libraries into your website, need to execute complex parametric scripts that take a long time to compute, or are looking to process batches of CAD operations in parallel.

Importantly, all Bitbybit algorithms - from the base and OCCT packages to other libraries - are available on our managed CAD Cloud. Because it provides a standard REST API, it can be seamlessly called from any backend programming language. You can execute parametric algorithms on the server, manage your API keys, and receive the results to your backend. This infrastructure is now production-ready and handles active workflows.

Furthermore, when custom pipelines are not enough, enterprise customers can contact us to implement and run custom tenant workflows on our managed infrastructure.

The CAD Cloud TypeScript SDK​

To help integrate the cloud capabilities into your backend, we're introducing @bitbybit-dev/cad-cloud-sdk. This standalone npm package connects your TypeScript infrastructure to our engine.

Key coverage areas include:

Pipelines​

The SDK lets you chain multiple CAD operations into single request. Reference prior outputs ($ref:N), inject external data ($file:N), iterate over collections (map), and use logic branching (choice). Build pipelines programmatically or design them visually in Bitbybit Studio.

Client-Side Validation​

Requests feature built-in JSON Schema validation. The SDK catches parameter errors before leaving your server, returning a BitbybitValidationError to save API round-trips.

(Ready-to-use backend examples are provided for Hono, Express 5, and ASP.NET Core).

Bitbybit Studio​

Bitbybit Studio is your homepage and playground for the CAD Cloud API. It's a place to experiment with parametric models, STEP file conversions, and CAD pipelines - capable of composing serious workloads, using your STEP and other file types as inputs. Generate production-ready models, fine-tune conversion settings, chain multi-step operations, manage tasks, and preview results in 3D - all from your browser, without writing code or making raw API calls.

Studio now also functions as an interactive pipeline builder. You can design multi-step workflows visually and deploy them to the API. For example, the images below illustrate a custom pipeline that creates a box, translates it in space, models a union between the original and the translated box, and finally applies a fillet to the edges of the resulting shape.

Upgraded Rendering Engines​

We have updated our 3D engine integrations to their latest major releases:

• BabylonJS 9.6.0: A major update delivering significant performance improvements.
• Three.js 0.185.0: Updated to the latest ecosystem standards.
• PlayCanvas 2.20.0: Enhanced integration for web experiences.

Additional Features​

• Secure Arithmetic Evaluator: Safe string expression evaluation (e.g., (3+2)*4) via the shunting-yard algorithm, without using eval().
• Advanced Spirals and Primitives: Generate springs and volumetric features with createTaperedHelixWire, createHelixWireByTurns, createFlatSpiralWire and our new Torus solid geometry.
• Custom CDN URL Propagation: Maintain control over WebAssembly loading for self-hosted deployments using the cdnUrl flag.
• Standalone Conversion Runner: A lightweight HTML example for converting STEP files to GLB without a rendering engine.

Breaking Changes​

• Zero-Based Edge Indexing: Edge indexing now begins at 0 instead of 1. Existing code referencing edges by index will need updating.
• Direct WASM API Adjustments: The low-level OCCT WASM API has changed significantly. Use the official @bitbybit-dev/occt-worker or engine-specific packages for stability.

Published Packages​

• @bitbybit-dev/base
• @bitbybit-dev/occt
• @bitbybit-dev/occt-worker
• @bitbybit-dev/manifold-worker
• @bitbybit-dev/jscad-worker
• @bitbybit-dev/core
• @bitbybit-dev/babylonjs
• @bitbybit-dev/threejs
• @bitbybit-dev/playcanvas
• @bitbybit-dev/cad-cloud-sdk (New)
• @bitbybit-dev/create-app

Getting Started​

Try Bitbybit v1.0.0 today. Scaffold a project with your choice of engine and OCCT build:

npx @bitbybit-dev/create-app my-project

Or inject the new Cloud SDK into your existing backend:

npm install @bitbybit-dev/cad-cloud-sdk

For tutorials, API references, and example repositories, visit our Learning Center and API Reference.

Demand for customizable products that don't need to be redesigned from scratch for every unique customer or situation is growing across the manufacturing industry. STOCKMHS recognized this early and created the modular EZ~FLO 2.0 Chute System (Patent Pending), which gives their team the freedom to adapt a proven product to any situation. Through our collaboration, we built a browser-based 3D configurator that serves as a digital twin for the entire spiral chute product line - letting the sales and engineering teams explore configurations, generate bills of materials, and produce branded PDF reports without ever leaving their browser.

The Client: STOCKMHS​

STOCKMHS (Stock Material Handling Systems) is a United States-based company headquartered in Ohio that has been manufacturing conveyor systems, chutes, and other material handling solutions for more than 50 years. Their philosophy sounds straightforward - apply innovation so that quality and speed don't come at a huge cost to customers - but executing on that idea consistently is what makes them competitive.

The EZ~FLO 2.0 UHMW spiral chute is a perfect example of this mindset. Instead of engineering a one-off chute for every installation, STOCKMHS invested in making the product modular and configurable from the start. The spiral widths, pitch, entry and exit heights, rotation, terminal orientation, and handing direction can all be adjusted to suit different warehouse and production floor layouts. This means engineering time is dramatically reduced for each order, products don't need to be redesigned from the ground up, and the sales team can respond faster to inquiries. Combining quality with affordability becomes much more realistic when this kind of smart product design is in place.

Why Build a 3D Configurator?​

Another important part of this process is understanding how the product actually behaves once all those parameters come together - but that's hard to do without the right tools. Designing flexibility into a modular product is not straightforward. The key question engineering teams need to answer is how much flexibility the product should support. Offer too many options and the product becomes very difficult to maintain and manufacture. Offer too few and you still end up falling back to custom designs for every other project.

Digitizing the process by building an actual digital twin takes the guesswork out of this equation. The design and sales teams get immediate visual and practical feedback from the 3D configurator, which helps them understand the product's design space better - what works, what looks right, what combinations might cause issues. A configurator like this can be used to discuss ideas with stakeholders, validate configurations on the spot, and move internal conversations forward faster.

For STOCKMHS, the configurator needed to be more than a 3D viewer. It had to function as a professional internal tool - one that the team could use to configure and document a spiral chute from start to finish.

Runs Entirely in the Browser​

One of the defining decisions for this project was to build the entire configurator as a client-side web application. There is no backend server required for any of the core functionality. Everything - the 3D rendering, the parametric geometry, the BOM calculations, the PDF generation - runs entirely in the browser.

The application is also installable as a standalone app with full offline support, meaning it can be used anywhere - on the factory floor, in a meeting room, or at a trade show - without needing a reliable internet connection.

Parametric Spiral Geometry in Real Time​

At the heart of the configurator is the parametric spiral geometry engine. When a user adjusts any parameter - width, drop per panel, entry height, exit height, terminal configuration, or handing direction - the entire spiral is recomputed and redrawn in real time.

The system works with a set of predefined spiral widths (24", 30", 36", 42", and 48") and two pitch options (3" and 4" drop per panel). Entry and exit heights can be set independently up to 600 inches, and the rotation is automatically calculated based on the available vertical drop. The configurator snaps the rotation to valid increments that match the selected terminal configuration (A, B, C, or D), each corresponding to a different exit angle - 90°, 180°, 270°, or 360°. Left-hand and right-hand spiral orientations are both supported and switch the entire assembly accordingly.

What makes this more than a simple slider-driven preview is the engineering math running underneath. The system calculates the vertical drop for a given rotation using pitch-specific gain-per-degree formulas, determines the optimal rotation from target heights, and snaps that rotation to the nearest valid configuration. If the available drop between entry and exit isn't sufficient for the minimum rotation required by the chosen terminal config, the viewer flags the configuration as invalid rather than rendering something that couldn't be built.

High-Fidelity 3D Models​

The configurator doesn't just show abstract geometry - it renders the actual chute assembly with realistic materials and proportions. We prepared detailed 3D models in Blender for each combination of width, pitch, and handing direction, paying close attention to the visual quality of the surfaces. The galvanized steel arms and structural components have a convincing metallic finish with natural reflections, while the black UHMW-PE slide panels are clearly distinguishable with their matte surface. Different materials - the painted center post, the galvanized supports, the polyethylene chute segments - are easy to tell apart at a glance, which helps the team quickly assess a configuration and communicate it to others.

As the spiral geometry updates in response to parameter changes, the 3D assembly follows - entry sections, intermediate arms, exit terminals, base plates, and top caps all move into their correct positions along the spiral path. Even for tall configurations with dozens of segments, the viewer stays responsive and smooth. The 3D models are optimised and compressed, so the entire asset library loads quickly without compromising visual quality.

The viewport itself supports orbit controls for free rotation, preset camera angles (top, front, right, back, left), and a fullscreen mode for focused inspection. Dimension callouts - entry height, exit height, extension delta, total height, width, and depth - are drawn directly in the 3D scene as labeled measurement lines, giving precise spatial context without leaving the viewport.

Automatic Bill of Materials​

Every time the configuration changes, the application recalculates a complete bill of materials. The BOM includes the center post weldment, the primary entry assembly, intermediate UHMW panel support assemblies, the terminal exit assembly, and UHMW-PE slide segments. Each line item gets an automatically generated part number following STOCKMHS's naming convention - encoding width, pitch, direction, rotation, and elevation into a structured format.

The architecture is designed to support rule-based pricing in the future, so that cost estimates can update instantly as parameters change - giving the team immediate visibility during the configuration process.

The BOM is displayed in a dedicated sidebar on desktop and as a slide-in drawer on mobile, with each line item rendered as a card showing the part number, description, material, and quantity. Users can export the full BOM and configuration as JSON for integration with third party procurement or ERP systems.

Branded PDF Reports​

Once a configuration is finalized, the save workflow guides the user through a multi-step dialog. They enter project details - name, email, company, phone, planned installation date, and any notes - and the system captures screenshots of the 3D model from multiple orthographic views: front, back, left, right, and top, plus a close-up perspective shot.

The resulting PDF is a polished, multi-page engineering document branded with STOCKMHS's identity. It includes a cover page, a configuration summary with all spiral parameters, the full BOM table, annotated 3D views of the chute assembly, and project metadata. Headers carry STOCKMHS contact information and the "Fabricating the Future" tagline. Footers include the generation date and confidentiality notice.

The PDF downloads as a file and can be shared with clients or other stakeholders. This gives the team a way to configure a chute, generate a professional-looking document, and share it immediately - whether that's with a colleague, a stakeholder, or during a presentation.

Shareable Deep Links​

Every configuration parameter is synced bidirectionally with the browser's URL. When a user adjusts the width, pitch, heights, terminal config, or handing direction, the URL updates in real time. This means any configuration can be shared as a simple link - paste it into an email or a message and the recipient opens the configurator with exactly the same settings.

This is a small feature in terms of implementation, but it has a big impact on how the team collaborates around configurations. Someone can tweak a spiral setup, copy the URL, and send it to a colleague for review without needing to export files or schedule a screen share.

Works Offline, Anywhere​

Because the configurator may be used in environments where internet access isn't guaranteed - factory floors, warehouses, trade show booths - the application is built to work offline. It can be installed on any device as a standalone app and functions fully without a network connection once the initial assets are cached.

All core functionality - 3D visualization, parametric configuration, BOM generation, and PDF export - works offline. This makes the tool practical wherever it's needed, not just at a desk with a stable connection.

Live at MODEX 2026​

The configurator had its public debut at MODEX 2026 in Atlanta - one of the largest supply chain and material handling trade shows in the world. STOCKMHS showcased it in their beautifully designed booth, where the team used it to walk visitors through different spiral chute configurations in real time - adjusting parameters, showing how the assembly changes, and demonstrating the product's flexibility on the spot.

Seeing the tool used in a live trade show environment was a strong validation of the concept. The STOCKMHS team used it naturally throughout conversations, spinning the 3D model, changing widths and heights, and letting the configurator answer questions visually that would otherwise require lengthy explanations or static drawings. It turned what would normally be a brochure conversation into an interactive, hands-on product demonstration.

What This Project Demonstrates​

This collaboration with STOCKMHS reinforces a pattern we see across many of our projects: when a product is modular and configurable, a well-built 3D configurator becomes a force multiplier for the entire business. It helps the sales team communicate product options more effectively. It reduces engineering back-and-forth because configurations are validated before they reach the shop floor. And it gives the design team a feedback loop - a way to test the boundaries of their modular system and understand where the flexibility works and where it might need refinement.

Building the configurator as a fully client-side application with no backend dependency made it simpler to deploy, easier to maintain, and more reliable in the field. Modern browsers are more than capable of handling professional engineering workflows - real-time 3D rendering, parametric geometry, document generation - entirely on the client side.

Ready to Build Your Own Configurator?​

Every project is different, and we work closely with each client to find the right approach - from the technology stack to the level of parametric control to the integration with existing systems.

Interested in exploring what's possible? Reach out to us.

Learn more about Bitbybit

How do you sell a modular power rack online when every customer wants a different combination of uprights, crossbars, pull-up bars, and accessories - and needs to see the result before committing? Strength Shop answered that question by building a fully interactive 3D configurator powered by 3D Bits, with a completely custom user interface designed and developed by their own team.

The Client: Strength Shop​

Strength Shop is a leading gym equipment company that was incorporated in Edinburgh, Scotland and soon after opened their headquarters in Berlin, Germany. This dual presence laid the foundations for them to become a top brand serving the European Union market with innovative, high-quality products - including the modular Riot MRR 75 Power Rack featured in this case study.

Close Collaboration From Day One​

Building a 3D product configurator involves many moving parts - web integration, 3D expertise, asset preparation, a working understanding of boolean logic, and often parametric design thinking. From experience, clients who are open to collaboration and willing to lean on guidance tend to launch their configurators faster and with fewer headaches. Strength Shop was exactly that kind of partner. From the very first conversation, the collaboration was trust-based - ideas flowed freely and decisions were made quickly, without wasting anyone's time.

Bitbybit developed this configurator in close collaboration with Strength Shop. As a Pro plan subscriber of our 3D Bits app for Shopify, they took advantage of the hands-on support that comes included with the plan for setting up the first configurator. But the collaboration didn't stop at configuration logic.

On top of the included Pro plan support, Strength Shop commissioned our 3D model preparation services to convert, set up and optimise their CAD models for the web. Working in Blender, the assembly was built with careful attention to material variants, textures, and GPU-based optimisations. The result: the total weight of all 3D assets you see in the video below is just ~4 MB. That ensures the configurator loads fast, performs well even on mobile devices, and runs smoothly as customers interact with it.

A Fully Custom User Interface​

3D Bits typically integrates seamlessly with standard Shopify variants and popular third-party option apps. But Strength Shop had a different vision. Due to their unique sales pipeline and product complexity, they decided to develop their own user interface system, pricing logic, and checkout flow from scratch.

When they asked whether 3D Bits could interpret and communicate with a fully custom-built UI, the answer was yes - as long as their developers followed the web standards and HTML input guidelines outlined in our documentation. 3D Bits is designed to listen for changes on standard HTML inputs (<input>, <select>, etc.), which means any front-end framework or custom implementation can drive the 3D scene without special adapters.

Custom Buttons, Indicators, and Interactions​

Strength Shop's developers went well beyond basic dropdowns. They crafted a polished, brand-consistent UI with:

• Custom-styled option buttons that match Strength Shop's design language, giving customers a clean, intuitive way to toggle between rack configurations, accessory packages, and color options
• A custom 360° rotation indicator - their own visual cue that encourages customers to interact with the 3D model, spin it around, and explore the rack from every angle
• Smooth transitions and hover states that make the configurator feel like a native part of their store rather than an embedded third-party widget

This is a great example of what's possible when a merchant's development team takes ownership of the UI layer while 3D Bits handles the heavy lifting of 3D rendering, assembly logic, and variant switching behind the scenes. The integration was seamless - after Strength Shop developed their interface, it was simply a matter of ensuring their input names pointed to the correct geometry nodes, activating the right logic gates in 3D Bits. The configurator was ready to ship.

Because the entire front-end is theirs, Strength Shop has full control over the product page going forward. They can redesign the layout, add new options, adjust the checkout flow, or restyle the configurator whenever they want - without waiting on a third party or being locked into someone else's component library. The 3D layer stays connected through standard HTML inputs, so as long as those conventions are followed, the UI can evolve freely.

Mobile-First Layout​

Strength Shop's mobile layout is a great reference for anyone building a 3D configurator. The screen is split into two clear zones: the 3D viewport stays fixed at the top, while all configuration options sit in a scrollable panel below. This means customers can freely rotate, zoom, and inspect the rack without the view jumping or resizing as they scroll through options. The 3D model remains stable and fully interactive at all times, even as the options list extends well beyond the visible area. It's a simple pattern, but it makes a big difference - especially for a complex product with many configuration choices.

Dynamic Dimensions: See the Real Size​

One of the standout features Strength Shop took advantage of is our Dynamic Dimensions capability, available on the Pro plan. This feature automatically scans the complete bounding box of the current assembly and displays its real-world dimensions - height, width, and depth - directly in the 3D viewport.

As customers add or remove components, the displayed dimensions update in real time to reflect the actual size of their configured rack. This gives shoppers a clear, immediate understanding of how much space the rack will occupy in their gym - no guesswork, no tape measure needed. For a product that can stand over 2 meters tall and vary significantly depending on the chosen configuration, this kind of spatial awareness is invaluable.

From CAD to Web: Optimised for Performance​

Like many manufacturers, Strength Shop's original models came from professional CAD software. These models are built for engineering precision, not web performance. Translating them into fast-loading, visually rich 3D assets required careful optimisation.

The full conversion pipeline included:

• Mesh optimisation - Reducing polygon counts while preserving the visual detail that makes the rack look convincing
• Material variants - Setting up colour and finish options efficiently in Blender so they can be switched at runtime without loading separate models
• Texture optimisation - Compressing textures to strike the right balance between visual quality and file size

The end result is a complete, configurable power rack assembly that weighs in at roughly 4 MB total - light enough to load quickly on any connection while still looking sharp and realistic.

Realistic Materials That Sell​

A configurator only builds buying confidence if the product on screen looks like the real thing. That's why special attention was paid to the materials. The steel uprights and crossbars have a convincing metallic finish with reflections that react naturally to the lighting environment. Different surface types - matte powder-coat, polished chrome on J-hooks - are clearly distinguishable at a glance, helping customers understand exactly what they're getting. All of this is achieved with carefully authored PBR (Physically Based Rendering) materials that keep the file size low while the visual quality stays high.

What Strength Shop Says​

Key Takeaways​

Strength Shop's configurator demonstrates several important points for merchants considering 3D product experiences:

1. Custom UI is fully supported - 3D Bits doesn't force you into a predefined interface. If your team has the front-end skills, you can build any UI you want and have it drive the 3D scene through standard HTML inputs
2. Optimisation is everything - A complete modular rack assembly at ~4 MB proves that complex products can load fast when models are properly prepared
3. Dynamic Dimensions build confidence - Showing real-time physical dimensions helps customers understand exactly what they're buying, reducing returns and support questions
4. Pro plan includes hands-on support - Guidance during the setup of your first configurator is included, so you're not figuring everything out alone. Additional services like 3D model optimisation are available separately for an extra cost

Ready to Build Your Own Configurator?​

If you're selling configurable products on Shopify, 3D Bits can power the experience your customers deserve. The Pro plan includes direct access to Bitbybit for hands-on support when setting up your first configurator, plus features like Dynamic Dimensions. Need help with 3D model optimisation or custom setup beyond the first configurator? We offer additional services tailored to your project's needs.

Interested in exploring what's possible? Reach out to us.

Get started with 3D Bits

How do you let customers design their own precision-cut metal parts online - with exact dimensions, real manufacturing constraints, and instant visual feedback? That was the challenge facing The Shim Shack. Through our collaboration, we delivered a suite of parametric 3D configurators that run directly inside their existing WordPress store. You can try them yourself at buildyourparts.theshimshack.com.

The Client: The Shim Shack​

The Shim Shack is a United States based manufacturer specializing in custom shims, brackets, spacers, washers, mounting plates, and other precision metal parts. They laser-cut every piece to exact specifications - any dimension, any configuration, any tolerance their customers need. Their Build Your Parts portal lets customers design and order custom shims online.

The parts they produce may seem small, but they solve critical problems in industries where precision tolerances matter. When a fraction of a millimeter determines whether machinery runs smoothly or fails, the right shim makes all the difference.

We paid close attention to the visual presentation. Shadows give a convincing sense of depth even from a top-down perspective, and metallic reflections bring the geometry to life - making the parts feel tangible rather than flat. We also added points of interest for Side View, Tilted Front, and Top View, each with smooth animated transitions, so customers can inspect the model from the most useful angles without having to navigate the 3D scene manually.

The Challenge: Parametric Geometry for Custom Manufacturing​

Unlike typical e-commerce products, shims aren't picked from a catalog. Every customer needs different dimensions - different thicknesses, diameters, slot widths, hole positions. The geometry must be generated on the fly, validated against real manufacturing constraints, and presented clearly enough that anyone can use it.

That meant we needed fully parametric 3D models, produced in real time from customer inputs rather than assembled from static assets. Every configuration had to be checked for producibility before it could be ordered. The configurators had to live inside the existing WooCommerce store without disrupting what was already there. And customers needed to walk away with professional STEP and DXF files they could take straight into their own CAD workflows.

Why Bitbybit Runner Was the Right Fit​

From the very beginning, we identified that our Runner technology was the ideal foundation for this project. Runner allows Bitbybit scripts to be embedded and executed on any website - including WordPress with WooCommerce.

The beauty of this approach is that we could preserve The Shim Shack's existing infrastructure entirely. There was no need to migrate away from WordPress or rebuild the storefront. Instead, we layered 3D capabilities on top of what already worked - each configurator running as a self-contained script inside their product pages, easy to update and maintain independently. This saved significant time and let us focus entirely on what mattered most: building a great configurator experience.

Parametric Design Powered by OCCT​

This project is fundamentally different from some of the other case studies, where configurators combine pre-made glTF assets representing modular parts. The Shim Shack configurators don't assemble static models - they generate geometry from scratch based on user inputs.

This is made possible by Bitbybit's CAD layer, built on the OpenCascade (OCCT) kernel - the same technology behind professional desktop CAD applications. When a customer enters dimensions for their shim, the OCCT kernel constructs the geometry parametrically - building profiles, extruding shapes, cutting holes and slots. It then validates every constraint, checking wall thicknesses, hole spacing, and laser-cutting tolerances. If everything passes, the result is rendered in 3D so the customer can inspect their design from every angle, and production-ready STEP and DXF files can be exported directly in the browser.

All of this happens client-side, in real time, with no server round-trips required.

A Rich Variety of Shim Configurators​

The Shim Shack offers a wide range of shim types, and we built dedicated configurators for each one. Every configurator is tailored to the specific geometry and constraints of its shim type while sharing a consistent user experience across the board.

Customers enter precise dimensions for every parameter, then rotate, zoom, and inspect the resulting 3D model from any angle. A full-screen mode offers a focused, distraction-free design environment. And when the design is ready, STEP and DXF files can be exported for use in other CAD software or shared directly with engineering teams. It's worth noting that the dimensions shown in the 3D viewer are currently represented as wires in the STEP export and as polylines in the DXF export - they are visual annotations rather than editable parametric dimensions. The screenshots below show an exported part opened in FreeCAD (STEP) and LibreCAD (DXF) - two popular open-source CAD tools that customers can use to inspect and work with the exported files.

Built-In Manufacturing Validation​

Users of these configurators are not necessarily CAD engineers. They might be maintenance technicians, facility managers, or procurement specialists who need a specific part but don't work in 3D modeling software daily.

That's why every configurator validates inputs against real manufacturing constraints before generating geometry. When a customer enters dimensions that would produce an invalid part, the system responds with clear, specific error messages - whether that's self-intersecting geometry where holes or slots would overlap, insufficient material between features that doesn't respect laser-cutting tolerances, or dimensions that simply fall outside what can be reliably manufactured.

This guided approach ensures that every configuration a customer submits is actually producible - reducing back-and-forth with The Shim Shack's engineering team and speeding up the path from design to delivery.

The Details That Matter​

Building these configurators was a rewarding process, and we enjoyed adding touches that go beyond pure functionality. For instance, when customers enter the full-screen 3D environment, they're greeted by The Shim Shack's logo - a small detail that reinforces brand presence and makes the experience feel polished and professional, rather than like a generic embedded widget.

These details reflect our approach: the configurators aren't just tools, they're an extension of The Shim Shack's brand and customer experience.

What This Project Taught Us​

This collaboration reinforced something we deeply believe in: parametric CAD technology and e-commerce are a natural pairing. When products are defined by dimensions rather than catalog selections, the OCCT kernel opens the door to true custom manufacturing workflows online. Real-time validation builds trust - errors are caught before they happen, saving time for both customers and manufacturers. And by integrating with Runner, we brought all of this into an existing WordPress and WooCommerce environment without requiring a platform migration. The ability to export STEP and DXF files closes the loop entirely, bridging the gap between a web configurator and the production floor.

What The Shim Shack Says​

Ready to Build Your Own Configurators?​

If you manufacture custom parts and want to let your customers design them online - with real parametric geometry, manufacturing validation, and CAD export - we'd love to hear from you.

Whether you're on WordPress, Shopify, or a custom platform, Bitbybit Runner can bring parametric 3D configurators to your existing store. Every project is different, and we work closely with each client to find the right approach.

Interested in exploring what's possible? Reach out to us.

Learn more about Bitbybit Runner

Bitbybit is heading to Hannover Messe 2026. On April 24, founder Matas Ubarevičius will be giving a 30-minute presentation titled:

The Browser Is the New CAD: From Code to Configurable Products

Here is what the talk will cover and why it matters.

About Hannover Messe​

Hannover Messe is the world's leading trade fair for the manufacturing industry, running from April 20 to 24, 2026 in Hannover, Germany. The event brings together technology leaders, industrial manufacturers, and innovators around topics like industrial AI, automation, energy infrastructure, and digital manufacturing. This year's motto is "Think Tech Forward."

What This Talk Is About​

"CAD for everyone" can sound like an oversimplification - especially in a room full of experts. This talk does not propose replacing professional desktop tools. It proposes extending them: translating complex parametric logic into accessible, browser-based configurators.

The expertise stays with you. The interface becomes approachable for your customers. End users do not need to understand the underlying complexity - they interact with intuitive tools built on the rules and systems you define.

AI can support both sides of this process, helping experts work more efficiently and guiding users through configuration.

Where Configurators Live​

These configurators are not standalone tools. They are embedded directly into e-commerce platforms, webshops, ERP systems, and service portals - where products are configured, ordered, and managed.

Combined with modern 3D game engines, they present complex models in a responsive, high-quality interactive environment that runs natively in the browser.

Client-Side and Server-Side, Together​

Under the hood, computation can run both in the browser and in the cloud:

• Lightweight interactions and visualization happen client-side - fast, responsive, instant feedback.
• Demanding geometry processing and parametric logic can be handled on the server - allowing for scalable, production-ready workflows.

This hybrid approach makes it possible to serve complex configurators to thousands of users simultaneously without compromising on performance or fidelity.

What Makes This Possible​

Advances in WebGPU, WebAssembly, and browser-based CAD kernels make it possible to run complex geometry directly in the browser, extending CAD beyond the desktop into connected, user-facing environments.

bitbybit.dev is built for developers and CAD professionals who want to bring advanced geometry and parametric workflows to the web. By combining open-source foundations with proprietary layers, it enables the creation of robust 3D configurators and browser-based CAD applications using visual tools, TypeScript, or no-code interfaces.

Real-World Examples​

The presentation will include real-world examples of configurable systems developed with clients, showing how parametric products can be exposed in a controlled way while preserving engineering intent.

The browser is not replacing CAD - it is extending its reach.

See you at Hannover Messe on April 24.

📍 Hannover Messe 2026 - Talk details & schedule

Have questions or want to arrange a meeting at the event? Get in touch.

Bit by bit developers has always championed the democratization of CAD. The platform empowers users to run complex 3D algorithms directly in the browser - zero installation, zero friction. But as customer ambitions grow, so must the infrastructure.

Today marks the next evolution of the Bitbybit ecosystem: Managed Bitbybit CAD Cloud, powered by a RESTful API.

This is a fundamental expansion designed for enterprise B2B customers who demand more compute power, better IP protection, and scalable workflows than a browser-only environment can provide.

The Need for Power: Beyond the Browser​

Traditionally, Bitbybit has operated on a "client-side first" philosophy. When you run a script on the platform, your machine does the heavy lifting. This model is fantastic for accessibility - it mimics traditional CAD without the install bloat.

However, real-world enterprise scenarios often hit a ceiling:

• Device Limitations: Complex parametric objects and intense 3D configurators can bring mobile devices or lower-end laptops to a crawl.
• Proprietary IP: B2B customers developing custom algorithms often need a secure environment where their code isn't exposed to the client-side browser.
• Heavy Computation: Generating complex STEP, gLTF, or STL files for large assemblies requires distributed, parallel computing power that a single PC cannot offer.

The new Cloud infrastructure addresses these tradeoffs head-on. By offloading heavy geometry processing to managed servers, it becomes possible to run long-lasting computations and manage massive data sets without freezing the user's interface.

Bridging the Gap: How Cloud Enhances the Experience​

How does this new server-side infrastructure tie into the Bitbybit you already know? Improvements will be rolling out steadily across four key areas:

1. Supercharged Visual Programming​

Paying subscribers will gain access to cloud-capable components integrated directly into the visual programming editors (Blockly, Rete). Soon, drag-and-drop nodes that execute heavy tasks on the cloud will return results instantly to your canvas.

2. Next-Gen 3D Configurators​

High-tier (Silver and Gold) parametric models are being actively migrated to the cloud. This migration means smoother performance for complex models and opens the door for intricate parametric configurators that were previously impossible to run in a browser.

3. Enterprise Deployment & Consulting​

Subscribers hitting scale or resource limits can now access paid consulting to deploy custom algorithms directly to tenant-based infrastructure. This makes it possible to scale workflows without building a separate server backend.

4. Unified Architecture​

Internally, the cloud runs the same robust algorithms found in the open-source NPM packages and Runners. This ensures consistency: if it works in your browser prototype, it will work on the enterprise cloud.

A New Workflow for Complex Assemblies​

This infrastructure enables a "Hybrid" approach to 3D configuration. Imagine building a product assembly with thousands of parts:

1. Real-time Preview: The user interacts with a lightweight, abstracted preview in the browser (fast and responsive).
2. Cloud Compute: Once parameters are final, the user hits "Compute."
3. Delivery: The server processes the high-fidelity geometry and returns a link to detailed STEP file that might take a while to process.

The RESTful API: Integration Your Way​

Previously, integrating Bitbybit meant using NPM packages or Runners on the frontend. The new RESTful API opens up deep backend integration for B2B clients and third-party CAD software.

Three distinct ways to leverage this API are available:

Commitment to Open Source​

With all this talk of "proprietary algorithms" and "cloud infrastructure," you might wonder: What about Open Source?

Nothing changes.

The commitment to open-sourcing fundamental core 3D algorithms remains steadfast. The tools you use to learn, experiment, and build - like the core NPM packages - will remain free and open. The Cloud API is an additive layer for those who need enterprise-grade scale and privacy, not a replacement for community tools.

Read More About Open Source Strategy

Ready to Scale?​

First version of Managed Bitbybit CAD Cloud is live already. Whether you need to protect your IP, speed up your configurators, or generate massive 3D datasets, we have built the infrastructure for the task.

Would you like to discuss a custom enterprise integration and request an API key?

Contact Us Today

Learn more about B2B offerings

If you've ever tried to load, edit or create a complex STEP assembly in a web browser, you know how tricky it can be. STEP is the standard format engineers use to share CAD models, but browsers don't understand it natively. You usually need desktop software or a server to convert it.

With Bitbybit v1.0.0, that changes. You can now load STEP assemblies directly in the browser, explore their structure, extract individual parts, and export to web-friendly formats. Everything runs locally using Bitbybit OCCT WebAssembly.

What Can You Do?​

You can load a STEP file and see its full assembly tree, just like you would in FreeCAD or SolidWorks. Each part has a label (something like 0:1:1:3) that you can use to extract that specific piece.

Colors are parsed too. Regular STEP exports lose color data, but we use OCCT's XCAF format to embed colors into the assembly structure. This also works if users export a colored model from Bitbybit and open it in FreeCAD or other CAD software.

You can also convert assemblies to GLTF/GLB format for use in games, web viewers, or AR applications. And since everything happens in your browser, your files never leave your computer.

Parametric Scripts to STEP Assemblies​

This is where the workflow really shines. You can build parametric geometry in Bitbybit - using visual programming or TypeScript - and export it directly to STEP format with colors preserved. Change a parameter, re-run the script, and download a new STEP file ready for manufacturing or further CAD work.

Imagine a product configurator where customers adjust dimensions, then download a professional CAD file they can send to a machine shop. Or a design tool that generates custom brackets based on user inputs. The geometry is created algorithmically, but the output is the same format that engineers use in SolidWorks or Fusion 360.

Furthermore - part instances and colors are supported, so users of third party CAD applications will be able to load these optimized assets in efficient manner.

Why Does This Matter?​

Real products aren't single shapes. A bicycle has wheels, a frame, handlebars. An electronic device has a case, buttons, internal components. Engineers design each part separately, then assemble them digitally.

STEP files preserve this structure. When you load one, you get the full hierarchy of parts and sub-assemblies, along with names, colors, and positions. This is useful for building product configurators, design review tools, or documentation systems where you need to work with individual components.

The API​

There are two groups of methods. The Manager methods let you build and export assemblies: createPart, createAssemblyNode, createInstanceNode, combineStructure, buildAssemblyDocument, exportDocumentToStep, and exportDocumentToGltf.

The Query methods let you inspect existing documents: getDocumentParts, getAssemblyHierarchy, getShapeFromLabel, getLabelColor, getLabelTransform, and getLabelInfo.

Visual Programming​

If you use Rete or Blockly, we've added components for all of this. The hierarchy preview is especially handy - it shows the assembly tree and lets you click on any item to see its label, which you can then use to extract that part.

Your Files Stay Private​

Everything runs in your browser. OCCT is compiled to WebAssembly, so parsing and exporting happens locally. Your files are never uploaded anywhere. This matters if you're working with proprietary designs.

Tutorials​

We have step-by-step tutorials to get you started:

• Introduction to Assemblies - the basics
• Convert STEP to GLTF - for web viewing
• Parse Assembly Structure - explore parts
• Build and Export Assemblies - create from scratch
• Export Shapes with Color - preserve colors

Each one has examples in Rete, Blockly, and TypeScript.

Example: Load and Display a STEP Assembly​

Here's the simplest workflow - load a STEP file and display it in the browser:

// Fetch the STEP file
const stepData = await bitbybit.asset.fetchFile({
    url: "https://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ"
});

// Convert to GLTF for display
const glbData = await bitbybit.occt.io.convertStepToGltf({
    stepData,
    meshPrecision: 0.05
});

// Load into the 3D scene
await bitbybit.babylon.io.loadGlbFromArrayBuffer({
    glbData,
    fileName: "model.glb"
});

That's it - three function calls to go from a STEP file to 3D model in the browser.

What's Next?​

This is a release candidate. We're still adding features and improving coordinate system handling for different CAD conventions. If you find issues or have ideas, let us know on Discord.

Credits​

The soil sensor model in our tutorials comes from FarmBot, an open-source CNC farming robot. Their CAD files are public domain.

Ready to try it? Head to the assembly tutorials and load your first STEP file.

After nearly 100 releases in the 0.x.x range, version 1.0.0 Release Candidate 0 is now available. This is a huge milestone for Bitbybit and represents extensive engineering work to set the project on a solid foundation for years to come.

Why This Release Matters​

When Bitbybit was first built, it relied on OpenCascade.js as a bridge to access the powerful OCCT CAD kernel from JavaScript. It was an impressive project that was genuinely ahead of its time. However, its development has stalled and it's no longer actively maintained. A more sustainable path forward was needed.

With v1.0.0, the Bitbybit core has been completely rebuilt directly on top of the native OCCT C++ library. This wasn't just a dependency swap-it was a fundamental rearchitecting of how Bitbybit interfaces with one of the world's most powerful open-source CAD kernels. The good news? The existing API remains almost entirely intact, so the vast majority of existing projects should continue working with minimal changes.

OCCT 8.0.0 at the Core​

This release doesn't just migrate to native OCCT - it adopts version 8.0.0 Release Candidate 3, the latest version of OpenCascade Technology. During extensive testing, this new version has proven to be remarkably stable. All unit tests pass, both open-source examples and proprietary commercial projects built for B2B customers continue to work without any apparent loss of functionality, and noticeable improvements in both performance and reliability have been observed across the board.

This is a significant upgrade. OCCT 8.0.0 brings improvements to filleting, boolean operations, and many other core CAD algorithms that Bitbybit users rely on every day.

What's New in This Release​

Beyond the core migration, this release is packed with new features and improvements.

There are now three different OCCT build architectures to match your performance needs: a 32-bit build for compatibility accross all browsers and mobile devices, a 64-bit build for handling larger models, and a 64-bit multi-threaded build for maximum performance on complex operations. You can choose between these variants when scaffolding new projects with our NPX tool.

Speaking of scaffolding, the npx @bitbybit-dev/create-app CLI now lets you select not just your preferred 3D engine (PlayCanvas, Three.js, or Babylon.js), but also which OCCT architecture variant you want to use: 32, 64, or 64-mt.

New spiral algorithms for wire creation have been added. The createTaperedHelixWire, createHelixWireByTurns, and createFlatSpiralWire methods open up new possibilities for springs, decorative elements, and architectural features. And for those who've been asking-yes, there's finally a proper torus solid primitive in OCCT.

On the infrastructure side, a new Bitbybit CDN has been launched at git-cdn.bitbybit.dev. The migration away from JSDelivr was done for practical and reliability reasons, providing more control over asset delivery and ensuring consistent availability for production applications.

The 3D engine dependencies have also been updated: BabylonJS v8.46.2 and PlayCanvas v2.20.0 are now included in the latest runners.

Breaking Changes to Be Aware Of​

While significant effort went into maintaining API compatibility, there are a few changes you'll need to address when migrating.

The most notable one is that edge indexing is now zero-based. Previously, edge indices started at 1, which was an early design decision that didn't align with standard programming conventions. All projects that reference edges by index will need to be updated-just subtract 1 from your existing edge indices.

If you're using OCCT through our high-level APIs-via occt-worker or the game engine-specific NPM packages like @bitbybit-dev/threejs, @bitbybit-dev/babylonjs, or @bitbybit-dev/playcanvas-you're unlikely to encounter any additional API changes beyond the edge indexing.

However, if you've been using the @bitbybit-dev/occt layer directly and interacting with WASM builds at a lower level, you will encounter more significant API changes. Using the official exported API functions is strongly recommended, as this is the only surface guaranteed to remain stable across future versions.

Migration Should Be Smooth​

Version 1.0.0 has been running internally across various projects and customer deployments. The transition has been remarkably smooth. Most projects require nothing more than updating package versions and adjusting edge indices where applicable.

If you do run into any issues during migration, please reach out on Discord or open an issue on GitHub. We are here to help make the transition as painless as possible.

What's Next?​

This is Release Candidate 0, which means the final stretch before the official 1.0.0 release has begun. This period is dedicated to gathering feedback, catching any edge cases that might have been missed, and ensuring everything is rock solid before the final release.

Your feedback during this phase is incredibly valuable. If you try the RC and find something that doesn't work as expected, please let us know. Every bug report helps us ship a better 1.0.0.

Get Started​

Ready to try v1.0.0 RC0? Update your dependencies to the release candidate version:

npm install @bitbybit-dev/core@rc @bitbybit-dev/occt@rc

Or scaffold a fresh project with the new architecture options using the @rc tag:

npx @bitbybit-dev/create-app@rc my-v1-project

Thank you to everyone who has supported Bitbybit over these nearly 100 releases. This milestone wouldn't have been possible without the community's feedback, bug reports, and enthusiasm. Here's to the next chapter!

Happy coding!

Modern AI assistants like Claude, Gemini, Grok or ChatGPT or are remarkably capable at writing code. However, they can struggle with specialized libraries and APIs they weren't extensively trained on. That's where AI Prompt Contexts come in - specially crafted documentation files that give your AI assistant deep knowledge of the Bitbybit API.

Download Context Files​

Choose the context file that matches your 3D rendering engine. Right-click and "Save As" to download, or open and copy the content. Read on below for guidance on which format to choose.

We've structured these context files specifically for AI consumption. They include clear role definitions that tell the AI how to behave, complete API references with all available functions and their parameters, code examples demonstrating correct usage patterns, and decision trees that help the AI recommend the right approach based on your experience level.

Choosing the Right Context​

We offer several context variants, and understanding their differences will help you pick the right one for your needs.

Engine-Specific Contexts​

Each context file is tailored to a specific 3D rendering engine. If you're building with Babylon.js, download the BabylonJS context. Building with Three.js? Grab the ThreeJS variant. Working with PlayCanvas? There's a context file for that too. The engine-specific details matter because initialization patterns, scene management, and rendering APIs differ between engines.

Full vs Lite Versions​

This is where the real choice comes in. For each engine, we provide two versions: Full and Lite.

Full contexts contain everything an AI needs to help you from scratch. They include extensive explanations of what Bitbybit is, how to set up projects, integration guides for both NPM packages and browser-based runners, best practices for performance, scene setup recommendations, and the complete API reference. If you're new to Bitbybit or want your AI to provide comprehensive guidance, the Full context is your friend.

Lite contexts strip away the explanations and focus purely on API definitions. They contain the same complete API reference but without the additional guidance. This approach has a specific use case: when you already understand Bitbybit well and want to set up your own custom coding rules. You might have your own project setup preferences, your own coding style guide, or specific patterns you want the AI to follow.

Important: Both Full and Lite contexts use a compressed notation with dictionary translation to minimize token usage. The difference is only in the explanatory content, not in how the API is represented.

Monaco Editor Context​

We also provide a special context for users of our online Monaco TypeScript editor at bitbybit.dev. This context is simpler because it focuses only on what you need when coding in the browser-based editor. It explains the pre-initialized global variables available in that environment and the specific patterns required for that context. If you're just getting started with Bitbybit and want to experiment in our online editor, this beginner-friendly context is the perfect starting point.

TypeScript Declaration Files (.d.ts)​

For AI agents that struggle with dictionary translations, we also provide TypeScript Declaration Files. These .d.ts files are standard TypeScript type definitions that describe the complete Bitbybit API schema using full, unabbreviated names.

The key advantage of .d.ts files is that no translation is required. While our markdown context files use abbreviated notation (like OC for OCCT) to save tokens, declaration files use the exact names you'll write in your code. This makes them ideal for:

• Lower-end AI models that may struggle with translation rules
• Direct API reference without any transformation layer
• Maximum compatibility with any AI that understands TypeScript

The trade-off is size: .d.ts files are significantly larger than our compressed markdown contexts. A declaration file with comments can be 3-4x larger than the equivalent Lite context. If your AI has a limited context window or you're paying per token, the markdown contexts are more economical. But if translation failures are causing incorrect code, the .d.ts files provide a reliable fallback.

Understanding the Dictionary Translation Format​

Both Full and Lite contexts use an important technique to reduce file size: a translation dictionary. This is something your AI must understand to generate correct code.

At the beginning of the API section, you'll find a dictionary that maps abbreviated terms to their full names. For example, OC means OCCT, sp means shape, sd means solid, and cr means create. The API definitions throughout the document use these abbreviations to stay compact.

Here's the critical part: the AI must translate these abbreviations back to full names when generating code. We explicitly instruct the AI about this requirement in the context file. When the AI sees something like bitbybit.oc.sh.sd.crBox(op: BoxD) in the documentation, it should generate bitbybit.occt.shapes.solid.createBox(boxOptions: BoxDto) for you. The abbreviated forms are only for documentation - they would not compile if used directly in code.

This translation system allows us to provide complete API coverage while keeping token counts reasonable. The AI handles the translation transparently, so you receive clean, readable code. However, some AI agents - particularly smaller or less capable models - may fail to apply these translations consistently. If your AI produces code with abbreviated names that don't compile, consider switching to the TypeScript Declaration Files (.d.ts) which require no translation.

How to Use These Contexts​

Using a prompt context is straightforward. Download the appropriate markdown file from our homepage at bitbybit.dev, then attach it to your conversation with your AI assistant. Most modern AI interfaces support file attachments - simply drag and drop the file or use the attachment button.

Once attached, you can start asking questions like "Create a parametric table with adjustable legs" or "Show me how to create a filleted box and export it as STEP." The AI should reference the context to generate accurate, working code that follows our recommended patterns.

For the best experience, we recommend combining a Lite context with our Context7 MCP Server. The MCP server provides live access to our full documentation and stays current with the latest changes. The Lite context ensures the AI knows the precise API signatures. Together, they create a powerful coding assistant that understands both the big picture and the fine details.

Getting the Most from AI-Assisted Coding​

A few tips will help you work more effectively with AI and these contexts. First, be specific about what you want to build. Instead of asking for "a shape," describe "a rounded rectangular table top with four cylindrical legs." The more detail you provide, the more useful the generated code will be.

Second, mention your experience level. The contexts include decision trees that help the AI adapt its responses. If you're new to web development, the AI can scaffold complete applications for you. If you're an experienced developer, it can focus on just the API calls you need.

Third, iterate on the generated code. AI assistants are collaborative tools. If the first attempt isn't quite right, explain what you'd like changed. The AI can refine its suggestions based on your feedback while staying consistent with the Bitbybit API.

The Future of AI-Assisted CAD​

We believe AI assistants will become increasingly important tools for developers working with 3D and CAD applications. These prompt contexts represent our commitment to making Bitbybit as accessible as possible. Whether you're prototyping ideas quickly or building production applications, having an AI that truly understands our API makes the development process smoother and more enjoyable.

The contexts are updated with each Bitbybit release to match the latest API. When you see a new version available, download the updated context to ensure your AI has the most current information.

Happy building with AI at your side!

TLDR

npx @bitbybit-dev/create-app my-awesome-project

Bitbybit brings a brand new developer experience to the table. Say hello to @bitbybit-dev/create-app, a CLI tool that lets you scaffold fully-configured 3D CAD projects in just a few seconds.

The Problem We're Solving​

Getting started with 3D CAD development on the web has traditionally involved quite a bit of setup work. You need to configure your bundler, set up TypeScript, install the right packages for your chosen 3D engine, and make sure all the geometry kernels are properly initialized. This process can easily take 30 minutes to an hour, especially if you're new to the ecosystem.

We wanted to change that. With our new CLI tool, you can go from zero to a working 3D CAD application in under a minute.

How It Works​

The simplest way to create a new project is to run this command in your terminal:

npx @bitbybit-dev/create-app my-awesome-project

That's it. The CLI will guide you through a quick interactive setup where you choose your preferred 3D engine. Currently, we support three popular options: Three.js for its lightweight flexibility, Babylon.js for its powerful feature set, and PlayCanvas for its fast WebGL performance.

If you prefer to skip the prompts, you can also specify the engine directly:

npx @bitbybit-dev/create-app my-project --engine babylonjs

What You Get Out of the Box​

When the scaffolding completes, you'll have a fully functional project that includes everything you need to start building. The project uses Vite as the build tool, which means incredibly fast hot module replacement during development and optimized production builds. TypeScript is configured from the start, giving you type safety and excellent editor support.

Most importantly, all three of our geometry kernels come pre-configured and ready to use. OCCT (OpenCascade Technology) is there for professional-grade CAD operations like fillets, chamfers, and boolean operations on solid models. JSCAD provides programmatic solid modeling capabilities that many developers find intuitive. And Manifold handles fast mesh boolean operations when you need high-performance geometry processing.

The generated starter code demonstrates how to use each kernel. You'll see examples of creating rounded cubes with OCCT, performing boolean differences with Manifold, and building geodesic spheres with JSCAD. This gives you a clear starting point to understand how each kernel works and when to use which one.

The Development Workflow​

After scaffolding your project, the workflow is straightforward. Navigate into your project folder, install the dependencies, and start the development server:

cd my-awesome-project
npm install
npm run dev

Your browser will open with a live preview of your 3D scene on http://localhost:5173. Make changes to the code, and they appear instantly thanks to Vite's hot reload. When you're ready to deploy, a simple npm run build creates an optimized production bundle.

Choose Your Engine​

Each supported 3D engine has its own strengths. Three.js is an excellent choice if you want a lightweight library with a massive community and countless examples online. It's particularly good for creative coding and visualization projects.

Babylon.js shines when you need a complete game engine with built-in support for physics, shadows, post-processing effects, and complex scene management. If you're building something that needs to feel like a polished application or game, Babylon.js has you covered.

PlayCanvas offers a fast and lightweight approach to WebGL development. It's designed for performance and works well for projects where load time and runtime speed are critical concerns.

No matter which engine you choose, the Bitbybit geometry kernels work with all of them. You can create complex CAD geometry with OCCT and render it beautifully in any of these engines.

Cloud Projects: Server-Side CAD​

The CLI isn't just for frontend apps anymore. You can now scaffold cloud projects that pair a backend server with a React + Three.js frontend, connecting to our CAD Cloud API for server-side model generation, STEP-to-glTF conversion, and CAD pipelines.

Run the CLI and select the cloud app type when prompted. Then pick from five backend templates:

• Hono + SDK - TypeScript SDK on Cloudflare Workers
• Hono + REST - raw fetch on Cloudflare Workers
• Node.js + SDK - TypeScript SDK on Express 5
• Node.js + REST - raw fetch on Express 5
• .NET + REST - HttpClient on ASP.NET Core (.NET 10)

Your API key stays on the server, and the frontend proxies all requests through your backend. Add your key, run npm install, and you're building a full-stack CAD application.

Why This Matters​

We believe that the future of CAD and 3D design is on the web. Browser-based tools are accessible to everyone, require no installation, and can run on virtually any device. But building these tools has been harder than it should be.

With @bitbybit-dev/create-app, we're lowering the barrier to entry significantly. Whether you're a seasoned developer exploring CAD programming or a designer wanting to prototype ideas in code, you can now get started in seconds rather than hours.

The CLI is open source and available as part of the Bitbybit monorepo on GitHub. We welcome contributions, feedback, and feature requests from the community.

Get Started Today​

Ready to try it out? Open your terminal and run:

npm init @bitbybit-dev/app my-first-cad-app

If you build something cool, we'd love to see it. Share your projects with us on Discord or tag us on social media. And if you find Bitbybit valuable for your work, consider supporting the project with a Silver or Gold subscription at bitbybit.dev/auth/pick-plan.

Happy coding!

We are excited to announce the release of our new open-source NPM package and runner for PlayCanvas, one of the most performant and feature-rich WebGL game engines available. The @bitbybit-dev/playcanvas package and PlayCanvas Runner continue our mission to make professional 3D CAD accessible across the entire web development ecosystem, now empowering PlayCanvas developers with industrial-grade geometric modeling capabilities.

Explore the New Package:

• NPM: @bitbybit-dev/playcanvas
• NPM (Core Layer): @bitbybit-dev/core
• GitHub: Bitbybit.dev Monorepo
• Documentation: PlayCanvas Integration Guide

Short demo of some of the Bitbybit projects rendered via PlayCanvas:

Why PlayCanvas?​

PlayCanvas has established itself as a leading choice for web-based game development and interactive 3D experiences. Its entity-component architecture, visual editor, and exceptional runtime performance make it ideal for creating everything from games to product configurators. However, when it comes to precise CAD operations, parametric modeling, and industrial-grade geometry processing, developers have traditionally needed to look elsewhere.

With Bitbybit's PlayCanvas integration, that changes. Now, PlayCanvas developers can leverage:

• Industrial CAD Kernels: Access to OpenCascade (OCCT), JSCAD, and Manifold geometry engines
• Parametric Modeling: Create complex, constraint-based 3D models that update dynamically
• Boolean Operations: Precise union, intersection, and difference operations on solid geometry
• Advanced Surfaces: Lofting, sweeping, filleting, and chamfering operations
• CAD File I/O: Import and export STEP, IGES, STL, and other industry-standard formats

All of this power is now available within PlayCanvas's entity-component system, maintaining the engine's clean architecture and high performance.

The PlayCanvas Runner: Instant CAD Anywhere​

Just like our ThreeJS and BabylonJS runners, we're releasing a PlayCanvas Runner that allows you to execute Bitbybit CAD scripts on any website using a single JavaScript file from our CDN. This means you can:

• Create 3D product configurators for e-commerce sites
• Build interactive parametric design tools
• Embed CAD modeling capabilities in documentation or tutorials
• Prototype complex geometries without complex build setups

The PlayCanvas Runner follows the same architecture as our other runners, supporting both full and lite versions:

• bitbybit-runner-playcanvas.js:
  • Includes everything needed to run Bitbybit scripts, including the PlayCanvas engine itself
  • Perfect for quick integration when PlayCanvas isn't already part of your project
  • Bundles CAD kernels, web workers, and all dependencies
• bitbybit-runner-lite-playcanvas.js:
  • Lightweight version that expects PlayCanvas to be loaded separately
  • Ideal for projects already using PlayCanvas
  • Significantly smaller bundle size
  • Expects pc (PlayCanvas) to be available as window.PLAYCANVAS

How to Include the PlayCanvas Runner​

The runners are served from the Bitbybit CDN. Include them in your website with these script tags (replace <version-number-of-bitbybit> with the actual version):

• PlayCanvas Runner (Full):

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-playcanvas.js"></script>
  

• PlayCanvas Runner (Lite):

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-lite-playcanvas.js"></script>
  

You can find all official Bitbybit versions on GitHub Releases.

Using the PlayCanvas Runner​

Once included, the runner is accessible via window.bitbybitRunner:

// Get the runner instance
const runner = window.bitbybitRunner.getRunnerInstance();

// Initialize the runner with your canvas
const { bitbybit, Bit, camera, scene, app, pc } = await runner.run({
    canvasId: 'playcanvas-canvas',
    canvasZoneClass: 'myCanvasZone',
    // Configure which kernels to enable
    enableOCCT: true,
    enableJSCAD: true,
    enableManifold: true,
    // Optional scene configuration
    cameraPosition: [20, 10, 20],
    cameraTarget: [0, 0, 0],
    backgroundColor: '#1a1c1f',
});

// Now you can use bitbybit directly for CAD operations
const cube = await bitbybit.occt.shapes.solid.createCube({ size: 10, center: [0, 0, 0] });
await bitbybit.draw.drawAnyAsync({ entity: cube });

// Or execute an exported script with inputs
const results = await runner.executeScript(
    yourExportedScript,
    { 
        // Pass inputs to your script
        width: 10,
        height: 5,
        depth: 3
    }
);

// Access outputs from your script
console.log(results);

Exporting Scripts for the PlayCanvas Runner​

All Bitbybit visual programming editors (Rete, Blockly, TypeScript) support exporting scripts compatible with the PlayCanvas Runner. The export process is identical to other engines:

1. Open your script in any Bitbybit editor
2. Click the "More Actions" menu
3. Select "Export to Runner"
4. Choose "PlayCanvas" as your target engine
5. Copy or download the generated JavaScript code

Your exported script can then be executed by the PlayCanvas Runner on any website, in any coding environment (StackBlitz, CodePen, JSFiddle), or embedded in your own applications.

Comparing Runners: BabylonJS, ThreeJS, and PlayCanvas​

All three runner families share the same core CAD capabilities:

• Full access to OCCT, JSCAD, and Manifold kernels
• Identical parametric modeling operations
• Same file import/export capabilities
• Compatible with visual scripts from Bitbybit editors (with some engine-specific considerations)

The primary differences relate to the game engines themselves:

BabylonJS Runner:

• Best compatibility with visual scripts from Bitbybit.dev editors (natively BabylonJS-based)
• Includes physics (Havok), GUI elements, and advanced materials out of the box
• Largest bundle size
• Ideal for projects requiring BabylonJS-specific features

ThreeJS Runner:

• Vast ecosystem and community
• Smaller bundle size than BabylonJS
• Excellent for projects already using ThreeJS
• Good compatibility with visual scripts (unless they use BabylonJS-specific features)

PlayCanvas Runner:

• Exceptional performance and mobile optimization
• Entity-component architecture familiar to game developers
• Cloud-based visual editor available
• Professional game development features
• Excellent for real-time applications and games requiring CAD precision

Architecture: Engine-Agnostic Core​

Our PlayCanvas integration maintains the same modular, engine-agnostic architecture we established with ThreeJS and BabylonJS support:

The @bitbybit-dev/core package contains all fundamental CAD logic, data structures, and interfaces. Each game engine-specific package (@bitbybit-dev/playcanvas, @bitbybit-dev/threejs, @bitbybit-dev/babylonjs) provides a thin integration layer that translates between Bitbybit's CAD operations and the respective engine's rendering system.

This architecture means:

• Consistent API: Learn once, use everywhere
• Easy Migration: Switch engines if project requirements change
• Future-Proof: New engine integrations can be added without disrupting existing code
• Optimal Performance: Each integration is specifically optimized for its target engine

Real-World Use Cases with PlayCanvas​

PlayCanvas's performance characteristics make it particularly well-suited for certain applications:

3D Product Configurators: PlayCanvas's mobile-first optimization is perfect for e-commerce product configurators that need to run smoothly on smartphones and tablets. Combined with Bitbybit's parametric modeling, you can create configurators for furniture, jewelry, mechanical parts, and more.

Architectural Visualizations: Create interactive architectural presentations with parametric building components. Users can adjust dimensions, materials, and layouts in real-time while maintaining structural precision.

Engineering Applications: Build web-based CAD tools for mechanical engineering, allowing engineers to design, test, and share components directly in the browser without specialized software.

Educational Tools: Develop interactive geometry and mathematics education tools that demonstrate CAD concepts with high performance even on limited hardware.

Game Integration: Generate procedural game assets with CAD precision, create customizable in-game items, or build level editors that use industrial-grade geometry operations.

Getting Started​

To start using Bitbybit with PlayCanvas:

1. Via NPM (for build-based projects):

   npm install @bitbybit-dev/playcanvas
   

   Then follow our PlayCanvas Integration Guide

2. Via Runner (for quick integration): Include the runner script tag and start executing your CAD scripts immediately. Check our Runner documentation and examples on GitHub

3. Visual Programming: Create your geometry in Bitbybit's visual editors, export to the PlayCanvas Runner, and integrate with your own UI

Examples and Resources​

We've prepared comprehensive documentation and examples:

• PlayCanvas Starter Template: Complete setup guide with Vite
• Advanced Parametric Model: Complex parametric modeling with GUI
• Hex House Concept: Architectural parametric design showcase
• GitHub Examples: Working code samples

PlayCanvas is Here to Stay​

Just like BabylonJS and ThreeJS, PlayCanvas is now a first-class citizen in the Bitbybit ecosystem. We're committed to maintaining and improving this integration, ensuring PlayCanvas developers have access to the same powerful CAD capabilities available on other platforms.

This expansion continues our vision of making professional 3D CAD truly accessible and adaptable for the entire web development community. Whether you're a game developer, product designer, engineer, or educator, you now have more choices than ever for bringing precise, parametric 3D modeling to your web projects.

What's Next?​

We're actively working on:

• More PlayCanvas-specific examples and tutorials
• Additional integration with PlayCanvas's visual editor
• Enhanced support for PlayCanvas-specific features in visual scripts

We're excited to see what the PlayCanvas community will create with these new CAD capabilities. Share your projects with us on Discord, tag us on social media, or contribute examples to our GitHub repository!

Ready to get started?

• 📦 Install @bitbybit-dev/playcanvas
• 📚 Read the Documentation
• 🎮 Try the PlayCanvas Runner
• 💬 Join our Discord Community

Happy coding, and welcome to the PlayCanvas community in Bitbybit! 🎮✨

How do you sell a modular gym rack with over 60+ customizable parts online? Static images don't cut it. Videos can only show so much. And asking customers to imagine how different components fit together? That's a recipe for confusion and abandoned carts.

Ironside Armour, a global fitness equipment company, faced exactly this challenge. Through close collaboration with our team, they developed interactive 3D configurators powered by 3D Bits - a rewarding journey that transformed how their customers shop.

The Challenge: Selling Complex Modular Products Online​

Ironside Armour designs and sells premium gym racks that customers can customize to their exact needs. We're talking about products with 60+ individual parts that can be combined in countless configurations. Try explaining that with a product gallery.

When customers shop for modular gym equipment, they need to:

• Visualize exactly what they're buying
• Understand how parts connect and interact
• Feel confident their configuration will work
• Know the total price before checkout

Traditional e-commerce approaches simply couldn't deliver this experience. That's where 3D configurators became the obvious solution.

Today, Ironside Armour offers three fully interactive 3D configurators on their Shopify store:

• Pro Power Rack
• Pro Half Rack
• Pro Foldable Rack

Each configurator lets customers build their perfect rack, see it from every angle, and add it to cart with accurate pricing - all in real time.

Why 3D Bits Was the Right Choice​

A Collaborative Approach to Complex Configurators​

These aren't simple "pick a color" configurators. Each gym rack includes 60+ parts with various attachment points, accessories, and configuration options. Building something this sophisticated required close collaboration between Ironside Armour and our team.

Using our visual Composer, we worked together to define parts, set up the configuration logic, and connect everything to their Shopify products. Composer provides a powerful interface for building sophisticated product configurators without writing code - but that doesn't mean the process is trivial. Complex products require thoughtful planning, proper 3D model preparation, and attention to detail.

Seamless Third-Party Integration​

One of 3D Bits' core strengths is flexibility. Rather than forcing merchants into a rigid ecosystem, we built the app to integrate with the tools you already use.

Ironside Armour chose to pair 3D Bits with YMQ Options, a popular product options app they were already familiar with. This combination gave them:

• Complex pricing logic for modular products
• Custom option handling beyond Shopify's variant limits
• A familiar workflow for managing product options

This modular approach - where you combine specialized apps like puzzle pieces - is quite unique in the industry. Want to use a different pricing app? Go ahead. Need to code a custom solution? We support that too. 3D Bits focuses on what it does best (high-performance 3D rendering) while integrating seamlessly with your existing stack. Learn more about compatible apps.

From CAD to Web: Optimizing 3D Models​

Like many manufacturers, Ironside Armour's 3D models originated as STEP files - the industry standard for professional CAD. But CAD models aren't built for web performance. They're built for engineering precision.

We worked closely with Ironside Armour to transform their production models into web-optimized GLTF files. This process involved:

• Mesh optimization - Reducing polygon counts while maintaining visual quality
• Texture compression - Balancing file size with crisp, realistic materials
• Instanced loading - A key 3D Bits feature where duplicate parts load only once and render in multiple positions at the GPU level, dramatically improving performance

We provided hands-on support and consulting during the initial setup. Ironside Armour also generously allowed us to use their actual production models in our tutorials, helping other merchants learn the optimization process.

Long-Term Success: Growing Capabilities​

Our collaboration with Ironside Armour didn't end after the initial setup - it evolved. We provided extensive support during the learning curve, and over time, they developed the expertise to manage and extend their configurators independently.

Since our initial work together, Ironside Armour has:

• Switched Shopify themes (3D Bits kept working seamlessly)
• Made multiple updates to their option app configuration
• Added new configurable parts to their configurators

Today, they confidently optimize their own 3D models, extend their configurators with new components, and maintain complex product catalogs. This is the outcome we aim for with every client: building your capabilities through partnership, so you can grow with confidence.

What Ironside Armour Says​

Key Takeaways​

If you're selling complex, modular, or customizable products on Shopify, here's what Ironside Armour's experience demonstrates:

1. Collaboration is key - Complex configurators benefit from working closely with experienced partners who understand both the technology and the challenges
2. Flexibility matters - Choose apps that work with your existing stack, not against it
3. Invest in optimization - Properly converted 3D models make all the difference in performance
4. The journey is rewarding - While building sophisticated 3D configurators requires effort and planning, the results transform how customers experience your products

Ready to Start Your Journey?​

As we continue developing 3D Bits, every improvement benefits all our merchants. Performance enhancements, new features, and expanded capabilities automatically become available to stores like Ironside Armour.

Building a 3D configurator for complex products is a rewarding path - but you don't have to figure it out alone. Our Pro plan includes premium support with direct access to our team, helping you overcome challenges and make the most of the platform. Learn more about our plans.

Depending on your project's needs, we may also offer additional services - from 3D model optimization to hands-on configurator setup - to ensure your journey is a success. Every client is different, and we're committed to finding the right level of support for your situation.

If you're considering 3D configurators for your Shopify store and don't know where to start, reach out to us. We're here to help you navigate this journey, just as we did with Ironside Armour.

Get started with 3D Bits

In our ongoing mission to make powerful 3D design tools accessible to everyone, we're thrilled to announce a significant milestone: all components of Bitbybit.dev's Rete and Blockly visual programming editors are now translated into multiple new languages!

Alongside English, we now proudly support:

• Spanish (Español)
• Hindi (हिन्दी)
• Arabic (العربية)
• Chinese (中文)
• French (Français)
• Lithuanian (Lietuvių)

You'll also find a new language selection button within the platform, allowing you to easily switch to your preferred language.

Imagine a world where the language you speak doesn’t limit your ability to create, design, and innovate. A world where children from Buenos Aires to Beijing can explore the wonders of 3D design in their own tongue. Bitbybit.dev is making this a reality. This exciting development is more than just a technical update - it’s a transformative step toward making technology and education truly accessible to millions worldwide.

To select your preferred language, look for the new language switcher button in our editors:

Why Language Matters in STEM​

Language is a powerful tool. It’s how we connect, learn, and express ourselves. But when educational resources are locked behind a language barrier, they become unreachable for many. In STEM (Science, Technology, Engineering, and Mathematics) fields, where innovation drives progress, this issue is especially pressing.

Complex concepts like coding and 3D design can already feel daunting-add the challenge of navigating them in a foreign language, and they can seem insurmountable. By translating its visual programming tools into multiple languages, Bitbybit.dev is tearing down these walls, inviting a global audience to engage with STEM on their own terms.

Empowering Kids with Intuitive Learning​

For kids, learning to program can be like building with digital bricks. Visual programming editors like Rete and Blockly make this process intuitive by replacing complex lines of code with simple drag-and-drop blocks. This approach lets young learners focus on logic and creativity rather than wrestling with syntax.

Now, with these tools available in languages like Spanish, Hindi, Arabic, Chinese, French, and Lithuanian, the learning experience becomes even more seamless and engaging. A child in Cairo can experiment with 3D geometry in Arabic, while a peer in Paris does the same in French. This not only boosts confidence but also sparks curiosity, making STEM approachable and exciting for kids who might otherwise feel excluded.

Take, for example, a young student in rural India. Hindi is her first language, and English feels distant and unfamiliar. Before this translation effort, exploring 3D CAD might have been a struggle, an additional layer of difficulty on top of learning new concepts. Now, with Bitbybit.dev’s Hindi interface, she can dive into the world of 3D design, creating shapes and structures in a language she knows best. This isn’t just about convenience-it’s about empowerment, giving kids everywhere the chance to see themselves as future innovators, regardless of their linguistic background.

Unlocking Parametric Design for All​

Parametric design-a method of defining objects using variables, parameters, and relationships-is a cornerstone of modern 3D CAD. It’s a powerful skill used extensively in engineering, architecture, and product design, but it’s also inherently abstract and can be challenging to learn.

Visual programming simplifies this by letting users manipulate parameters and see results through a graphical interface. When that interface speaks your language, the learning curve flattens even more dramatically. By making parametric design accessible in native languages, Bitbybit.dev is equipping users worldwide with the tools to tackle advanced concepts without the added cognitive load of translation.

In a world that’s increasingly connected yet wonderfully diverse, access to technology shouldn’t hinge on the language you speak. Bitbybit.dev is dedicated to creating accessible design tools for everyone. We believe that the future of STEM is multilingual, and with these new translations, it’s brighter than ever.

We plan to add support for even more languages to Bitbybit.dev in the near future. Community feedback plays a crucial role in shaping these translations and helping us prioritize. You can also contribute your suggestions or improvements directly via pull requests to our GitHub repository:

➡️ Contribute to Language Translations on GitHub

We are incredibly excited to see how these new language options will empower more creators, educators, and learners around the globe!

We are happy to announce that the 3D Bits app for Shopify has been updated with some powerful new capabilities designed to simplify common use cases! While parametric 3D models offer incredible flexibility, we understand that the learning curve associated with programming them can be steep.

To address this, we've introduced two new theme app extension blocks:

1. BITBYBIT VIEWER: Simplifies the display of static 3D models (like GLTF files or 3D scans).
2. BITBYBIT PREVIEW: Offers a straightforward way to embed public Bitbybit.dev projects that don't need to react to Shopify product variant changes.

These updates make it easier than ever to bring stunning 3D experiences to your Shopify store.

3D Bits on the Shopify App Store​

If you'd like to install or update the app for your Shopify store, just click the link below:

➡️ 3D Bits App for Shopify

So, What Are The Updates?​

Many of our users simply need to display static 3D models on their product pages – think 3D scans of their products or pre-made GLTF assets. Previously, even for these simpler cases, it often required creating a small script on our Bitbybit.dev platform, exporting it to Shopify, and following several integration steps.

To make this process significantly easier, we’ve introduced the BITBYBIT VIEWER theme app extension block.

• Simplified Static Model Display: This new block lets you display 3D models on your product pages using just a URL (e.g., from Shopify’s CDN or any public URL) – often with no need to use the Bitbybit.dev editor at all. It’s perfect for users who want to showcase a 3D model that doesn't need to dynamically respond to product variant changes.
• Advanced Scene Configuration (JSON): For those looking to customize more advanced 3D experiences with static models, the BITBYBIT VIEWER also supports Scene Configuration in JSON format. This feature lets you load multiple files, precisely adjust model rotation, position, and scale. You can also customize camera speeds, initial positions, lighting, skyboxes, and more, giving you fine-grained control over the 3D presentation.

Additionally, for experienced users already familiar with the Bitbybit.dev ecosystem, we’ve added the BITBYBIT PREVIEW theme app extension block.

• Direct Project Embedding: With a single preview URL from a public Bitbybit.dev project, you can now link and embed that project directly onto your Shopify product pages. This is great for showcasing more complex or interactive scenes that you've already built on Bitbybit.dev, as long as they don't require dynamic updates based on Shopify product variants.

BITBYBIT VIEWER Block​

The BITBYBIT VIEWER block sets up the 3D scene and loads the 3D models you provide via URL or JSON configuration. It currently supports popular file formats like:

• gltf, glb (standard 3D model format)
• splat, ply (for Gaussian Splatting 3D scans)
• obj, stl (common 3D model/printing formats)

For the best results with assets you own, we recommend uploading them to Shopify’s "Content" section (under Settings), then copying their CDN URLs and using those with the Viewer block. You can also customize settings such as the background color and other scene details directly within the Shopify theme editor to match your preferences.

➡️ Learn more about the BITBYBIT VIEWER block

Here's a short tutorial that will walk you through all the steps involved to set up and use the BITBYBIT VIEWER block:

BITBYBIT PREVIEW Block​

The BITBYBIT PREVIEW block works with a single metafield where you can paste a public project URL from Bitbybit.dev. This will create an embedding on your Shopify product page that simply loads whatever is in that public Bitbybit.dev project. It can even contain physics simulations, animations, and other interactive elements.

Important Note: Scenes embedded with the PREVIEW block are self-contained and cannot be dynamically changed by Shopify product variant inputs or other UI elements on the Shopify product page. It's a direct window to your Bitbybit.dev project.

➡️ Learn more about the BITBYBIT PREVIEW block

Here's a short tutorial that will walk you through all the steps involved to set up and use the BITBYBIT PREVIEW block:

Showcasing 3D Gaussian Splats​

If you want to scan your physical 3D products and sell them online using the revolutionary Gaussian Splatting technique, the 3D Bits app is your go-to solution.

• Scanning: To create scans, we recommend using apps like Scaniverse on iPhone or Android devices.
• File Format: Save your scans in the .splat file format for best compatibility and size.
• Upload: Upload these .splat files to Shopify as "Content" (under Settings > Content > Files).
• Editing (Optional): While Scaniverse offers basic editing tools, you can refine your scans further (e.g., remove noise, crop unnecessary details) with the web-based SuperSplat editor.
• Display on Shopify: For displaying 3D Gaussian Splats on your Shopify product pages, we suggest using the new BITBYBIT VIEWER theme app extension block. It’s the easiest and most direct way we offer to configure and showcase these types of 3D models.

Helpful Links:

• Scaniverse App
• SuperSplat Editor by PlayCanvas

Also, make sure to check out our tutorials to learn how this can be done step-by-step: ➡️ Video tutorials on how to use the 3D Bits app

Have a Great Time with 3D Bits!​

We hope that these updates will be highly beneficial to you and that your Shopify webshops will look even more stunning with these enhanced 3D capabilities. These new features are available to all users of the 3D Bits app for Shopify.

If you have any questions, need help with anything, or have feedback, please feel free to contact us at any time.

Want to learn more about the original capabilities of 3D Bits for parametric and interactive configurators? ➡️ Read about the original release of 3D Bits and what it can do here

Our Bitbybit Runners allow you to easily include Bitbybit.dev's powerful 3D CAD and computational geometry capabilities into your own websites via a single UMD JavaScript file. In our latest release, we're excited to introduce a completely new runner specifically for the ThreeJS game engine!

Furthermore, we've developed new Lite versions of the runners for both ThreeJS and BabylonJS (and now PlayCanvas!). These Lite versions allow you to load the respective game engines separately if you're already including them in your project, significantly reducing bundle sizes. Learn more about these exciting updates in this blog post.

Brief History of the Runner​

The Bitbybit Runner is a single JavaScript file you can include in your website. It bundles all the open-source components of the Bitbybit.dev platform, such as our CAD kernels (OCCT, JSCAD) and various 3D algorithms. These tools are designed to simplify the development of parametric 3D experiences, model configurators, and other geometry-intensive web applications.

About six months ago, we introduced the first version of the bitbybit-runner, which was fully based on the BabylonJS game engine. This version remains incredibly powerful and popular. The runner can execute Bitbybit.dev algorithms directly through JavaScript. Additionally, we added a feature that allows users to export scripts created in our visual editors (Rete, Blockly) and run them seamlessly on any browser-based coding environment (like StackBlitz, CodePen, or JSFiddle) as well as on their own websites.

If you're unfamiliar with how the runner works or want a refresher, be sure to check out our original introduction article: ➡️ Introducing BITBYBIT-RUNNER.JS

New and Improved Runners: Enter ThreeJS! (And Later, PlayCanvas!)​

Recently, we announced official support for the ThreeJS game engine via new NPM packages. Shortly after, we received requests from the community for a dedicated runner specifically for ThreeJS. Based on your valuable feedback, we are thrilled to announce the release of a new Bitbybit Runner for ThreeJS!

Update 2026: Following the same principles, we've now also released a PlayCanvas Runner, bringing the total number of supported game engines to three!

This new runner follows the same core principles as the BabylonJS version but is specifically designed and optimized to work with ThreeJS. Like the original, it’s a single JavaScript file you can add to your website. The runner automatically loads all necessary resources, including web workers, CAD kernels, and other dependencies required to run your Bitbybit.dev scripts within a ThreeJS environment.

While developing the ThreeJS runner, we also realized that many projects already include ThreeJS (or BabylonJS) as a dependency in their existing build setups. To avoid the redundancy of loading the entire game engine again from the runner’s bundled JavaScript file, we addressed this with a new, more flexible solution.

Introducing "Lite" Versions of the Runners​

We've created Lite versions of our runners for BabylonJS, ThreeJS, and PlayCanvas. These versions allow you to load the respective game engines separately if they are already part of your project, thus reducing redundancy and improving load times.

The Lite bundles are significantly smaller because they do not include the game engine dependencies themselves. Instead, they expect the game engine (BabylonJS, ThreeJS, or PlayCanvas) to be available in the global scope (e.g., on the window object).

If your project already loads one of these game engines via a script tag, NPM import, or another method, using the Lite version of the corresponding Bitbybit Runner will prevent duplicate loading of the engine, making your website faster and more efficient.

ThreeJS Runners: Examples in Action​

The project accessible through the links below introduces the core functionality of the ThreeJS runner. It's a 3D model configurator designed to create a customizable ThreeJS logo with user-defined triangular configurations, perfectly suited for 3D printing. You could even print it to decorate your Christmas tree!

We offer the code on various third-party coding platforms, all of which support the execution of Bitbybit.dev code via the runner:

• Live Demo: 3D Printable ThreeJS Logo Configurator
• StackBlitz Example: ThreeJS Runner on StackBlitz
• CodePen Example: ThreeJS Runner on CodePen
• JSFiddle Example: ThreeJS Runner on JSFiddle
• GitHub Source Code: View Source on GitHub

More Screenshots of the ThreeJS Runner Demo:

ThreeJS Runner on StackBlitz

ThreeJS Runner on CodePen

ThreeJS Runner on JSFiddle

Another key feature of this configurator is its ability to save STL and STEP files, enabling you to manufacture a physical 3D model from your design. Tangible results bring the project to life! Check out this screenshot of the ThreeJS logo model loaded into Cura software-it's sliced and ready for 3D printing.

Overview of All Available Runners​

Here's a summary of the Bitbybit Runners now available:

• bitbybit-runner-babylonjs.js
  • This is our most powerful and feature-rich runner. It includes all necessary resources to run Bitbybit.dev scripts and the BabylonJS engine itself.
  • If you don’t already have BabylonJS in your project, this is the recommended runner for BabylonJS-based experiences.
  • It has the best support for scripts exported from our visual programming editors (Rete, Blockly) as these editors are natively built with BabylonJS.
  • Among countless 3D algorithms, it's also capable of running Havok physics and other BabylonJS-specific features like GUI elements and advanced materials.
• bitbybit-runner-lite-babylonjs.js
  • A smaller, lightweight version of the BabylonJS runner that does not include the BabylonJS engine.
  • It expects the window object to contain these global BabylonJS dependencies before initialization: BABYLON, GUI, LOADERS, MATERIALS, SERIALIZERS. Only then can this Lite runner initialize successfully.
  • Use this if BabylonJS is already loaded in your project.
• bitbybit-runner-threejs.js
  • This runner is capable of executing all open-source Bitbybit.dev CAD algorithms within a ThreeJS environment. It bundles the ThreeJS game engine and OrbitControls in a single file.
  • It can also execute visual scripts exported from our editors, as long as they do not contain any BabylonJS-specific logic.
• bitbybit-runner-lite-threejs.js
  • A lightweight version of the ThreeJS runner that does not include the ThreeJS engine.
  • It expects the window object to contain these global ThreeJS dependencies before initialization: THREE (for ThreeJS itself) and OrbitControls (if you plan to use them via the runner's setup). Only then can this Lite runner initialize successfully.
  • Use this if ThreeJS is already loaded in your project.
• bitbybit-runner-playcanvas.js (Added 2026)
  • This runner executes all open-source Bitbybit.dev CAD algorithms within a PlayCanvas environment. It bundles the PlayCanvas engine in a single file.
  • Optimized for high performance and mobile devices.
  • Can also execute visual scripts exported from our editors, as long as they do not contain BabylonJS-specific logic.
• bitbybit-runner-lite-playcanvas.js (Added 2026)
  • A lightweight version of the PlayCanvas runner that does not include the PlayCanvas engine.
  • It expects the window object to contain the pc (PlayCanvas) global before initialization.
  • Use this if PlayCanvas is already loaded in your project.

How BabylonJS, ThreeJS, and PlayCanvas Runners Differ​

All three runner families (BabylonJS, ThreeJS, and PlayCanvas) can execute all of our open-source 3D modeling algorithms and interact with our CAD kernels (OCCT, JSCAD, Manifold). The primary differences are related to the game engines themselves and their specific features:

• Visual Script Compatibility: If you are looking to export and run scripts created with our visual programming editors (Rete, Blockly) on the Bitbybit.dev website, you will generally have more success and feature parity with the BabylonJS runner. Our visual editors are natively based on BabylonJS. Thus, if your scripts use specific BabylonJS features (like our built-in skyboxes, GUI elements, Havok physics integrations, specific BabylonJS materials, etc.), you should use a BabylonJS runner.
• Error Handling for Visual Scripts in ThreeJS and PlayCanvas Runners: The ThreeJS and PlayCanvas runners will also attempt to run visual scripts exported from Bitbybit.dev. However, if they encounter BabylonJS-specific logic, they will throw an error as those features are not available in their contexts. That said, if you limit your visual coding to only contain 3D modeling-related features (CAD operations, basic geometry, etc.) without engine-specific rendering features, then your scripts should execute just fine with any of the three runners.
• Direct JavaScript Coding: If you are simply writing Bitbybit.dev logic directly in JavaScript (not exporting from visual editors), then any of these runners (BabylonJS, ThreeJS, or PlayCanvas, full or Lite) will work well for you for the core CAD functionalities.
• Bundle Size & Performance:
  • The BabylonJS runner is generally the largest due to its comprehensive feature set.
  • The ThreeJS runner offers a good balance of features and size.
  • The PlayCanvas runner is optimized for performance and smaller bundle sizes, making it ideal for mobile-first applications.
  • The Lite versions are much smaller for all three engines.
• Engine-Specific Strengths:
  • BabylonJS: Best for projects requiring physics (Havok), GUI elements, and maximum compatibility with visual scripts.
  • ThreeJS: Excellent for projects already using ThreeJS or needing its vast ecosystem.
  • PlayCanvas: Perfect for high-performance applications, mobile optimization, and game development.

No matter your preference, we love all three of these incredible game engines, and we are excited to see what you will create with them using Bitbybit.dev!

Where to Find the Runners​

We are serving the Bitbybit Runners from the Bitbybit CDN. You can include them in your website with the following script tags. Remember to replace <version-number-of-bitbybit> with the actual version you intend to use.

• bitbybit-runner-babylonjs.js (Full BabylonJS runner)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-babylonjs.js"></script>
  

• bitbybit-runner-lite-babylonjs.js (Lite BabylonJS runner - BabylonJS must be loaded separately)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-lite-babylonjs.js"></script>
  

• bitbybit-runner-threejs.js (Full ThreeJS runner)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-threejs.js"></script>
  

• bitbybit-runner-lite-threejs.js (Lite ThreeJS runner - ThreeJS must be loaded separately)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-lite-threejs.js"></script>
  

• bitbybit-runner-playcanvas.js (Full PlayCanvas runner) (Added 2026)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-playcanvas.js"></script>
  

• bitbybit-runner-lite-playcanvas.js (Lite PlayCanvas runner - PlayCanvas must be loaded separately) (Added 2026)

  <script src="https://git-cdn.bitbybit.dev/v<version-number-of-bitbybit>/runner/bitbybit-runner-lite-playcanvas.js"></script>
  

Note: You should replace <version-number-of-bitbybit> with an actual version number (e.g., <Version />). You can find all the official versions of Bitbybit.dev here: ➡️ Bitbybit.dev GitHub Releases

Examples of the Runners​

It can be hard to guess how runners can be used in practice, which is why we provide you with actual, working examples. We create projects that fit within a single index.html file, which you can simply open in your browser directly from your file system. This approach doesn't even require you to run a local server on your computer. That’s the true power of the web!

➡️ Explore Example Use Cases of BabylonJS, ThreeJS & PlayCanvas Runners on GitHub

This GitHub repository contains examples that use both the full and Lite runners for all three game engines. We also provide examples on how to initialize BabylonJS, ThreeJS, or PlayCanvas scene objects outside the context of the runner. This approach allows Bitbybit Runners to work more harmoniously with third-party tools or existing projects that already manage their own game engine instances (e.g., integrating with A-Frame, custom ThreeJS setups, or PlayCanvas Editor projects).

Initiating scene objects inside the runner (letting the runner create the default scene) is also possible and is often simpler, though it offers less fine-grained control if you have a complex existing setup.

We hope these updated runners provide even more flexibility and power for your 3D web projects!