diff --git a/docs/blog/2026-01-21-release-v1-rc0.md b/docs/blog/2026-01-21-release-v1-rc0.md
index 7aea9e7e..5be20515 100644
--- a/docs/blog/2026-01-21-release-v1-rc0.md
+++ b/docs/blog/2026-01-21-release-v1-rc0.md
@@ -2,7 +2,7 @@
slug: bitbybit-v1-release-candidate-0
title: "Bitbybit v1.0.0 Release Candidate 0 - A New Foundation for 3D CAD on the Web"
authors: [ubarevicius]
-tags: [bitbybit, cad, occt, release]
+tags: [bitbybit, cad, occt]
description: "After nearly 100 releases in the 0.x.x range, version 1.0.0 Release Candidate 0 is now available. This milestone brings a completely rebuilt core on top of native OCCT, significant performance improvements, and exciting new features."
---
diff --git a/docs/blog/2026-02-04-step-assembly-support.mdx b/docs/blog/2026-02-04-step-assembly-support.mdx
new file mode 100644
index 00000000..cc6fb353
--- /dev/null
+++ b/docs/blog/2026-02-04-step-assembly-support.mdx
@@ -0,0 +1,119 @@
+---
+slug: step-assembly-support-v1-rc1
+title: "STEP Assembly Support: Load, Parse, and Export Professional CAD Files"
+authors: [ubarevicius]
+tags: [occt, assembly, step, gltf, cad, freecad]
+description: "Bitbybit v1.0.0-rc.1 introduces STEP assembly support - load complex CAD files, parse part hierarchies, extract components, preserve colors, and export to GLTF or STEP formats."
+image: https://ik.imagekit.io/bitbybit/app/assets/blog/step-assembly-support/step-assembly-support-occt-bitbybit.webp
+---
+
+
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+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-rc.1**, 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.
+
+:::warning Memory Note
+Large assemblies need memory. The standard build supports up to 2GB. For complex models, use the 64-bit version (up to 16GB).
+:::
+
+## Tutorials
+
+We have step-by-step tutorials to get you started:
+
+- [Introduction to Assemblies](/learn/code/common/occt/assembly/intro) - the basics
+- [Convert STEP to GLTF](/learn/code/common/occt/assembly/step-to-gltf) - for web viewing
+- [Parse Assembly Structure](/learn/code/common/occt/assembly/assembly-structure) - explore parts
+- [Build and Export Assemblies](/learn/code/common/occt/assembly/create-assembly) - create from scratch
+- [Export Shapes with Color](/learn/code/common/occt/assembly/shape-to-step-with-color-assembly) - 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:
+
+```typescript
+// 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](https://discord.gg/GSe3VMe).
+
+## Credits
+
+The soil sensor model in our tutorials comes from [FarmBot](https://genesis.farm.bot/v1.5/Extras/cad.html), an open-source CNC farming robot. Their CAD files are public domain.
+
+---
+
+**Ready to try it?** Head to the [assembly tutorials](/learn/code/common/occt/assembly) and load your first STEP file.
diff --git a/docs/blog/tags.yml b/docs/blog/tags.yml
index ae1adc25..f979769b 100644
--- a/docs/blog/tags.yml
+++ b/docs/blog/tags.yml
@@ -1,64 +1,89 @@
bitbybit:
label: Bitbybit
permalink: /bitbybit
- description: Blog posts about Bitbybit
+ description: Platform updates, new features, and tutorials for the Bitbybit visual programming environment.
cloud:
label: Cloud
permalink: /cloud
- description: Blog posts about Cloud
+ description: Cloud, server-side services, and scalable 3D workflows.
ai:
label: AI
permalink: /ai
- description: Blog posts about Artificial Intelligence
+ description: Using AI assistants and machine learning with 3D modeling and CAD automation.
cad:
label: CAD
permalink: /cad
- description: Blog posts about Computer-Aided Design
+ description: Computer-Aided Design techniques, precision modeling, and engineering workflows.
xr:
label: XR
permalink: /xr
- description: Blog posts about Extended Reality
+ description: Extended Reality experiences combining AR, VR, and mixed reality with 3D content.
vr:
label: VR
permalink: /vr
- description: Blog posts about Virtual Reality
+ description: Virtual Reality applications for immersive 3D visualization and interaction.
3d-bits:
label: 3D Bits
permalink: /3d-bits
- description: Blog posts about 3D Bits app for Shopify and its use cases
+ description: Our Shopify app for embedding interactive 3D product configurators in online stores.
shopify:
label: Shopify
permalink: /shopify
- description: Blog posts about Shopify integrations via 3D Bits app
+ description: E-commerce integrations, product visualization, and 3D configurators for Shopify stores.
case-study:
label: Case Study
permalink: /case-study
- description: Case studies related to Bitbybit, 3D Bits and Shopify
+ description: Real-world examples of how businesses use Bitbybit and 3D Bits to solve problems.
fitness-equipment:
label: Fitness Equipment
permalink: /fitness-equipment
- description: Blog posts about fitness equipment industry and 3D visualization
+ description: 3D visualization and configuration solutions for gym and fitness equipment retailers.
babylonjs:
label: BabylonJS
permalink: /babylonjs
- description: Blog posts about Babylon.js 3D engine
+ description: Using the Babylon.js WebGL engine for real-time 3D graphics in the browser.
threejs:
label: ThreeJS
permalink: /threejs
- description: Blog posts about Three.js 3D library
+ description: Working with Three.js for lightweight 3D scenes and custom rendering pipelines.
playcanvas:
label: PlayCanvas
permalink: /playcanvas
- description: Blog posts about PlayCanvas 3D engine
\ No newline at end of file
+ description: PlayCanvas engine integration for game-like 3D experiences and interactive apps.
+
+occt:
+ label: OCCT
+ permalink: /occt
+ description: OpenCASCADE Technology - the open-source CAD kernel powering our geometry operations.
+
+assembly:
+ label: Assembly
+ permalink: /assembly
+ description: Working with multi-part CAD assemblies, hierarchies, and component structures.
+
+step:
+ label: STEP
+ permalink: /step
+ description: The ISO 10303 standard format for exchanging CAD data between different software.
+
+gltf:
+ label: GLTF
+ permalink: /gltf
+ description: The web-optimized 3D format for fast loading and rendering in browsers and apps.
+
+freecad:
+ label: FreeCAD
+ permalink: /freecad
+ description: Interoperability with FreeCAD, the popular open-source parametric CAD modeler.
diff --git a/docs/learn/code/common/occt/assembly/_category_.json b/docs/learn/code/common/occt/assembly/_category_.json
new file mode 100644
index 00000000..842f9367
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/_category_.json
@@ -0,0 +1,10 @@
+{
+ "label": "Assembly",
+ "position": 7,
+ "link": {
+ "type": "generated-index",
+ "title": "OCCT Assembly",
+ "description": "Work with OCCT assemblies: load STEP files, export to GLTF, parse hierarchy, create multi-part models, and preserve colors for CAD visualization.",
+ "slug": "/code/common/occt/assembly"
+ }
+}
\ No newline at end of file
diff --git a/docs/learn/code/common/occt/assembly/assembly-structure.mdx b/docs/learn/code/common/occt/assembly/assembly-structure.mdx
new file mode 100644
index 00000000..e2154ce3
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/assembly-structure.mdx
@@ -0,0 +1,149 @@
+---
+sidebar_position: 3
+title: "Parse Assembly Structure"
+sidebar_label: Structure
+description: Extract and navigate assembly hierarchy from STEP files - find part labels, retrieve shapes, and apply custom styling to individual components.
+tags: [occt, assembly, step, gltf, cad]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# Navigate and Extract Assembly Parts
+
+
+
+When you need to access individual parts from a STEP file, understanding the assembly structure is key. This tutorial shows you how to explore the hierarchy, find specific parts using their labels, and render them with custom colors.
+
+## How the Hierarchy Works
+
+Assemblies organize parts in a tree structure. Each part has:
+
+- A **label** (like an address): `0:1:1:3` tells you exactly where the part lives in the structure
+- A **name**: Human-readable identifier like "Mounting Plate" or "Screw"
+- **Properties**: Colors, materials, and other metadata
+
+The hierarchy preview component shows this structure visually, making it easy to find the labels you need.
+
+## The Workflow
+
+Here's what happens in the examples below:
+
+1. **Fetch the STEP file** - Download the compressed CAD model from a URL
+2. **Load into a document** - Parse the file into an OCCT document structure
+3. **Get the hierarchy** - Extract the tree structure showing all parts
+4. **Preview the hierarchy** - Display it so you can see labels and names
+5. **Extract shapes by label** - Use the labels to get specific parts
+6. **Draw with custom styling** - Render each part with your chosen colors
+
+:::tip Understanding Labels
+Labels like `0:1:1:1:6` work like folder paths on your computer. The numbers represent levels in the hierarchy:
+- `0:1` - Root level
+- `0:1:1` - First sub-assembly
+- `0:1:1:1` - Component within that sub-assembly
+- `0:1:1:1:6` - Specific shape within that component
+
+Click on items in the hierarchy preview to see their full labels!
+:::
+
+## Extract a Single Shape
+
+This first example shows the basic workflow - loading a STEP file and extracting one specific shape using its label.
+
+
+
+
+
+
+ stepDatadocumenthierarchyshapebgstepDatahttps://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZdocumentstepDatahierarchydocumenthierarchyshapedocument0:1:1:1:6shape11#ffffff#ff0000#ff00ff100.03TRUETRUEFALSE0.03FALSE0.06#ff00ffFALSE0.06#0000ffTRUE#0000ff1015100-100-1003#ffffff#ffffff1024TRUE0TRUE0.20.0010.02100007050700-50117910001000100010003bg#1a1c1f#93aacd'to top'0100","type":"blockly"}}
+ title="Parsing STEP OCCT Assembly Structure"
+ />
+
+
+
+ {\n // Setup two-color gradient background\n const backgroundOpt = new SceneTwoColorLinearGradientDto();\n backgroundOpt.colorFrom = \"#1a1c1f\";\n backgroundOpt.colorTo = \"#93aacd\";\n backgroundOpt.direction = gradientDirectionEnum.toTop;\n backgroundOpt.stopFrom = 0;\n backgroundOpt.stopTo = 100;\n scene.twoColorLinearGradientBackground(backgroundOpt);\n\n // Setup directional light with shadows\n const dirLightOpt = new DirectionalLightDto();\n dirLightOpt.direction = [100, -100, -100] as Vector3;\n dirLightOpt.intensity = 3;\n dirLightOpt.diffuse = \"#ffffff\";\n dirLightOpt.specular = \"#ffffff\";\n dirLightOpt.shadowGeneratorMapSize = 1024;\n dirLightOpt.enableShadows = true;\n dirLightOpt.shadowDarkness = 0;\n dirLightOpt.shadowUsePercentageCloserFiltering = true;\n dirLightOpt.shadowContactHardeningLightSizeUVRatio = 0.2;\n dirLightOpt.shadowBias = 0.001;\n dirLightOpt.shadowNormalBias = 0.02;\n dirLightOpt.shadowMaxZ = 1000;\n dirLightOpt.shadowMinZ = 0;\n scene.drawDirectionalLight(dirLightOpt);\n\n // Adjust camera position and settings\n const cameraOpt = new CameraConfigurationDto();\n cameraOpt.position = [70, 50, 70] as Point3;\n cameraOpt.lookAt = [0, -5, 0] as Point3;\n cameraOpt.lowerBetaLimit = 1;\n cameraOpt.upperBetaLimit = 179;\n cameraOpt.angularSensibilityX = 1000;\n cameraOpt.angularSensibilityY = 1000;\n cameraOpt.maxZ = 1000;\n cameraOpt.panningSensibility = 1000;\n cameraOpt.wheelPrecision = 3;\n scene.adjustActiveArcRotateCamera(cameraOpt);\n\n // Fetch the STEP file from URL\n const stepData = await asset.fetchFile({\n url: \"https://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ\"\n });\n\n // Load STEP data into an OCCT document\n const loadDocOpt = new LoadStepToDocDto();\n loadDocOpt.stepData = stepData;\n const document = await manager.loadStepToDoc(loadDocOpt);\n\n // Get assembly hierarchy (useful for understanding structure)\n const hierarchyOpt = new DocumentQueryDto();\n hierarchyOpt.document = document;\n const hierarchy = await query.getAssemblyHierarchy(hierarchyOpt);\n console.log(\"Assembly Hierarchy:\", hierarchy);\n\n // Get a specific shape from the assembly using its label\n const shapeOpt = new DocumentLabelQueryDto();\n shapeOpt.document = document;\n shapeOpt.label = \"0:1:1:1:6\";\n const shape = await query.getShapeFromLabel(shapeOpt);\n\n // Draw the extracted shape with custom styling\n const drawOpt = new Bit.Inputs.Draw.DrawOcctShapeOptions();\n drawOpt.precision = 0.1;\n drawOpt.drawEdges = true;\n drawOpt.edgeColour = \"#ffffff\";\n drawOpt.edgeWidth = 10;\n drawOpt.edgeOpacity = 1;\n drawOpt.drawFaces = true;\n drawOpt.faceColour = \"#ff0000\";\n drawOpt.faceOpacity = 1;\n drawOpt.drawVertices = false;\n\n await bitbybit.draw.drawAnyAsync({\n entity: shape,\n options: drawOpt\n });\n}\n\n// Execute the main function\nstart();","type":"typescript"}}
+ title="Parsing STEP OCCT Assembly Structure"
+ />
+
+
+
+## Parse more parts
+
+Once you understand the basics, you can extract multiple parts and style them independently. This is where things get exciting - you can create custom visualizations that highlight different components, use original colors from the CAD model, or apply your own color schemes.
+
+### What's New in This Example?
+
+This advanced example introduces several important concepts:
+
+1. **Right-handed coordinate system** - Some CAD software exports models with a different orientation (Y-Up). We use `useRightHandedSystem` to ensure the model displays correctly.
+
+2. **Multiple shape extraction** - Instead of one shape, we extract four different parts using their labels.
+
+3. **Original colors from CAD** - The `getLabelColor` function retrieves the color assigned to a part in the original CAD software, preserving the designer's intent.
+
+4. **Color conversion** - CAD colors are stored as RGB objects (with values 0-1). We convert them to hex format (`#ff0000`) using `rgbObjToHex` for use in drawing options.
+
+5. **Batch rendering** - Multiple shapes can be drawn with the same styling by passing them as an array.
+
+### Why This Matters
+
+Understanding assembly structure unlocks powerful capabilities:
+
+- **Selective visualization** - Show only the parts that matter for your use case
+- **Interactive configurators** - Let users click to select and customize individual components
+- **Assembly analysis** - Check if all required parts are present
+- **Documentation** - Generate exploded views or highlight specific components
+- **Performance optimization** - Load and display only the parts you need
+
+:::info Coordinate System Note
+BabylonJS uses a left-handed coordinate system by default, which causes Y-Up models to appear mirrored. We use `useRightHandedSystem` to compensate for this. This will be improved in the next release.
+:::
+
+
+
+
+
+
+ stepDatadocumenthierarchyshape1shape2shape3shape4labelColorhexColorbgTRUEstepDatahttps://learn.bitbybit.dev/files/3d/Soil-Sensor-Y-Up.stpZdocumentstepDatahierarchydocumenthierarchyshape1document0:1:1:3shape2document0:1:1:5shape3document0:1:1:1:6shape4document0:1:1:1:7labelColordocument0:1:1:3hexColorlabelColor01shape10.1TRUEhexColorTRUE#ffffff10TRUE#0000ff1shape2shape40.01TRUE#fb05ffTRUE#00000010TRUE#0000ff1shape30.01TRUE#0011ffTRUE#ffffff10TRUE#0000ff1100-100-1003#ffffff#ffffff1024TRUE0TRUE0.20.0010.02100007050700-50117910001000100010003bg#1a1c1f#93aacd'to top'0100","type":"blockly"}}
+ title="Parsing STEP OCCT Assembly Structure Parts"
+ />
+
+
+
+ {\n // Enable right-handed coordinate system\n const rhsOpt = new UseRightHandedSystemDto();\n rhsOpt.use = true;\n scene.useRightHandedSystem(rhsOpt);\n\n // Setup two-color gradient background\n const backgroundOpt = new SceneTwoColorLinearGradientDto();\n backgroundOpt.colorFrom = \"#1a1c1f\";\n backgroundOpt.colorTo = \"#93aacd\";\n backgroundOpt.direction = gradientDirectionEnum.toTop;\n backgroundOpt.stopFrom = 0;\n backgroundOpt.stopTo = 100;\n scene.twoColorLinearGradientBackground(backgroundOpt);\n\n // Setup directional light with shadows\n const dirLightOpt = new DirectionalLightDto();\n dirLightOpt.direction = [100, -100, -100] as Vector3;\n dirLightOpt.intensity = 3;\n dirLightOpt.diffuse = \"#ffffff\";\n dirLightOpt.specular = \"#ffffff\";\n dirLightOpt.shadowGeneratorMapSize = 1024;\n dirLightOpt.enableShadows = true;\n dirLightOpt.shadowDarkness = 0;\n dirLightOpt.shadowUsePercentageCloserFiltering = true;\n dirLightOpt.shadowContactHardeningLightSizeUVRatio = 0.2;\n dirLightOpt.shadowBias = 0.001;\n dirLightOpt.shadowNormalBias = 0.02;\n dirLightOpt.shadowMaxZ = 1000;\n dirLightOpt.shadowMinZ = 0;\n scene.drawDirectionalLight(dirLightOpt);\n\n // Adjust camera position and settings\n const cameraOpt = new CameraConfigurationDto();\n cameraOpt.position = [70, 50, 70] as Point3;\n cameraOpt.lookAt = [0, -5, 0] as Point3;\n cameraOpt.lowerBetaLimit = 1;\n cameraOpt.upperBetaLimit = 179;\n cameraOpt.angularSensibilityX = 1000;\n cameraOpt.angularSensibilityY = 1000;\n cameraOpt.maxZ = 1000;\n cameraOpt.panningSensibility = 1000;\n cameraOpt.wheelPrecision = 3;\n scene.adjustActiveArcRotateCamera(cameraOpt);\n\n // Fetch the STEP file from URL (Y-Up version for right-handed system)\n const stepData = await asset.fetchFile({\n url: \"https://learn.bitbybit.dev/files/3d/Soil-Sensor-Y-Up.stpZ\"\n });\n\n // Load STEP data into an OCCT document\n const loadDocOpt = new LoadStepToDocDto();\n loadDocOpt.stepData = stepData;\n const document = await manager.loadStepToDoc(loadDocOpt);\n\n // Get assembly hierarchy (useful for understanding structure)\n const hierarchyOpt = new DocumentQueryDto();\n hierarchyOpt.document = document;\n const hierarchy = await query.getAssemblyHierarchy(hierarchyOpt);\n console.log(\"Assembly Hierarchy:\", hierarchy);\n\n // Get multiple shapes from the assembly using their labels\n const shapeOpt1 = new DocumentLabelQueryDto();\n shapeOpt1.document = document;\n shapeOpt1.label = \"0:1:1:3\";\n const shape1 = await query.getShapeFromLabel(shapeOpt1);\n\n const shapeOpt2 = new DocumentLabelQueryDto();\n shapeOpt2.document = document;\n shapeOpt2.label = \"0:1:1:5\";\n const shape2 = await query.getShapeFromLabel(shapeOpt2);\n\n const shapeOpt3 = new DocumentLabelQueryDto();\n shapeOpt3.document = document;\n shapeOpt3.label = \"0:1:1:1:6\";\n const shape3 = await query.getShapeFromLabel(shapeOpt3);\n\n const shapeOpt4 = new DocumentLabelQueryDto();\n shapeOpt4.document = document;\n shapeOpt4.label = \"0:1:1:1:7\";\n const shape4 = await query.getShapeFromLabel(shapeOpt4);\n\n // Get the color from a label in the assembly\n const colorOpt = new DocumentLabelQueryDto();\n colorOpt.document = document;\n colorOpt.label = \"0:1:1:3\";\n const labelColor = await query.getLabelColor(colorOpt);\n\n // Convert RGB object to hex color\n const hexColor = color.rgbObjToHex({\n rgb: labelColor,\n min: 0,\n max: 1\n });\n\n // Draw shape1 with color from assembly\n const drawOpt1 = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();\n drawOpt1.precision = 0.1;\n drawOpt1.drawEdges = true;\n drawOpt1.edgeColour = \"#ffffff\";\n drawOpt1.edgeWidth = 10;\n drawOpt1.drawFaces = true;\n drawOpt1.faceColour = hexColor;\n drawOpt1.drawTwoSided = true;\n drawOpt1.backFaceColour = \"#0000ff\";\n drawOpt1.backFaceOpacity = 1;\n\n await bitbybit.draw.drawAnyAsync({\n entity: shape1,\n options: drawOpt1\n });\n\n // Draw shapes 2 and 4 with magenta color\n const drawOpt2 = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();\n drawOpt2.precision = 0.01;\n drawOpt2.drawEdges = true;\n drawOpt2.edgeColour = \"#000000\";\n drawOpt2.edgeWidth = 10;\n drawOpt2.drawFaces = true;\n drawOpt2.faceColour = \"#fb05ff\";\n drawOpt2.drawTwoSided = true;\n drawOpt2.backFaceColour = \"#0000ff\";\n drawOpt2.backFaceOpacity = 1;\n\n await bitbybit.draw.drawAnyAsync({\n entity: [shape2, shape4],\n options: drawOpt2\n });\n\n // Draw shape3 with blue color\n const drawOpt3 = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();\n drawOpt3.precision = 0.01;\n drawOpt3.drawEdges = true;\n drawOpt3.edgeColour = \"#ffffff\";\n drawOpt3.edgeWidth = 10;\n drawOpt3.drawFaces = true;\n drawOpt3.faceColour = \"#0011ff\";\n drawOpt3.drawTwoSided = true;\n drawOpt3.backFaceColour = \"#0000ff\";\n drawOpt3.backFaceOpacity = 1;\n\n await bitbybit.draw.drawAnyAsync({\n entity: shape3,\n options: drawOpt3\n });\n}\n\n// Execute the main function\nstart();","type":"typescript"}}
+ title="Parsing STEP OCCT Assembly Structure Parts"
+ />
+
+
+
+## Conclusion
+
+You've learned the fundamentals of working with OCCT assembly structures! Here's a quick recap:
+
+- **Assemblies are hierarchical** - Parts are organized in a tree structure with unique labels
+- **Labels are addresses** - Use them to pinpoint and extract specific shapes
+- **Colors can be preserved** - Extract original CAD colors using `getLabelColor`
+- **Coordinate systems matter** - Use `useRightHandedSystem` when models appear incorrectly oriented
+
+With these skills, you can now build interactive 3D viewers, product configurators, and CAD visualization tools that work with professional engineering files. Try experimenting with your own STEP files to see how different assemblies are structured!
\ No newline at end of file
diff --git a/docs/learn/code/common/occt/assembly/create-assembly.mdx b/docs/learn/code/common/occt/assembly/create-assembly.mdx
new file mode 100644
index 00000000..302417e1
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/create-assembly.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_position: 5
+title: "Build and Export Assemblies"
+sidebar_label: Creating Assembly
+description: Create structured CAD assemblies with parts, instances, and hierarchies. Export STEP files compatible with FreeCAD, Fusion 360, and SolidWorks.
+tags: [occt, assembly, step, gltf, cad]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# Build Multi-Part Assemblies from Scratch
+
+
+
+This tutorial demonstrates how to create an assembly programmatically using parts and instances, then export it as a structured STEP file.
+
+## Parts, Instances, and Nodes
+
+An **assembly document** organizes your 3D model into a hierarchy:
+- **Parts** are the unique component designs (e.g., a wheel, a door, an engine)
+- **Instances** are the actual placements of those parts in your model (e.g., "put a wheel at each corner of the chassis")
+- **Assembly nodes** are containers that group related instances together (e.g., "the drivetrain" containing engine and transmission)
+
+## Why Create an Assembly?
+
+You can simply export flat BRep shapes to STEP files, but it's worth creating an assembly before you hit that export button. Here's why:
+
+### 1. Preserved Structure in CAD Software
+When you open the exported STEP file in professional CAD software like **FreeCAD**, **Fusion 360**, **SolidWorks**, **CATIA**, or **Onshape**, you'll see:
+- Each part listed separately in the model tree
+- Individual instances that can be selected, modified, or replaced
+- The full hierarchy of your assembly
+
+### 2. Efficient File Size
+When you have multiple copies of the same shape (like the 14 plugs in our example), the assembly stores the geometry once and references it multiple times with different transformations. This makes files smaller and faster to load.
+
+### 3. Part Metadata
+Each part and instance can have:
+- A unique **ID** for programmatic access
+- A human-readable **name** that appears in CAD software
+- **Colors** that are preserved in the STEP export
+- **Author** and **organization** information embedded in the file
+
+### 4. Professional Workflow Compatibility
+STEP files with assembly structure are the industry standard for exchanging CAD data between different software packages. Your colleagues using different CAD tools can open and work with your designs seamlessly.
+
+## STEP File Format
+
+The **STEP** (Standard for the Exchange of Product Data) format is an ISO standard (ISO 10303) widely supported by virtually all CAD software. When you export with the `.stpZ` extension, the file is compressed for faster downloads and smaller storage.
+
+## Example: Base with Plugs Assembly
+
+In the example below, we create an assembly with:
+- A **base part** with holes arranged in a circle
+- A **plug part** that fits into the holes
+- **14 instances** of the plug positioned around the base
+
+After running the script, download the generated `.stpZ` file and open it in your favorite CAD software to see the full assembly structure!
+
+
+
+
+
+
+ mainRadiusfromOuterRadiusbginnerRadiusplugRadiusouterCircleWireinnerCircleWiredividedPointspointsListptsmallCircleWirereversedWiretranslatedWiresingonWirewiresListbaseFacebaseExtrudedbaseChamferedplugFaceplugExtrudedplugChamferedtranslatedPlugsbasePartplugPartassemblyNodebaseInstanceNodeplugInstanceNodespartsListnodesListstructuredocumentexportedDocmainRadius13.3fromOuterRadius4innerRadiusMINUSmainRadiusfromOuterRadiusplugRadiusDIVIDEfromOuterRadius3outerCircleWiremainRadius000010innerCircleWireinnerRadius000010dividedPointsinnerCircleWire14FALSETRUEpointsListptdividedPointsINSERTLASTpointsListptsmallCircleWireplugRadius000010reversedWiresmallCircleWiretranslatedWiresi1pointsList1INSERTLASTtranslatedWiresreversedWireGETFROM_STARTpointsListingonWire00001064wiresListouterCircleWirengonWirepttranslatedWiresINSERTLASTwiresListptbaseFacewiresListTRUEbaseExtrudedbaseFace010baseChamferedbaseExtruded0.4plugFaceplugRadius0-1.50010plugExtrudedplugFace040plugChamferedplugExtruded0.4translatedPlugsi1pointsList1INSERTLASTtranslatedPlugsplugChamferedGETFROM_STARTpointsListibaseChamfered0.01TRUE#3333ffTRUE#ffffff2FALSE#0000ff1translatedPlugs0.01TRUE#33ff33TRUE#ffffff2TRUE#0000ff1basePartbase-with-holesbaseChamferedBase With HolesplugPartplugplugChamferedPlugassemblyNodeassembly-nodeBitbybit Assembly ExamplebaseInstanceNodebase-with-holes-idbase-with-holesBase With Holes Instance0000001#0000ff01plugInstanceNodesi1pointsList1INSERTLASTplugInstanceNodesplug-id-iplugPlugGETFROM_STARTpointsListi0001#33ff3301partsListbasePartplugPartnodesListassemblyNodebaseInstanceNodeptplugInstanceNodesINSERTLASTnodesListptstructurepartsListnodesListFALSEdocumentstructureexportedDocdocumentBitbybit Assembly.stpZBitbybit userBitbybitTRUETRUE-20-20-203#ffffff#ffffff2056TRUE0TRUEFALSE0.20.00010.0021000023bg#1a1c1f#93aacd'to top'0100","type":"blockly"}}
+ title="Creating STEP OCCT Assembly"
+ />
+
+
+ {\n // Parameters\n const mainRadius = 13.3;\n const fromOuterRadius = 4;\n const innerRadius = mainRadius - fromOuterRadius;\n const plugRadius = fromOuterRadius / 3;\n\n // Setup gradient background\n const bgOpt = new SceneTwoColorLinearGradientDto();\n bgOpt.direction = gradientDirectionEnum.toTop;\n scene.twoColorLinearGradientBackground(bgOpt);\n\n // Setup directional light\n const dirLightOpt = new DirectionalLightDto();\n dirLightOpt.direction = [-20, -20, -20] as Vector3;\n dirLightOpt.intensity = 3;\n scene.drawDirectionalLight(dirLightOpt);\n\n // Create outer circle wire\n const outerCircleOpt = new CircleDto();\n outerCircleOpt.radius = mainRadius;\n outerCircleOpt.center = [0, 0, 0];\n outerCircleOpt.direction = [0, 1, 0];\n const outerCircleWire = await wire.createCircleWire(outerCircleOpt);\n\n // Create inner circle wire for dividing points\n const innerCircleOpt = new CircleDto();\n innerCircleOpt.radius = innerRadius;\n innerCircleOpt.center = [0, 0, 0];\n innerCircleOpt.direction = [0, 1, 0];\n const innerCircleWire = await wire.createCircleWire(innerCircleOpt);\n\n // Divide inner wire to get points for plug placement\n const divideOpt = new DivideDto();\n divideOpt.shape = innerCircleWire;\n divideOpt.nrOfDivisions = 14;\n divideOpt.removeStartPoint = false;\n divideOpt.removeEndPoint = true;\n const dividedPoints = await wire.divideWireByParamsToPoints(divideOpt);\n\n // Flatten points list\n const pointsList: Point3[] = [];\n for (const pt of dividedPoints) {\n pointsList.push(pt);\n }\n\n // Create small circle wire for holes\n const smallCircleOpt = new CircleDto();\n smallCircleOpt.radius = plugRadius;\n smallCircleOpt.center = [0, 0, 0];\n smallCircleOpt.direction = [0, 1, 0];\n const smallCircleWire = await wire.createCircleWire(smallCircleOpt);\n\n // Reverse the wire for creating holes\n const reverseOpt = new ShapeDto();\n reverseOpt.shape = smallCircleWire;\n const reversedWire = await wire.reversedWire(reverseOpt);\n\n // Translate reversed wire to each point position\n const translatedWires: TopoDSWirePointer[] = [];\n for (const pt of pointsList) {\n const translateOpt = new TranslateDto();\n translateOpt.shape = reversedWire;\n translateOpt.translation = pt;\n const translated = await transforms.translate(translateOpt);\n translatedWires.push(translated as TopoDSWirePointer);\n }\n\n // Create hexagon wire in the center\n const ngonOpt = new NGonWireDto();\n ngonOpt.center = [0, 0, 0];\n ngonOpt.direction = [0, 1, 0];\n ngonOpt.nrCorners = 6;\n ngonOpt.radius = 4;\n const ngonWire = await wire.createNGonWire(ngonOpt);\n\n // Create wires list for face creation\n const wiresList: TopoDSWirePointer[] = [outerCircleWire, ngonWire, ...translatedWires];\n\n // Create base face from wires\n const faceFromWiresOpt = new FaceFromWiresDto();\n faceFromWiresOpt.shapes = wiresList;\n faceFromWiresOpt.planar = true;\n const baseFace = await face.createFaceFromWires(faceFromWiresOpt);\n\n // Extrude base face\n const extrudeBaseOpt = new ExtrudeDto();\n extrudeBaseOpt.shape = baseFace;\n extrudeBaseOpt.direction = [0, 1, 0];\n const baseExtruded = await operations.extrude(extrudeBaseOpt);\n\n // Chamfer base edges\n const chamferBaseOpt = new ChamferDto();\n chamferBaseOpt.shape = baseExtruded;\n chamferBaseOpt.distance = 0.4;\n const baseChamfered = await fillets.chamferEdges(chamferBaseOpt);\n\n // Create plug face\n const plugFaceOpt = new CircleDto();\n plugFaceOpt.radius = plugRadius;\n plugFaceOpt.center = [0, -1.5, 0];\n plugFaceOpt.direction = [0, 1, 0];\n const plugFace = await face.createCircleFace(plugFaceOpt);\n\n // Extrude plug\n const extrudePlugOpt = new ExtrudeDto();\n extrudePlugOpt.shape = plugFace;\n extrudePlugOpt.direction = [0, 4, 0];\n const plugExtruded = await operations.extrude(extrudePlugOpt);\n\n // Chamfer plug edges\n const chamferPlugOpt = new ChamferDto();\n chamferPlugOpt.shape = plugExtruded;\n chamferPlugOpt.distance = 0.4;\n const plugChamfered = await fillets.chamferEdges(chamferPlugOpt);\n\n // Translate plugs to each point position\n const translatedPlugs: TopoDSShapePointer[] = [];\n for (const pt of pointsList) {\n const translatePlugOpt = new TranslateDto();\n translatePlugOpt.shape = plugChamfered;\n translatePlugOpt.translation = pt;\n const translated = await transforms.translate(translatePlugOpt);\n translatedPlugs.push(translated);\n }\n\n // Draw base with blue color\n const baseDrawOpt = new DrawOcctShapeSimpleOptions();\n baseDrawOpt.precision = 0.01;\n baseDrawOpt.faceColour = \"#3333ff\";\n baseDrawOpt.edgeColour = \"#ffffff\";\n baseDrawOpt.edgeWidth = 2;\n await bitbybit.draw.drawAnyAsync({ entity: baseChamfered, options: baseDrawOpt });\n\n // Draw plugs with green color\n const plugDrawOpt = new DrawOcctShapeSimpleOptions();\n plugDrawOpt.precision = 0.01;\n plugDrawOpt.faceColour = \"#33ff33\";\n plugDrawOpt.edgeColour = \"#ffffff\";\n plugDrawOpt.edgeWidth = 2;\n plugDrawOpt.drawTwoSided = true;\n await bitbybit.draw.drawAnyAsync({ entity: translatedPlugs, options: plugDrawOpt });\n\n // Create base part\n const basePartOpt = new CreateAssemblyPartDto();\n basePartOpt.id = \"base-with-holes\";\n basePartOpt.shape = baseChamfered;\n basePartOpt.name = \"Base With Holes\";\n const basePart = await manager.createPart(basePartOpt);\n\n // Create plug part\n const plugPartOpt = new CreateAssemblyPartDto();\n plugPartOpt.id = \"plug\";\n plugPartOpt.shape = plugChamfered;\n plugPartOpt.name = \"Plug\";\n const plugPart = await manager.createPart(plugPartOpt);\n\n // Create assembly node\n const assemblyNodeOpt = new CreateAssemblyNodeDto();\n assemblyNodeOpt.id = \"assembly-node\";\n assemblyNodeOpt.name = \"Bitbybit Assembly Example\";\n assemblyNodeOpt.parentId = \"\";\n const assemblyNode = await manager.createAssemblyNode(assemblyNodeOpt);\n\n // Create base instance node\n const baseInstanceOpt = new CreateInstanceNodeDto();\n baseInstanceOpt.id = \"base-with-holes-id\";\n baseInstanceOpt.partId = \"base-with-holes\";\n baseInstanceOpt.name = \"Base With Holes Instance\";\n baseInstanceOpt.parentId = \"\";\n baseInstanceOpt.translation = [0, 0, 0];\n baseInstanceOpt.rotation = [0, 0, 0];\n baseInstanceOpt.scale = 1;\n baseInstanceOpt.colorRgba = { r: 0, g: 0, b: 1, a: 1 };\n const baseInstanceNode = await manager.createInstanceNode(baseInstanceOpt);\n\n // Create plug instance nodes for each position\n const plugInstanceNodes = [];\n for (let i = 0; i < pointsList.length; i++) {\n const plugInstanceOpt = new CreateInstanceNodeDto();\n plugInstanceOpt.id = `plug-id-${i + 1}`;\n plugInstanceOpt.partId = \"plug\";\n plugInstanceOpt.name = \"Plug\";\n plugInstanceOpt.parentId = \"\";\n plugInstanceOpt.translation = pointsList[i];\n plugInstanceOpt.rotation = [0, 0, 0];\n plugInstanceOpt.scale = 1;\n plugInstanceOpt.colorRgba = { r: 0, g: 1, b: 0, a: 1 };\n const plugInstance = await manager.createInstanceNode(plugInstanceOpt);\n plugInstanceNodes.push(plugInstance);\n }\n\n // Combine parts and nodes\n const partsList = [basePart, plugPart];\n const nodesList = [assemblyNode, baseInstanceNode, ...plugInstanceNodes];\n\n // Create assembly structure\n const combineOpt = new CombineAssemblyStructureDto();\n combineOpt.parts = partsList;\n combineOpt.nodes = nodesList;\n combineOpt.removals = [];\n combineOpt.partUpdates = [];\n combineOpt.clearDocument = false;\n const structure = await manager.combineStructure(combineOpt);\n\n // Build assembly document\n const buildDocOpt = new BuildAssemblyDocumentDto();\n buildDocOpt.structure = structure;\n const document = await manager.buildAssemblyDocument(buildDocOpt);\n\n // Export to STEP file\n const exportOpt = new ExportDocumentToStepDto();\n exportOpt.document = document;\n exportOpt.fileName = \"Bitbybit Assembly.stpZ\";\n exportOpt.author = \"Bitbybit user\";\n exportOpt.organization = \"Bitbybit\";\n exportOpt.compress = true;\n exportOpt.tryDownload = true;\n await manager.exportDocumentToStep(exportOpt);\n}\n\nstart();\n","type":"typescript"}}
+ title="Creating STEP OCCT Assembly"
+ />
+
+
diff --git a/docs/learn/code/common/occt/assembly/intro.mdx b/docs/learn/code/common/occt/assembly/intro.mdx
new file mode 100644
index 00000000..30c6e7c3
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/intro.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_position: 1
+title: "Introduction to Assemblies"
+sidebar_label: Introduction
+description: Understand what OCCT assemblies are, why STEP files matter for CAD workflows, and preview your first assembly model in the browser.
+tags: [occt, assembly, step, gltf, cad]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# OCCT Assemblies: Manage Professional CAD Assets
+
+
+
+## What Are Assemblies?
+
+If you've ever worked with CAD software like SolidWorks, Fusion 360, or FreeCAD, you've likely encountered assemblies. An **assembly** is simply a collection of individual parts that come together to form a complete product. Think of a bicycle - it's made up of wheels, a frame, handlebars, pedals, and countless other components. Each part is designed separately, but they all fit together in a structured way to create the final product.
+
+In the CAD world, assemblies are essential because real-world products are rarely made from a single piece. Instead, engineers and designers create individual components and then assemble them digitally to verify that everything fits correctly, moves as expected, and can be manufactured efficiently.
+
+## Why Are STEP Files Important?
+
+**STEP** (Standard for the Exchange of Product Data) is the most widely used file format for sharing 3D CAD models between different software applications. When you export an assembly from professional CAD software, it's often saved as a STEP file because:
+
+- **Universal compatibility** – Almost every CAD program can read and write STEP files
+- **Preserves geometry** – The exact shapes, dimensions, and relationships between parts are maintained
+- **Industry standard** – It's the go-to format for manufacturing, engineering, and product design workflows
+
+However, STEP files are designed for precision CAD work, not for web visualization. That's where Bitbybit comes in - we help you bridge the gap between engineering-grade CAD data and interactive 3D experiences in the browser.
+
+## What You'll Learn in This Section
+
+Throughout these tutorials, you'll discover how to work with OCCT assemblies in Bitbybit. We'll cover:
+
+- **Loading and previewing** – Import STEP files and display them in your 3D scene
+- **Format conversion** – Transform CAD data into web-friendly formats like glTF
+- **Parsing structure** – Extract individual parts, names, colors, and hierarchy information
+- **Creating assemblies** – Build your own multi-part models from scratch
+- **Editing and transforming** – Modify positions, rotations, and properties of assembly components
+
+Whether you're building a product configurator, an interactive documentation viewer, or a design review tool, understanding assemblies is fundamental to working with professional CAD data.
+
+## Your First Assembly Preview
+
+Let's start with something practical! The example below demonstrates the core workflow for loading a STEP file and displaying it in the browser. Click the play button to see a real CAD assembly - a soil sensor device - rendered in 3D.
+
+**How the script works:**
+
+1. **Fetch the file** – We download a compressed STEP file (`.stpZ`) from a URL using the `fetchFile` function
+2. **Convert to glTF** – The STEP data is processed by OCCT and converted to glTF/GLB format, which is optimized for real-time 3D rendering. The `meshPrecision` parameter controls the quality of the mesh - lower values mean finer detail but larger file sizes
+3. **Load into scene** – The converted GLB is loaded into a BabylonJS scene where you can rotate, zoom, and explore the model
+4. **Scene setup** – We configure lighting, camera position, and a gradient background to make the model look polished
+
+This simple pattern - fetch, convert, display - is the foundation for everything else you'll learn about assemblies. Once you understand this workflow, you can build upon it to create sophisticated CAD viewers and interactive applications.
+
+
+
+
+
+
+ bghttps://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ0.05model.glbFALSE40-40-403#ffffff#ffffff3000TRUE0TRUEFALSE0.20.010.02100067050700-50117910001000100010003bg#1a1c1f#93aacd'to top'0100","type":"blockly"}}
+ title="STEP OCCT Assembly to gLTF Preview"
+ />
+
+
+
+ {\n // Setup two-color gradient background\n const backgroundOpt = new SceneTwoColorLinearGradientDto();\n backgroundOpt.colorFrom = \"#1a1c1f\";\n backgroundOpt.colorTo = \"#93aacd\";\n backgroundOpt.direction = gradientDirectionEnum.toTop;\n backgroundOpt.stopFrom = 0;\n backgroundOpt.stopTo = 100;\n scene.twoColorLinearGradientBackground(backgroundOpt);\n\n // Setup directional light with shadows\n const dirLightOpt = new DirectionalLightDto();\n dirLightOpt.direction = [40, -40, -40] as Vector3;\n dirLightOpt.intensity = 3;\n dirLightOpt.diffuse = \"#ffffff\";\n dirLightOpt.specular = \"#ffffff\";\n dirLightOpt.shadowGeneratorMapSize = 6000;\n dirLightOpt.enableShadows = true;\n dirLightOpt.shadowDarkness = 0;\n dirLightOpt.shadowUsePercentageCloserFiltering = true;\n dirLightOpt.shadowContactHardeningLightSizeUVRatio = 0.2;\n dirLightOpt.shadowBias = 0.01;\n dirLightOpt.shadowNormalBias = 0.02;\n dirLightOpt.shadowMaxZ = 100;\n dirLightOpt.shadowMinZ = 0;\n dirLightOpt.shadowRefreshRate = 6;\n scene.drawDirectionalLight(dirLightOpt);\n\n // Adjust camera position and settings\n const cameraOpt = new CameraConfigurationDto();\n cameraOpt.position = [70, 50, 70] as Point3;\n cameraOpt.lookAt = [0, -5, 0] as Point3;\n cameraOpt.lowerBetaLimit = 1;\n cameraOpt.upperBetaLimit = 179;\n cameraOpt.angularSensibilityX = 1000;\n cameraOpt.angularSensibilityY = 1000;\n cameraOpt.maxZ = 1000;\n cameraOpt.panningSensibility = 1000;\n cameraOpt.wheelPrecision = 3;\n scene.adjustActiveArcRotateCamera(cameraOpt);\n\n // Fetch the STEP file from URL\n const stepData = await asset.fetchFile({\n url: \"https://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ\"\n });\n\n // Convert STEP to GLTF format\n const convertOpt = new ConvertStepToGltfDto();\n convertOpt.stepData = stepData;\n convertOpt.meshPrecision = 0.05;\n const glbData = await bitbybit.occt.io.convertStepToGltf(convertOpt);\n\n // Load the GLB model into the scene\n await io.loadGlbFromArrayBuffer({\n glbData: glbData,\n fileName: \"model.glb\",\n hidden: false\n });\n}\n\n// Execute the main function\nstart();","type":"typescript"}}
+ title="STEP OCCT Assembly to gLTF Preview"
+ />
+
+
+
+### About the Model
+
+The soil sensor assembly used in this example comes from [FarmBot](https://genesis.farm.bot/v1.5/Extras/cad.html) - an open-source CNC farming robot project. FarmBot is unique in the hardware world because they release all their CAD files under the **CC0 Public Domain Dedication**, meaning you can use, modify, and share these files freely without any restrictions.
+
+This makes FarmBot's models perfect for learning and experimentation. Feel free to download the file and use it in your own projects!
+
+**📥 Download:** [Soil-Sensor.stpZ](/files/3d/Soil-Sensor.stpZ)
diff --git a/docs/learn/code/common/occt/assembly/shape-to-step-with-color-assembly.mdx b/docs/learn/code/common/occt/assembly/shape-to-step-with-color-assembly.mdx
new file mode 100644
index 00000000..dc64e580
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/shape-to-step-with-color-assembly.mdx
@@ -0,0 +1,57 @@
+---
+sidebar_position: 4
+title: "Export Shapes with Color"
+sidebar_label: Shape with Color to STEP
+description: Export OCCT shapes to STEP files with preserved colors using the assembly document structure for CAD software compatibility.
+tags: [occt, assembly, step, gltf, cad]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# Preserve Colors in STEP Exports
+
+
+
+When you export a shape to a regular STEP file, it loses all color information. The geometry is preserved, but open that file in FreeCAD or Fusion 360 and everything will be gray. That's just how STEP files work.
+
+To keep colors, you need to wrap your shapes in an assembly document. This uses OCCT's XCAF format, which stores both geometry and appearance data. It's an extra step, but it means your colors will show up correctly in other CAD software.
+
+## What This Example Does
+
+The scripts below create a "pod shell" shape and export it as a colored STEP file. The geometry part uses several OCCT operations (points, wires, faces, mirrors, fillets) to build an interesting 3D solid. But the important part for this tutorial is at the end.
+
+Once we have the shape, we create an assembly structure around it. We define a part, put it inside an assembly, and assign it a white color. Then we export the whole thing to a `.stpZ` file (compressed STEP format). When you open that file in FreeCAD, the shape appears in white, just as we specified.
+
+## Try It Yourself
+
+Run the script and a `pods.stpZ` file will download automatically. Open it in FreeCAD (File → Import) and you'll see the pod shape with its white color intact.
+
+
+
+
+
+
+ bgpt1pt2pt3pt4polygonWire1polygonWire2face1polygonWire3face2polygonWire4face3offsetWirefilletWirereversedWirefaceWithHoleshell1mirroredShellcombinedShellfilletedShellthickSolidpbrMaterialpodPartassemblyNodeinstanceNodepartsListnodesListstructuredocumentexportedDoc-20-20-203#ffffff#ffffff2056TRUE0TRUEFALSE0.20.0010.02100001bg#8194b1#1c1e21center0100circle'city'10000.10.7TRUEpt11500pt2060pt3-316pt4-122.450polygonWire1pt1pt2pt3polygonWire2pt4pt3pt2face1polygonWire2TRUEpolygonWire3pt3pt43-20face2polygonWire3TRUEpolygonWire4pt1pt33-20face3polygonWire4TRUEoffsetWirepolygonWire1-0.60.0001filletWireoffsetWire0.2reversedWirefilletWirefaceWithHolepolygonWire1reversedWireTRUEshell1faceWithHoleface1face2face31e-7mirroredShellshell1000001combinedShellshell1mirroredShell1e-7filletedShellcombinedShell0.1thickSolidfilletedShell0.2pbrMaterialCustom Material#ff0000#0000000.80.81FALSE2thickSolid0.01pbrMaterialTRUE#0000001podPartpod-shellthickSolidPod Shell#ff000001assemblyNodepod-assemblyPod Assembly#ff000001instanceNodepod-instancepod-shellpodpod-assembly0000001#ff000001partsListpodPartnodesListassemblyNodeinstanceNodestructurepartsListnodesListFALSEdocumentstructureexportedDocdocumentpods.stpZBitbybit userBitbybitTRUETRUE","type":"blockly"}}
+ title="Shape with Color to STEP Export"
+ />
+
+
+ {\n // Setup directional light\n const dirLightOpt = new DirectionalLightDto();\n dirLightOpt.direction = [-20, -20, -20] as Vector3;\n dirLightOpt.intensity = 3;\n dirLightOpt.shadowGeneratorMapSize = 2056;\n dirLightOpt.enableShadows = true;\n dirLightOpt.shadowBias = 0.001;\n dirLightOpt.shadowNormalBias = 0.02;\n scene.drawDirectionalLight(dirLightOpt);\n\n // Setup radial gradient background\n const bgOpt = new SceneTwoColorRadialGradientDto();\n bgOpt.colorFrom = \"#8194b1\";\n bgOpt.colorTo = \"#1c1e21\";\n bgOpt.position = gradientPositionEnum.center;\n bgOpt.shape = gradientShapeEnum.circle;\n scene.twoColorRadialGradientBackground(bgOpt);\n\n // Enable skybox (hidden but provides environment lighting)\n const skyboxOpt = new SkyboxDto();\n skyboxOpt.skybox = skyboxEnum.city;\n skyboxOpt.size = 1000;\n skyboxOpt.blur = 0.1;\n skyboxOpt.environmentIntensity = 0.7;\n skyboxOpt.hideSkybox = true;\n scene.enableSkybox(skyboxOpt);\n\n // Define the 4 key points for the pod shell geometry\n const pt1: Point3 = [15, 0, 0];\n const pt2: Point3 = [0, 6, 0];\n const pt3: Point3 = [-3, 1, 6];\n const pt4: Point3 = [-12, 2.45, 0];\n const pt5: Point3 = [3, -2, 0];\n\n // Create polygon wire 1 (pt1, pt2, pt3)\n const poly1Opt = new PolygonDto();\n poly1Opt.points = [pt1, pt2, pt3];\n const polygonWire1 = await wire.createPolygonWire(poly1Opt);\n\n // Create polygon wire 2 (pt4, pt3, pt2)\n const poly2Opt = new PolygonDto();\n poly2Opt.points = [pt4, pt3, pt2];\n const polygonWire2 = await wire.createPolygonWire(poly2Opt);\n\n // Create face 1 from polygonWire2\n const face1Opt = new FaceFromWireDto();\n face1Opt.shape = polygonWire2;\n face1Opt.planar = true;\n const face1 = await face.createFaceFromWire(face1Opt);\n\n // Create polygon wire 3 (pt3, pt4, pt5)\n const poly3Opt = new PolygonDto();\n poly3Opt.points = [pt3, pt4, pt5];\n const polygonWire3 = await wire.createPolygonWire(poly3Opt);\n\n // Create face 2 from polygonWire3\n const face2Opt = new FaceFromWireDto();\n face2Opt.shape = polygonWire3;\n face2Opt.planar = true;\n const face2 = await face.createFaceFromWire(face2Opt);\n\n // Create polygon wire 4 (pt1, pt3, pt5)\n const poly4Opt = new PolygonDto();\n poly4Opt.points = [pt1, pt3, pt5];\n const polygonWire4 = await wire.createPolygonWire(poly4Opt);\n\n // Create face 3 from polygonWire4\n const face3Opt = new FaceFromWireDto();\n face3Opt.shape = polygonWire4;\n face3Opt.planar = true;\n const face3 = await face.createFaceFromWire(face3Opt);\n\n // Offset polygonWire1 to create inner wire for the hole\n const offsetOpt = new OffsetDto();\n offsetOpt.shape = polygonWire1;\n offsetOpt.distance = -0.6;\n offsetOpt.tolerance = 0.0001;\n const offsetWire = await operations.offset(offsetOpt);\n\n // Fillet the offset wire corners\n const fillet2dOpt = new FilletDto();\n fillet2dOpt.shape = offsetWire as TopoDSWirePointer;\n fillet2dOpt.radius = 0.2;\n const filletWire = await fillets.fillet2d(fillet2dOpt);\n\n // Reverse the filleted wire for hole creation\n const reverseOpt = new ShapeDto();\n reverseOpt.shape = filletWire as TopoDSWirePointer;\n const reversedWire = await wire.reversedWire(reverseOpt);\n\n // Create face with hole from polygonWire1 (outer) and reversedWire (hole)\n const faceWithHoleOpt = new FaceFromWiresDto();\n faceWithHoleOpt.shapes = [polygonWire1, reversedWire];\n faceWithHoleOpt.planar = true;\n const faceWithHole = await face.createFaceFromWires(faceWithHoleOpt);\n\n // Sew all faces into a shell\n const sew1Opt = new SewDto();\n sew1Opt.shapes = [faceWithHole, face1, face2, face3] as TopoDSFacePointer[];\n sew1Opt.tolerance = 0.0000001;\n const shell1 = await shell.sewFaces(sew1Opt);\n\n // Mirror the shell along Z normal to create the other half\n const mirrorOpt = new MirrorAlongNormalDto();\n mirrorOpt.shape = shell1;\n mirrorOpt.origin = [0, 0, 0];\n mirrorOpt.normal = [0, 0, 1];\n const mirroredShell = await transforms.mirrorAlongNormal(mirrorOpt);\n\n // Sew both shells together\n const sew2Opt = new SewDto();\n sew2Opt.shapes = [shell1, mirroredShell];\n sew2Opt.tolerance = 0.0000001;\n const combinedShell = await shell.sewFaces(sew2Opt);\n\n // Fillet edges of the combined shell\n const filletEdgesOpt = new FilletDto();\n filletEdgesOpt.shape = combinedShell;\n filletEdgesOpt.radius = 0.1;\n const filletedShell = await fillets.filletEdges(filletEdgesOpt);\n\n // Make thick solid from the shell\n const thickSolidOpt = new ThisckSolidSimpleDto();\n thickSolidOpt.shape = filletedShell;\n thickSolidOpt.offset = 0.2;\n const thickSolid = await operations.makeThickSolidSimple(thickSolidOpt);\n\n // Create PBR material for rendering\n const pbrOpt = new PBRMetallicRoughnessDto();\n pbrOpt.name = \"Custom Material\";\n pbrOpt.baseColor = \"#ff0000\";\n pbrOpt.emissiveColor = \"#000000\";\n pbrOpt.metallic = 0.8;\n pbrOpt.roughness = 0.8;\n pbrOpt.alpha = 1;\n pbrOpt.backFaceCulling = false;\n pbrOpt.zOffset = 2;\n const pbrMaterial = material.pbrMetallicRoughness.create(pbrOpt);\n\n // Draw the shape with material\n const drawOpt = new DrawOcctShapeMaterialOptions();\n drawOpt.precision = 0.01;\n drawOpt.drawEdges = true;\n drawOpt.edgeColour = \"#000000\";\n drawOpt.edgeWidth = 1;\n drawOpt.faceMaterial = pbrMaterial;\n await bitbybit.draw.drawAnyAsync({ entity: thickSolid, options: drawOpt });\n\n // Create the pod part for the assembly\n const podPartOpt = new CreateAssemblyPartDto();\n podPartOpt.id = \"pod-shell\";\n podPartOpt.shape = thickSolid;\n podPartOpt.name = \"Pod Shell\";\n podPartOpt.colorRgba = { r: 1, g: 0, b: 0, a: 1 };\n const podPart = await manager.createPart(podPartOpt);\n\n // Create assembly node\n const assemblyNodeOpt = new CreateAssemblyNodeDto();\n assemblyNodeOpt.id = \"pod-assembly\";\n assemblyNodeOpt.name = \"Pod Assembly\";\n assemblyNodeOpt.parentId = \"\";\n assemblyNodeOpt.colorRgba = { r: 1, g: 0, b: 0, a: 1 };\n const assemblyNode = await manager.createAssemblyNode(assemblyNodeOpt);\n\n // Create instance node with white color\n const instanceNodeOpt = new CreateInstanceNodeDto();\n instanceNodeOpt.id = \"pod-instance\";\n instanceNodeOpt.partId = \"pod-shell\";\n instanceNodeOpt.name = \"pod\";\n instanceNodeOpt.parentId = \"pod-assembly\";\n instanceNodeOpt.translation = [0, 0, 0];\n instanceNodeOpt.rotation = [0, 0, 0];\n instanceNodeOpt.scale = 1;\n instanceNodeOpt.colorRgba = { r: 1, g: 0, b: 0, a: 1 };\n const instanceNode = await manager.createInstanceNode(instanceNodeOpt);\n\n // Combine parts and nodes into structure\n const partsList = [podPart];\n const nodesList = [assemblyNode, instanceNode];\n\n const combineOpt = new CombineAssemblyStructureDto();\n combineOpt.parts = partsList;\n combineOpt.nodes = nodesList;\n combineOpt.removals = [];\n combineOpt.partUpdates = [];\n combineOpt.clearDocument = false;\n const structure = await manager.combineStructure(combineOpt);\n\n // Build assembly document\n const buildDocOpt = new BuildAssemblyDocumentDto();\n buildDocOpt.structure = structure;\n const document = await manager.buildAssemblyDocument(buildDocOpt);\n\n // Export to STEP file with color preserved\n const exportOpt = new ExportDocumentToStepDto();\n exportOpt.document = document;\n exportOpt.fileName = \"pods.stpZ\";\n exportOpt.author = \"Bitbybit user\";\n exportOpt.organization = \"Bitbybit\";\n exportOpt.compress = true;\n exportOpt.tryDownload = true;\n await manager.exportDocumentToStep(exportOpt);\n}\n\nstart();\n","type":"typescript"}}
+ title="Shape with Color to STEP Export"
+ />
+
+
diff --git a/docs/learn/code/common/occt/assembly/step-to-gltf.mdx b/docs/learn/code/common/occt/assembly/step-to-gltf.mdx
new file mode 100644
index 00000000..9f6a6581
--- /dev/null
+++ b/docs/learn/code/common/occt/assembly/step-to-gltf.mdx
@@ -0,0 +1,108 @@
+---
+sidebar_position: 2
+title: "Convert STEP to GLTF"
+sidebar_label: STEP to GLTF
+description: Convert STEP files to web-optimized GLTF/GLB format directly in the browser with privacy-preserving local processing.
+tags: [occt, assembly, step, gltf, cad]
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
+
+# Export STEP Files to GLTF
+
+
+
+This tutorial shows you how to convert STEP files to web-optimized GLTF/GLB format - with all processing happening directly in your browser.
+
+## Why Export to GLTF?
+
+STEP files preserve precise CAD geometry but aren't optimized for web viewing. GLTF (the "JPEG of 3D") loads quickly in browsers and 3D engines while preserving colors and structure from the original file.
+
+## Browser-Based Conversion
+
+All conversions happen **entirely in your browser** - no files are uploaded to any cloud servers. This has important implications:
+
+### Privacy Advantage
+Your CAD files never leave your computer. While you do need to use Bitbybit editors to run these conversions, your files are processed locally and are not uploaded to any cloud servers. This is critical for confidential engineering data, proprietary designs, or any situation where data privacy matters.
+
+:::tip Local File Storage
+If you cannot host your files on publicly accessible hosting providers, you can upload them to local browser storage instead. Learn more about this option in our [Local Assets guide](/learn/getting-started/basics/assets/local/intro).
+:::
+
+### Performance Considerations
+Since everything runs locally, conversion speed depends on your device's hardware. For most models, this works great. However, for large or complex STEP files, you may encounter memory limitations.
+
+:::warning Memory Limits for Large Models
+The standard 32-bit version of Bitbybit can use up to **2 GB of RAM**, which may not be enough for larger STEP files. If you're working with complex assemblies or high-detail models, consider using the **64-bit version** which supports up to **16 GB of RAM**. This makes a significant difference for industrial-scale CAD data.
+:::
+
+## The Conversion Process
+
+The workflow is simple:
+
+1. **Fetch the STEP file** - Download the compressed `.stpZ` file from a URL
+2. **Load into OCCT document** - Parse it using OpenCASCADE's assembly parser
+3. **Export to GLTF** - Convert the document to binary GLB format with automatic download
+
+## Export Settings Explained
+
+| Setting | Value | Purpose |
+|---------|-------|---------|
+| `meshDeflection` | 0.05 | Controls mesh accuracy - smaller = more triangles, higher quality |
+| `meshAngle` | 0.5 | Angular tolerance for curved surfaces (in radians) |
+| `mergeFaces` | false | Keep faces separate (useful for per-part coloring) |
+| `forceUVExport` | true | Include texture coordinates for future texturing |
+| `fileName` | "assembly.glb" | Output filename with `.glb` extension for binary format |
+| `tryDownload` | true | Automatically trigger browser download when complete |
+
+:::tip Mesh Quality vs. File Size
+Lower `meshDeflection` values create smoother, more accurate meshes but result in larger files. For web use, values between 0.01 and 0.1 usually provide a good balance. Start with 0.05 and adjust based on your needs.
+
+For **larger models**, use higher precision values (e.g., 0.1 or higher) to reduce mesh complexity, processing time, and output file size. This helps prevent memory issues and speeds up the conversion.
+:::
+
+
+
+
+
+
+ stepDatadocumentgltfstepDatahttps://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZdocumentstepDatagltfdocument0.050.5FALSETRUEassembly.glbTRUE","type":"blockly"}}
+ title="STEP to gLTF Export"
+ />
+
+
+
+ {\n // Fetch the STEP file from URL\n const stepData = await asset.fetchFile({\n url: \"https://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ\"\n });\n\n // Load STEP data into an OCCT document\n const loadDocOpt = new LoadStepToDocDto();\n loadDocOpt.stepData = stepData;\n const document = await manager.loadStepToDoc(loadDocOpt);\n\n // Export the document to GLTF (binary GLB format)\n const exportOpt = new ExportDocumentToGltfDto();\n exportOpt.document = document;\n exportOpt.meshDeflection = 0.05;\n exportOpt.meshAngle = 0.5;\n exportOpt.mergeFaces = false;\n exportOpt.forceUVExport = true;\n exportOpt.fileName = \"assembly.glb\";\n exportOpt.tryDownload = true;\n\n const gltfData = await manager.exportDocumentToGltf(exportOpt);\n console.log(\"GLTF exported successfully!\", gltfData);\n}\n\n// Execute the main function\nstart();","type":"typescript"}}
+ title="STEP to gLTF Export"
+ />
+
+
+
+## What Happens After Export?
+
+When you run these examples with `tryDownload: true`, your browser will automatically download the GLB file. You can then:
+
+- **View it** in any GLTF viewer (like [gltf-viewer.donmccurdy.com](https://gltf-viewer.donmccurdy.com/))
+- **Use it** in game engines like Unity, Unreal, or Godot
+- **Embed it** in websites using Three.js, BabylonJS, or model-viewer
+- **Share it** with clients who don't have CAD software
+
+## Conclusion
+
+You've learned how to convert STEP files to GLTF directly in the browser - no server or desktop software required! This opens up powerful possibilities for CAD visualization, e-commerce product displays, and engineering documentation.
+
+The key takeaway: Bitbybit brings industrial-grade CAD processing to the web, making it easy to bridge the gap between engineering data and modern 3D experiences.
diff --git a/docs/learn/tags.yml b/docs/learn/tags.yml
index f8277d3b..1c4f1fbf 100644
--- a/docs/learn/tags.yml
+++ b/docs/learn/tags.yml
@@ -1,819 +1,829 @@
getting-started:
label: Getting Started
permalink: /getting-started
- description: Getting started with Bitbybit, a platform for building and sharing 3D applications.
+ description: First steps with Bitbybit - setting up your account, creating projects, and building your first 3D application.
rete:
label: Rete
permalink: /rete
- description: Rete is a visual-programming environment for building parametric 3D models and applications.
+ description: Node-based visual programming with drag-and-drop components for building parametric 3D models.
blockly:
label: Blockly
permalink: /blockly
- description: Blockly is a visual programming library for building web applications with a block-based interface.
+ description: Beginner-friendly block-based programming, great for learning 3D logic without typing code.
typescript:
label: TypeScript
permalink: /typescript
- description: TypeScript is a superset of JavaScript that adds static types, enhancing code quality and maintainability.
+ description: Writing code with full type safety, autocompletion, and access to all Bitbybit APIs.
monaco:
label: Monaco Editor
permalink: /monaco-editor
- description: Monaco Editor is a powerful code editor that provides rich editing features for web applications.
+ description: The code editor powering Bitbybit's TypeScript environment, same as VS Code.
threejs:
label: Three.js
permalink: /threejs
- description: Three.js is a JavaScript library that simplifies the creation of 3D graphics in the browser.
+ description: Rendering 3D scenes with the popular Three.js library for lightweight web graphics.
babylonjs:
label: Babylon.js
permalink: /babylonjs
- description: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
+ description: Full-featured 3D engine with advanced rendering, physics, and post-processing effects.
playcanvas:
label: PlayCanvas
permalink: /playcanvas
- description: PlayCanvas is a web-based game engine and development platform for building 3D applications.
+ description: Game-engine style 3D development for interactive experiences and applications.
occt:
label: OCCT
permalink: /occt
- description: Open CASCADE Technology (OCCT) is a kernel for 3D CAD, CAM, CAE, and more.
+ description: OpenCASCADE geometry kernel for precise CAD operations like booleans, fillets, and STEP export.
+
+step:
+ label: STEP
+ permalink: /step
+ description: ISO standard CAD format for exchanging engineering data with desktop software.
+
+assembly:
+ label: Assembly
+ permalink: /assembly
+ description: Multi-part CAD models with hierarchies, instances, and preserved colors.
vector:
label: Vector
permalink: /vector
- description: Vector is a category in Bitbybit that deals with vectors and operations on vectors.
+ description: Direction and magnitude operations - normalize, dot product, cross product, angles.
point:
label: Point
permalink: /point
- description: Point is a category in Bitbybit that deals with points and operations on points.
+ description: 3D coordinate operations - distances, midpoints, transformations, grids.
math:
label: Math
permalink: /math
- description: Math is a category in Bitbybit that deals with mathematical operations and functions.
+ description: Numeric functions - rounding, clamping, trigonometry, random values, sequences.
color:
label: Color
permalink: /color
- description: Color is a category in Bitbybit that deals with colors and color operations.
+ description: Color creation and conversion between hex, RGB, HSL, and other formats.
logic:
label: Logic
permalink: /logic
- description: Logic is a category in Bitbybit that deals with logical operations and boolean algebra.
+ description: Boolean operations, conditionals, comparisons, and flow control.
mesh:
label: Mesh
permalink: /mesh
- description: Mesh is a category in Bitbybit that deals with 3D meshes and operations on meshes.
+ description: Triangle-based 3D geometry for fast rendering and game-engine compatibility.
lists:
label: Lists
permalink: /lists
- description: Lists is a category in Bitbybit that deals with lists and operations on lists.
+ description: Array operations - sorting, filtering, mapping, grouping, flattening.
text:
label: Text
permalink: /text
- description: Text is a category in Bitbybit that deals with text manipulation and operations.
+ description: String manipulation - splitting, joining, formatting, parsing.
dates:
label: Dates
permalink: /dates
- description: Dates is a category in Bitbybit that deals with date and time operations.
+ description: Date and time formatting, calculations, and timezone handling.
line:
label: Line
permalink: /line
- description: Line is a category in Bitbybit that deals with lines and operations on lines.
+ description: Straight line geometry - creation, intersection, projection, subdivision.
polyline:
label: Polyline
permalink: /polyline
- description: Polyline is a category in Bitbybit that deals with polylines and operations on polylines.
+ description: Connected line segments forming paths, profiles, and wire-frame geometry.
manifold:
label: Manifold
permalink: /manifold
- description: Manifold is a geometry kernel for building 3D geometries and applications.
+ description: Fast CSG geometry kernel optimized for boolean operations and 3D printing.
jscad:
label: JSCAD
permalink: /jscad
- description: JSCAD is a JavaScript-based CSG modeling kernel for creating 3D models programmatically.
+ description: JavaScript-based solid modeling with CSG primitives and operations.
npm-packages:
label: NPM Packages
permalink: /npm-packages
- description: NPM packages are reusable Bitbybit code modules that can be shared and used in JavaScript & TypeScript applications.
+ description: Publishing and using Bitbybit scripts as reusable NPM modules.
configurators:
label: Configurators
permalink: /configurators
- description: Configurators are 3D applications that allow users to customize and configure products interactively.
+ description: Interactive 3D product customizers for e-commerce and sales tools.
github:
label: GitHub
permalink: /github
- description: GitHub is a platform for version control and collaboration, allowing developers to work together on projects.
+ description: Connecting Bitbybit projects to GitHub repositories for version control.
projects:
label: Projects
permalink: /projects
- description: Category that discusses how to manage projects inside Bitbybit
+ description: Creating, organizing, and managing your Bitbybit projects and files.
scripts:
label: Scripts
permalink: /scripts
- description: Category that discusses how to manage script inside Bitbybit projects
+ description: Writing and organizing executable code files within projects.
assets:
label: Assets
permalink: /assets
- description: Assets are usually files that you can upload to Bitbybit and use in your projects, such as images, 3D models, and other media.
+ description: Uploading and managing images, 3D models, textures, and other media files.
runners:
label: Runners
permalink: /runners
- description: The Runner is a tool for executing scripts and automating tasks in Bitbybit projects.
+ description: Executing scripts in different environments - browser, server, or embedded.
unit-tests:
label: Unit Tests
permalink: /unit-tests
- description: Unit tests are automated tests that verify the functionality of individual components in Bitbybit projects.
+ description: Automated testing to verify your scripts work correctly as you make changes.
development:
label: Development
permalink: /development
- description: Development refers to the process of creating and maintaining Bitbybit projects, including coding, testing, and deployment.
+ description: Local development setup, debugging, and integrating Bitbybit into your workflow.
code:
label: Code
permalink: /code
- description: Code examples and snippets for Bit by Bit projects.
+ description: Programming examples and patterns for common 3D tasks.
base:
label: Base
permalink: /base
- description: Base is a category in Bitbybit that provides foundational components such as math, vector, point, color and other.
+ description: Foundational utilities - math, vectors, points, colors, and data transformations.
draw:
label: Draw
permalink: /draw
- description: Explains Bitbybit coding category called "draw"
+ description: Rendering geometry to the 3D viewport with materials, colors, and edge styling.
shopify:
label: Shopify
permalink: /shopify
- description: Shopify is an e-commerce platform that allows you to create and manage online stores.
+ description: Integrating 3D configurators and viewers into Shopify stores.
3d-bits:
label: 3D Bits
permalink: /3d-bits
- description: 3D Bits is application that Bitbybit has developed for Shopify merchants - it can be installed on their webshops.
+ description: Our Shopify app for adding interactive 3D product visualization to online stores.
open-source:
label: Open Source
permalink: /open-source
- description: Open source refers to software whose source code is available for anyone to view, use, modify, and distribute.
+ description: Bitbybit's open-source libraries and how to contribute.
licensing:
label: Licensing
permalink: /licensing
- description: Licensing refers to the legal permissions and restrictions associated with using, modifying, and distributing software.
+ description: Understanding license terms for Bitbybit libraries and commercial use.
ai:
label: AI
permalink: /ai
- description: AI refers to artificial intelligence technologies and applications, including machine learning and natural language processing.
+ description: Using AI assistants to generate and modify 3D scripts with natural language prompts.
viewer-editor:
label: Viewer Editor
permalink: /viewer-editor
- description: Viewer Editor is powerful No-Code eCommerce solution
+ description: No-code tool for configuring 3D product viewers without writing any scripts.
canvas:
label: Canvas
permalink: /canvas
- description: Canvas refers to the 3D viewport and rendering area in Bitbybit applications.
+ description: The 3D viewport where models are rendered and users interact with the scene.
styling:
label: Styling
permalink: /styling
- description: Styling refers to customizing the visual appearance of 3D elements and UI components.
+ description: Customizing colors, materials, and visual appearance of 3D elements.
layout:
label: Layout
permalink: /layout
- description: Layout refers to the arrangement and organization of UI elements and 3D scenes.
+ description: Arranging UI panels, controls, and 3D viewports in your application.
architecture:
label: Architecture
permalink: /architecture
- description: Architecture refers to the technical design and structure of Bitbybit applications.
+ description: How Bitbybit apps are structured and best practices for organizing code.
security:
label: Security
permalink: /security
- description: Security refers to protecting data, assets, and user information in Bitbybit applications.
+ description: Protecting scripts, assets, and user data in production applications.
advanced:
label: Advanced
permalink: /advanced
- description: Advanced features and techniques for experienced Bitbybit users.
+ description: Complex techniques for experienced users pushing beyond the basics.
rotation:
label: Rotation
permalink: /rotation
- description: Rotation refers to rotating 3D objects and camera movements in 3D space.
+ description: Spinning objects and controlling orientation in 3D space.
animation:
label: Animation
permalink: /animation
- description: Animation refers to creating motion and transitions in 3D scenes.
+ description: Creating movement, transitions, and dynamic behavior in 3D scenes.
auto-rotate:
label: Auto-Rotate
permalink: /auto-rotate
- description: Auto-rotate refers to automatic rotation of 3D models for showcasing products.
+ description: Automatic spinning of products when users aren't interacting.
idle:
label: Idle
permalink: /idle
- description: Idle state refers to automatic behaviors when users are not interacting with the application.
+ description: Behaviors triggered after a period of user inactivity.
multiple-models:
label: Multiple Models
permalink: /multiple-models
- description: Working with multiple 3D models in a single scene.
+ description: Loading and managing several 3D models in one scene.
scene-management:
label: Scene Management
permalink: /scene-management
- description: Managing and organizing complex 3D scenes with multiple objects.
+ description: Organizing objects, lights, and cameras in complex 3D scenes.
performance:
label: Performance
permalink: /performance
- description: Performance optimization techniques for faster loading and rendering.
+ description: Making your 3D applications load faster and render smoothly.
organization:
label: Organization
permalink: /organization
- description: Organizing and structuring projects, files, and 3D assets.
+ description: Structuring projects, naming conventions, and file management.
options:
label: Options
permalink: /options
- description: Product options and configuration settings for eCommerce configurators.
+ description: Product configuration choices that users can select.
mapping:
label: Mapping
permalink: /mapping
- description: Mapping between different data structures and naming conventions.
+ description: Connecting user selections to 3D changes like materials or visibility.
compatibility:
label: Compatibility
permalink: /compatibility
- description: Ensuring compatibility across different platforms and versions.
+ description: Ensuring apps work across browsers, devices, and platforms.
maintenance:
label: Maintenance
permalink: /maintenance
- description: Maintaining and updating applications over time.
+ description: Updating and maintaining applications after deployment.
tutorial:
label: Tutorial
permalink: /tutorial
- description: Step-by-step tutorials for learning Bitbybit features.
+ description: Step-by-step guides walking through specific features or projects.
interface:
label: Interface
permalink: /interface
- description: User interface components and interactions.
+ description: Bitbybit's user interface and how to navigate it.
ui:
label: UI
permalink: /ui
- description: User interface design and components.
+ description: Building user interface elements and controls for your apps.
overview:
label: Overview
permalink: /overview
- description: Overview and introduction to Bitbybit features.
+ description: High-level introductions to Bitbybit concepts and capabilities.
no-code:
label: No-Code
permalink: /no-code
- description: No-code tools and visual programming interfaces.
+ description: Building 3D applications without writing any code.
toolbar:
label: Toolbar
permalink: /toolbar
- description: Toolbar buttons and controls in Bitbybit applications.
+ description: Toolbar controls and actions available in the editor.
reference:
label: Reference
permalink: /reference
- description: Reference documentation and API guides.
+ description: Technical documentation and API details for developers.
dimensions:
label: Dimensions
permalink: /dimensions
- description: Dimension annotations and measurements on 3D models.
+ description: Adding measurement labels and size annotations to 3D models.
angular:
label: Angular
permalink: /angular
- description: Angular dimensions for measuring angles.
+ description: Angle measurements between edges or surfaces.
angles:
label: Angles
permalink: /angles
- description: Angle measurements and calculations.
+ description: Working with angular values and rotations.
measurements:
label: Measurements
permalink: /measurements
- description: Measurements and dimension annotations.
+ description: Displaying sizes, distances, and dimensions on models.
degrees:
label: Degrees
permalink: /degrees
- description: Degree units for angle measurements.
+ description: Angle units and degree-based calculations.
bounding-box:
label: Bounding Box
permalink: /bounding-box
- description: Bounding box dimensions showing overall product size.
+ description: Overall dimensions showing how much space a model occupies.
overall-size:
label: Overall Size
permalink: /overall-size
- description: Overall dimensions of products.
+ description: Total width, height, and depth of configured products.
shipping:
label: Shipping
permalink: /shipping
- description: Shipping dimensions and logistics information.
+ description: Package dimensions and logistics information for e-commerce.
space-planning:
label: Space Planning
permalink: /space-planning
- description: Space planning and room layout visualization.
+ description: Visualizing how products fit in rooms or spaces.
diametral:
label: Diametral
permalink: /diametral
- description: Diametral dimensions for measuring diameters.
+ description: Diameter annotations for circular features.
diameter:
label: Diameter
permalink: /diameter
- description: Diameter measurements of circular features.
+ description: Measuring across circular shapes.
circles:
label: Circles
permalink: /circles
- description: Circular shapes and features.
+ description: Circular geometry and arc-based shapes.
cylinders:
label: Cylinders
permalink: /cylinders
- description: Cylindrical shapes and objects.
+ description: Cylindrical shapes and tube-like geometry.
annotations:
label: Annotations
permalink: /annotations
- description: Annotations and labels on 3D models.
+ description: Text labels, callouts, and markers on 3D models.
technical:
label: Technical
permalink: /technical
- description: Technical specifications and documentation.
+ description: Detailed technical specifications and engineering data.
professional:
label: Professional
permalink: /professional
- description: Professional tier features and capabilities.
+ description: Features available on the Professional subscription tier.
enterprise:
label: Enterprise
permalink: /enterprise
- description: Enterprise tier features and capabilities.
+ description: Features available on the Enterprise subscription tier.
linear:
label: Linear
permalink: /linear
- description: Linear dimensions for straight-line measurements.
+ description: Straight-line distance measurements.
width:
label: Width
permalink: /width
- description: Width measurements.
+ description: Horizontal size measurements.
height:
label: Height
permalink: /height
- description: Height measurements.
+ description: Vertical size measurements.
depth:
label: Depth
permalink: /depth
- description: Depth measurements.
+ description: Front-to-back size measurements.
ordinate:
label: Ordinate
permalink: /ordinate
- description: Ordinate dimensions with coordinate-based measurements.
+ description: Coordinate-based dimension chains from a reference point.
coordinates:
label: Coordinates
permalink: /coordinates
- description: Coordinate systems and positioning.
+ description: X, Y, Z positioning and coordinate systems.
cad:
label: CAD
permalink: /cad
- description: Computer-Aided Design tools and formats.
+ description: Computer-Aided Design techniques and file formats.
radial:
label: Radial
permalink: /radial
- description: Radial dimensions for measuring radii.
+ description: Radius measurements from center to edge.
radius:
label: Radius
permalink: /radius
- description: Radius measurements of curved features.
+ description: Distance from circle center to circumference.
curves:
label: Curves
permalink: /curves
- description: Curved shapes and bezier curves.
+ description: Bezier curves, splines, and smooth paths.
export:
label: Export
permalink: /export
- description: Exporting data and configurations.
+ description: Saving data, configurations, or 3D files for external use.
json:
label: JSON
permalink: /json
- description: JSON data format and configurations.
+ description: JSON data format for configurations and data exchange.
deployment:
label: Deployment
permalink: /deployment
- description: Deploying applications to production.
+ description: Publishing apps to production environments.
integration:
label: Integration
permalink: /integration
- description: Integration with external platforms and services.
+ description: Connecting Bitbybit with external platforms and services.
ecommerce:
label: eCommerce
permalink: /ecommerce
- description: eCommerce platforms and online stores.
+ description: Online store integrations and product visualization.
metafields:
label: Metafields
permalink: /metafields
- description: Shopify metafields for storing custom data.
+ description: Shopify custom data fields for storing configuration data.
validation:
label: Validation
permalink: /validation
- description: Data validation and error checking.
+ description: Checking user inputs and ensuring valid configurations.
errors:
label: Errors
permalink: /errors
- description: Error handling and troubleshooting.
+ description: Understanding and handling error messages.
debugging:
label: Debugging
permalink: /debugging
- description: Debugging techniques and tools.
+ description: Finding and fixing problems in your scripts.
quality-assurance:
label: Quality Assurance
permalink: /quality-assurance
- description: Quality assurance and testing processes.
+ description: Testing and verifying applications work correctly.
gltf:
label: GLTF
permalink: /gltf
- description: GLTF 3D model format.
+ description: Web-optimized 3D format for fast loading in browsers.
nodes:
label: Nodes
permalink: /nodes
- description: Node-based structure in 3D models.
+ description: Individual objects and hierarchy in 3D scenes.
visibility:
label: Visibility
permalink: /visibility
- description: Controlling visibility of 3D objects.
+ description: Showing and hiding objects based on user selections.
structure:
label: Structure
permalink: /structure
- description: Structure and organization of data and files.
+ description: How data and files are organized.
optimization:
label: Optimization
permalink: /optimization
- description: Optimization techniques for performance.
+ description: Improving speed, memory usage, and file sizes.
management:
label: Management
permalink: /management
- description: Managing projects and resources.
+ description: Organizing and maintaining projects and assets.
materials:
label: Materials
permalink: /materials
- description: Materials and textures for 3D models.
+ description: Surface appearance - colors, textures, metallic, roughness.
variants:
label: Variants
permalink: /variants
- description: Product variants and configurations.
+ description: Different versions of products or materials.
KHR_materials_variants:
label: KHR Materials Variants
permalink: /khr-materials-variants
- description: GLTF extension for material variants.
+ description: GLTF extension for switching between material sets.
models:
label: Models
permalink: /models
- description: 3D models and assets.
+ description: 3D model files and geometry assets.
glb:
label: GLB
permalink: /glb
- description: GLB binary 3D model format.
+ description: Binary GLTF format - compact, single-file 3D models.
properties:
label: Properties
permalink: /properties
- description: Properties and attributes of objects.
+ description: Object attributes like position, name, and custom data.
transform:
label: Transform
permalink: /transform
- description: Transform operations like position, rotation, and scale.
+ description: Position, rotation, and scale changes.
formats:
label: Formats
permalink: /formats
- description: File formats and data structures.
+ description: File types and data formats supported by Bitbybit.
navigation:
label: Navigation
permalink: /navigation
- description: Navigation controls and camera movement.
+ description: Moving around 3D scenes with pan, zoom, and rotate.
camera:
label: Camera
permalink: /camera
- description: Camera controls and settings.
+ description: Viewpoint settings, angles, and camera controls.
animations:
label: Animations
permalink: /animations
- description: Animations and motion in 3D scenes.
+ description: Motion, transitions, and dynamic visual effects.
transitions:
label: Transitions
permalink: /transitions
- description: Smooth transitions and animations.
+ description: Smooth changes between states or camera positions.
easing:
label: Easing
permalink: /easing
- description: Easing functions for smooth animations.
+ description: Animation curves that control acceleration and deceleration.
poi:
label: POI
permalink: /poi
- description: Points of Interest for guided product tours.
+ description: Points of Interest for camera focus and guided tours.
points-of-interest:
label: Points of Interest
permalink: /points-of-interest
- description: Points of Interest for guided product tours.
+ description: Saved camera positions highlighting product features.
hotspots:
label: Hotspots
permalink: /hotspots
- description: Interactive hotspots on 3D models.
+ description: Clickable markers on 3D models showing information.
tours:
label: Tours
permalink: /tours
- description: Guided tours and walkthroughs.
+ description: Guided sequences moving through points of interest.
customization:
label: Customization
permalink: /customization
- description: Customizing appearance and behavior.
+ description: Tailoring appearance and behavior to your needs.
branding:
label: Branding
permalink: /branding
- description: Branding and visual identity.
+ description: Applying brand colors, logos, and visual identity.
background:
label: Background
permalink: /background
- description: Background colors and images.
+ description: Scene backgrounds - colors, gradients, or images.
scene:
label: Scene
permalink: /scene
- description: 3D scene setup and configuration.
+ description: The 3D environment containing objects, lights, and cameras.
colors:
label: Colors
permalink: /colors
- description: Colors and color palettes.
+ description: Color values, palettes, and color-related operations.
gradients:
label: Gradients
permalink: /gradients
- description: Color gradients and transitions.
+ description: Smooth color transitions for backgrounds and materials.
images:
label: Images
permalink: /images
- description: Images and textures.
+ description: Texture images, backgrounds, and image processing.
arc-rotate:
label: Arc Rotate
permalink: /arc-rotate
- description: Arc rotate camera for 3D navigation.
+ description: Orbital camera that rotates around a target point.
controls:
label: Controls
permalink: /controls
- description: User controls and interactions.
+ description: User input handling - mouse, touch, keyboard.
zoom:
label: Zoom
permalink: /zoom
- description: Zoom controls and settings.
+ description: Camera zoom levels and magnification controls.
interaction:
label: Interaction
permalink: /interaction
- description: User interaction and controls.
+ description: How users interact with 3D objects and UI.
lighting:
label: Lighting
permalink: /lighting
- description: Lighting setup and configuration.
+ description: Light sources that illuminate 3D scenes.
directional-light:
label: Directional Light
permalink: /directional-light
- description: Directional light sources.
+ description: Parallel light rays simulating distant sources like the sun.
shadows:
label: Shadows
permalink: /shadows
- description: Shadow rendering and settings.
+ description: Dynamic shadows cast by objects in the scene.
intensity:
label: Intensity
permalink: /intensity
- description: Light intensity and brightness.
+ description: Brightness levels for lights and effects.
loading:
label: Loading
permalink: /loading
- description: Loading screens and progress indicators.
+ description: Asset loading, progress indicators, and initialization.
progress:
label: Progress
permalink: /progress
- description: Progress indicators and loading states.
+ description: Loading progress bars and status indicators.
user-experience:
label: User Experience
permalink: /user-experience
- description: User experience design and optimization.
+ description: Making apps intuitive and pleasant to use.
skybox:
label: Skybox
permalink: /skybox
- description: Skybox environments for 3D scenes.
+ description: 360-degree environment surrounding the scene.
hdr:
label: HDR
permalink: /hdr
- description: High Dynamic Range imaging.
+ description: High Dynamic Range images for realistic lighting.
environment:
label: Environment
permalink: /environment
- description: Environment maps and lighting.
+ description: Surrounding imagery that affects lighting and reflections.
reflections:
label: Reflections
permalink: /reflections
- description: Reflections and mirror effects.
+ description: Mirror-like surface effects on shiny materials.
pbr:
label: PBR
permalink: /pbr
- description: Physically Based Rendering.
+ description: Physically Based Rendering for realistic material appearance.
subscription:
label: Subscription
permalink: /subscription
- description: Subscription plans and tiers.
+ description: Bitbybit subscription plans and account tiers.
plans:
label: Plans
permalink: /plans
- description: Pricing plans and packages.
+ description: Available subscription options and what they include.
pricing:
label: Pricing
permalink: /pricing
- description: Pricing information and tiers.
+ description: Costs and pricing information for Bitbybit services.
troubleshooting:
label: Troubleshooting
permalink: /troubleshooting
- description: Troubleshooting guides and solutions.
+ description: Solving common problems and finding fixes.
faq:
label: FAQ
permalink: /faq
- description: Frequently Asked Questions.
+ description: Answers to frequently asked questions.
help:
label: Help
permalink: /help
- description: Help and support resources.
+ description: Getting support and finding documentation.
mobile:
label: Mobile
permalink: /mobile
- description: Mobile devices and responsive design.
+ description: Mobile device support and responsive design.
loading-speed:
label: Loading Speed
permalink: /loading-speed
- description: Loading speed and optimization.
+ description: How fast your 3D content loads for users.
fps:
label: FPS
permalink: /fps
- description: Frames per second and performance.
+ description: Frames per second - measuring rendering smoothness.
advanced-matching:
label: Advanced Matching
permalink: /advanced-matching
- description: Advanced variant matching with complex logic.
+ description: Complex logic for mapping options to 3D changes.
expressions:
label: Expressions
permalink: /expressions
- description: Expressions and conditional logic.
+ description: Formulas and conditional logic in configurations.
simple-matching:
label: Simple Matching
permalink: /simple-matching
- description: Simple variant matching with equality.
+ description: Basic one-to-one mapping between options and 3D states.
product-options:
label: Product Options
permalink: /product-options
- description: Product options and configurations.
+ description: Configurable choices customers can make.
cdn:
label: CDN
permalink: /cdn
- description: Content Delivery Network and caching.
+ description: Content Delivery Networks for fast global asset loading.
hosting:
label: Hosting
permalink: /hosting
- description: Web hosting and server management.
+ description: Where your 3D assets and applications are served from.
coverage:
label: Coverage
permalink: /coverage
- description: Unit test coverage
+ description: How much of your code is tested by unit tests.
diff --git a/docs/learn/using-ai-with-bitbybit/intro.md b/docs/learn/using-ai-with-bitbybit/intro.md
index b0badf7e..b920b719 100644
--- a/docs/learn/using-ai-with-bitbybit/intro.md
+++ b/docs/learn/using-ai-with-bitbybit/intro.md
@@ -8,7 +8,7 @@ tags: [ai]
# AI-Powered 3D Development
-Bitbybit has 1300+ API functions across three CAD kernels. That's a lot to remember. AI coding assistants can help you write Bitbybit code faster and more accurately - if you give them the right context.
+Bitbybit has 1400+ API functions across three CAD kernels. That's a lot to remember. AI coding assistants can help you write Bitbybit code faster and more accurately - if you give them the right context.
## The Challenge
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 3921d766..b8c67d7c 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -186,7 +186,7 @@ function HeroSection() {
CAD Kernels
- 1300+
+ 1400+
API Functions
diff --git a/docs/static/files/3d/LICENSE.md b/docs/static/files/3d/LICENSE.md
new file mode 100644
index 00000000..d07ff9c9
--- /dev/null
+++ b/docs/static/files/3d/LICENSE.md
@@ -0,0 +1,4 @@
+## Soil-Sensor.stpZ - CC0 Public Domain Dedication
+Downloaded from https://genesis.farm.bot/v1.5/Extras/cad.html
+
+FarmBot is an open-source CNC farming robot. They are unique because they release their CAD files under CC0 (Public Domain)
diff --git a/docs/static/files/3d/Soil-Sensor-Y-Up.stpZ b/docs/static/files/3d/Soil-Sensor-Y-Up.stpZ
new file mode 100644
index 00000000..ff031a63
Binary files /dev/null and b/docs/static/files/3d/Soil-Sensor-Y-Up.stpZ differ
diff --git a/docs/static/files/3d/Soil-Sensor.stpZ b/docs/static/files/3d/Soil-Sensor.stpZ
new file mode 100644
index 00000000..24cd5cc3
Binary files /dev/null and b/docs/static/files/3d/Soil-Sensor.stpZ differ
diff --git a/packages/dev/base/lib/api/services/text.test.ts b/packages/dev/base/lib/api/services/text.test.ts
index 2e06620b..258d4869 100644
--- a/packages/dev/base/lib/api/services/text.test.ts
+++ b/packages/dev/base/lib/api/services/text.test.ts
@@ -119,6 +119,11 @@ describe("Text unit tests", () => {
expect(result).toEqual("Hello World, Matas");
});
+ it("should format strings 10 and 11", () => {
+ const result = text.format({ text: "Hello {0}, {1}", values: ["10", "11"] });
+ expect(result).toEqual("Hello 10, 11");
+ });
+
it("should not format string if there are no values", () => {
const result = text.format({ text: "Hello {0}, {1}", values: [] });
expect(result).toEqual("Hello {0}, {1}");