diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index 9fd313a..73b8f4e 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -161,8 +161,9 @@ const IdeViewer = ({ Loading }) => {
     setImage(state.objectData?.type === 'png' && state.objectData?.data)
     setIsDragging(false)
   }, [state.objectData?.type, state.objectData?.data])
-  const R3FComponent = React.useMemo(
-    () => state.objectData?.type === 'r3f-component' && state.objectData?.data,
+  const PrimitiveArray = React.useMemo(
+    () =>
+      state.objectData?.type === 'primitive-array' && state.objectData?.data,
     [state.objectData?.type, state.objectData?.data]
   )
 
@@ -266,7 +267,10 @@ const IdeViewer = ({ Loading }) => {
           {state.objectData?.type === 'geometry' && state.objectData?.data && (
             <Asset geometry={state.objectData?.data} />
           )}
-          {R3FComponent && <R3FComponent />}
+          {PrimitiveArray &&
+            PrimitiveArray.map((mesh, index) => (
+              <primitive object={mesh} key={index} />
+            ))}
         </Canvas>
       </div>
       <DelayedPingAnimation isLoading={state.isLoading} />
diff --git a/app/web/src/helpers/cadPackages/common.ts b/app/web/src/helpers/cadPackages/common.ts
index b0c37b7..4fac6ff 100644
--- a/app/web/src/helpers/cadPackages/common.ts
+++ b/app/web/src/helpers/cadPackages/common.ts
@@ -21,7 +21,7 @@ export interface RenderArgs {
   }
 }
 
-export type ArtifactTypes = 'stl' | 'png' | 'geometry' | 'r3f-component'
+export type ArtifactTypes = 'stl' | 'png' | 'geometry' | 'primitive-array'
 
 export interface HealthyResponse {
   status: 'healthy'
diff --git a/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx b/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
index 5562de7..b056bad 100644
--- a/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
+++ b/app/web/src/helpers/cadPackages/jsCad/jsCadController.tsx
@@ -41,50 +41,49 @@ interface CsgObj {
 }
 
 function CSGArray2R3fComponent(Csgs: CsgObj[]): React.ReactNode {
-  return () =>
-    Csgs.map(({ vertices, indices, color, transforms, type }, index) => {
-      const materialDef = materials[type]
-      if (!materialDef) {
-        console.error('Can not hangle object type: ' + type, {
-          vertices,
-          indices,
-          color,
-          transforms,
-          type,
-        })
-        return null
-      }
+  return Csgs.map(({ vertices, indices, color, transforms, type }, index) => {
+    const materialDef = materials[type]
+    if (!materialDef) {
+      console.error('Can not hangle object type: ' + type, {
+        vertices,
+        indices,
+        color,
+        transforms,
+        type,
+      })
+      return null
+    }
 
-      let material = materialDef.def
-      if (color) {
-        const [r, g, b, opacity] = color
-        material = materialDef.material({
-          color: new Color(r, g, b),
-          flatShading: true,
-          opacity: opacity === void 0 ? 1 : opacity,
-          transparent: opacity != 1 && opacity !== void 0,
-        })
-      }
+    let material = materialDef.def
+    if (color) {
+      const [r, g, b, opacity] = color
+      material = materialDef.material({
+        color: new Color(r, g, b),
+        flatShading: true,
+        opacity: opacity === void 0 ? 1 : opacity,
+        transparent: opacity != 1 && opacity !== void 0,
+      })
+    }
 
-      const geo = new BufferGeometry()
-      geo.setAttribute('position', new BufferAttribute(vertices, 3))
+    const geo = new BufferGeometry()
+    geo.setAttribute('position', new BufferAttribute(vertices, 3))
 
-      let mesh
-      switch (type) {
-        case 'mesh':
-          geo.setIndex(new BufferAttribute(indices, 1))
-          mesh = new Mesh(geo, material)
-          break
-        case 'line':
-          mesh = new Line(geo, material)
-          break
-        case 'lines':
-          mesh = new LineSegments(geo, material)
-          break
-      }
-      if (transforms) mesh.applyMatrix4({ elements: transforms })
-      return <primitive object={mesh} key={index} />
-    })
+    let mesh
+    switch (type) {
+      case 'mesh':
+        geo.setIndex(new BufferAttribute(indices, 1))
+        mesh = new Mesh(geo, material)
+        break
+      case 'line':
+        mesh = new Line(geo, material)
+        break
+      case 'lines':
+        mesh = new LineSegments(geo, material)
+        break
+    }
+    if (transforms) mesh.applyMatrix4({ elements: transforms })
+    return mesh
+  })
 }
 
 let scriptWorker
@@ -146,7 +145,7 @@ export const render: DefaultKernelExport['render'] = async ({
         } else {
           workerHelper.resolver(
             createHealthyResponse({
-              type: 'r3f-component',
+              type: 'primitive-array',
               data: CSGArray2R3fComponent(data.entities),
               consoleMessage: data.scriptStats,
               date: new Date(),