diff --git a/examples/array-based-subtraction.fixture.tsx b/examples/array-based-subtraction.fixture.tsx
index 2fe1d9b..88f0cf5 100644
--- a/examples/array-based-subtraction.fixture.tsx
+++ b/examples/array-based-subtraction.fixture.tsx
@@ -1,13 +1,16 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Cuboid, Subtract } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Subtract>
-      <Cuboid size={[10, 5, 2]} />
-      {[-4, -2, 0, 2, 4].map((value, index) => (
-        <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
-      ))}
-    </Subtract>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <Subtract>
+        <Cuboid size={[10, 5, 2]} />
+        {[-4, -2, 0, 2, 4].map((value, index) => (
+          <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
+        ))}
+      </Subtract>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/circle.fixture.tsx b/examples/circle.fixture.tsx
index 67afa3a..f13b336 100644
--- a/examples/circle.fixture.tsx
+++ b/examples/circle.fixture.tsx
@@ -1,8 +1,11 @@
-import { Circle } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Circle } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Circle radius={10} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Circle radius={10} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/colorize.fixture.tsx b/examples/colorize.fixture.tsx
index ad8897a..1787634 100644
--- a/examples/colorize.fixture.tsx
+++ b/examples/colorize.fixture.tsx
@@ -1,10 +1,13 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cube } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Colorize, Cube } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture>
-    <Colorize color={"red"}>
-      <Cube size={10} />
-    </Colorize>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Colorize color={"red"}>
+        <Cube size={10} />
+      </Colorize>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/cone.fixture.tsx b/examples/cone.fixture.tsx
index 7fe82a5..098bb14 100644
--- a/examples/cone.fixture.tsx
+++ b/examples/cone.fixture.tsx
@@ -1,17 +1,20 @@
-import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { CylinderElliptic } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <CylinderElliptic
-      height={5}
-      startRadius={[2, 2]}
-      endRadius={[0, 0]}
-      segments={32}
-      startAngle={0}
-      endAngle={Math.PI * 2}
-      color="green"
-      center={[0, 5, 5]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <CylinderElliptic
+        height={5}
+        startRadius={[2, 2]}
+        endRadius={[0, 0]}
+        segments={32}
+        startAngle={0}
+        endAngle={Math.PI * 2}
+        color="green"
+        center={[0, 5, 5]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/cube.fixture.tsx b/examples/cube.fixture.tsx
index 65ee63f..969cc45 100644
--- a/examples/cube.fixture.tsx
+++ b/examples/cube.fixture.tsx
@@ -1,8 +1,11 @@
-import { Cube } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cube } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Cube size={10} color="orange" center={[0, 0, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Cube size={10} color="orange" center={[0, 0, 10]} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/cuboid.fixture.tsx b/examples/cuboid.fixture.tsx
index f075400..10b7df9 100644
--- a/examples/cuboid.fixture.tsx
+++ b/examples/cuboid.fixture.tsx
@@ -1,8 +1,11 @@
-import { Cuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cuboid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/custom-sphere.fixture.tsx b/examples/custom-sphere.fixture.tsx
index e8f8a9a..69492cb 100644
--- a/examples/custom-sphere.fixture.tsx
+++ b/examples/custom-sphere.fixture.tsx
@@ -1,8 +1,11 @@
-import { Sphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Sphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Sphere radius={10} segments={64} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Sphere radius={10} segments={64} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/custom-torus.fixture.tsx b/examples/custom-torus.fixture.tsx
index a402c39..8c2ad58 100644
--- a/examples/custom-torus.fixture.tsx
+++ b/examples/custom-torus.fixture.tsx
@@ -1,16 +1,19 @@
-import { Torus } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Torus } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Torus
-      innerRadius={15}
-      outerRadius={20}
-      innerSegments={64}
-      outerSegments={96}
-      innerRotation={Math.PI}
-      outerRotation={Math.PI / 2}
-      startAngle={0}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Torus
+        innerRadius={15}
+        outerRadius={20}
+        innerSegments={64}
+        outerSegments={96}
+        innerRotation={Math.PI}
+        outerRotation={Math.PI / 2}
+        startAngle={0}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/custom.fixture.tsx b/examples/custom.fixture.tsx
index 25a00e1..adcbf4b 100644
--- a/examples/custom.fixture.tsx
+++ b/examples/custom.fixture.tsx
@@ -1,14 +1,17 @@
-import { booleans, primitives } from "@jscad/modeling"
-import { Custom } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { booleans, primitives } from "@jscad/modeling";
+import Example from "src/Example";
+import { Custom } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
-const cube = primitives.cube({ size: 10 })
-const sphere = primitives.sphere({ radius: 6, segments: 32 })
+const cube = primitives.cube({ size: 10 });
+const sphere = primitives.sphere({ radius: 6, segments: 32 });
 
-const intersected = booleans.subtract(cube, sphere)
+const intersected = booleans.subtract(cube, sphere);
 
 export default () => (
-  <JsCadFixture>
-    <Custom geometry={intersected} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Custom geometry={intersected} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/cylinder.fixture.tsx b/examples/cylinder.fixture.tsx
index 973fe2a..793f3a6 100644
--- a/examples/cylinder.fixture.tsx
+++ b/examples/cylinder.fixture.tsx
@@ -1,15 +1,18 @@
-import { Cylinder } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cylinder } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture showGrid zAxisUp>
-    <Cylinder
-      radius={5}
-      height={10}
-      color="#F7E8AA"
-      center={[-20, 0, 0]}
-      rotation={["90deg", 0, 0]}
-    />
-    <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture showGrid zAxisUp>
+      <Cylinder
+        radius={5}
+        height={10}
+        color="#F7E8AA"
+        center={[-20, 0, 0]}
+        rotation={["90deg", 0, 0]}
+      />
+      <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/ellipsoid.fixture.tsx b/examples/ellipsoid.fixture.tsx
index 3c4aab3..25050b7 100644
--- a/examples/ellipsoid.fixture.tsx
+++ b/examples/ellipsoid.fixture.tsx
@@ -1,8 +1,11 @@
-import { Ellipsoid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Ellipsoid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/extrude-from-slices.fixture.tsx b/examples/extrude-from-slices.fixture.tsx
index 64b30b7..c9f510e 100644
--- a/examples/extrude-from-slices.fixture.tsx
+++ b/examples/extrude-from-slices.fixture.tsx
@@ -1,56 +1,59 @@
-import { ExtrudeFromSlices } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import jscad from "@jscad/modeling"
+import jscad from "@jscad/modeling";
+import Example from "src/Example";
+import { ExtrudeFromSlices } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
-const { bezier } = jscad.curves
+const { bezier } = jscad.curves;
 const { circle, line, polygon, rectangle, roundedRectangle, star } =
-  jscad.primitives
+  jscad.primitives;
 const { extrudeLinear, extrudeRotate, extrudeFromSlices, slice } =
-  jscad.extrusions
-const { mat4 } = jscad.maths
+  jscad.extrusions;
+const { mat4 } = jscad.maths;
 
 const baseSlice = slice.fromPoints([
   [2, 2],
   [-2, 2],
   [-2, -2],
   [2, -2],
-])
+]);
 
-const xCurve = bezier.create([1, 1.8, 0.4, 1])
-const yCurve = bezier.create([1, 1.8, 0.5])
+const xCurve = bezier.create([1, 1.8, 0.4, 1]);
+const yCurve = bezier.create([1, 1.8, 0.5]);
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <ExtrudeFromSlices
-      numberOfSlices={10}
-      capStart={true}
-      capEnd={true}
-      close={true}
-      repair={true}
-      baseSlice={baseSlice}
-      callback={function (progress, count, base) {
-        let newslice = slice.transform(
-          mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
-          baseSlice,
-        )
-        newslice = slice.transform(
-          mat4.fromScaling(mat4.create(), [
-            bezier.valueAt(progress, xCurve) as any,
-            bezier.valueAt(progress, yCurve) as any,
-            1,
-          ]),
-          newslice,
-        )
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <ExtrudeFromSlices
+        numberOfSlices={10}
+        capStart={true}
+        capEnd={true}
+        close={true}
+        repair={true}
+        baseSlice={baseSlice}
+        callback={function (progress, count, base) {
+          let newslice = slice.transform(
+            mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
+            baseSlice
+          );
+          newslice = slice.transform(
+            mat4.fromScaling(mat4.create(), [
+              bezier.valueAt(progress, xCurve) as any,
+              bezier.valueAt(progress, yCurve) as any,
+              1,
+            ]),
+            newslice
+          );
 
-        // Rotate the slice 90 degrees along the path
-        const rotationAngle = (Math.PI / 2) * progress // 90 degrees in radians
-        newslice = slice.transform(
-          mat4.fromXRotation(mat4.create(), rotationAngle),
-          newslice,
-        )
+          // Rotate the slice 90 degrees along the path
+          const rotationAngle = (Math.PI / 2) * progress; // 90 degrees in radians
+          newslice = slice.transform(
+            mat4.fromXRotation(mat4.create(), rotationAngle),
+            newslice
+          );
 
-        return newslice
-      }}
-    />
-  </JsCadFixture>
-)
+          return newslice;
+        }}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/extrude-linear.fixture.tsx b/examples/extrude-linear.fixture.tsx
index be9fcc5..1d8744a 100644
--- a/examples/extrude-linear.fixture.tsx
+++ b/examples/extrude-linear.fixture.tsx
@@ -1,21 +1,24 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { ExtrudeLinear } from "../lib/jscad-fns"
-import { Polygon } from "../lib/jscad-fns/polygon"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { ExtrudeLinear } from "../lib/jscad-fns";
+import { Polygon } from "../lib/jscad-fns/polygon";
 
 export default () => (
-  <JsCadFixture>
-    <ExtrudeLinear height={2} color="lightgreen" center={[0, 0, 4]}>
-      <Polygon
-        points={[
-          [-2, -1],
-          [2, -1],
-          [2.5, 2],
-          [1, 1],
-          [0, 2],
-          [-1, 1],
-          [-2, 2],
-        ]}
-      />
-    </ExtrudeLinear>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <ExtrudeLinear height={2} color="lightgreen" center={[0, 0, 4]}>
+        <Polygon
+          points={[
+            [-2, -1],
+            [2, -1],
+            [2.5, 2],
+            [1, 1],
+            [0, 2],
+            [-1, 1],
+            [-2, 2],
+          ]}
+        />
+      </ExtrudeLinear>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/extrude-rectangular.fixture.tsx b/examples/extrude-rectangular.fixture.tsx
index 03876ca..cb9153c 100644
--- a/examples/extrude-rectangular.fixture.tsx
+++ b/examples/extrude-rectangular.fixture.tsx
@@ -1,26 +1,29 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { ExtrudeRectangular } from "../lib/jscad-fns"
-import { Polygon } from "../lib/jscad-fns/polygon"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { ExtrudeRectangular } from "../lib/jscad-fns";
+import { Polygon } from "../lib/jscad-fns/polygon";
 
 export default () => (
-  <JsCadFixture>
-    <ExtrudeRectangular
-      size={10}
-      height={2}
-      color="lightgreen"
-      center={[0, -10, 0]}
-    >
-      <Polygon
-        points={[
-          [-2, -1],
-          [2, -1],
-          [2.5, 2],
-          [1, 1],
-          [0, 2],
-          [-1, 1],
-          [-2, 2],
-        ]}
-      />
-    </ExtrudeRectangular>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <ExtrudeRectangular
+        size={10}
+        height={2}
+        color="lightgreen"
+        center={[0, -10, 0]}
+      >
+        <Polygon
+          points={[
+            [-2, -1],
+            [2, -1],
+            [2.5, 2],
+            [1, 1],
+            [0, 2],
+            [-1, 1],
+            [-2, 2],
+          ]}
+        />
+      </ExtrudeRectangular>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/high-geodesic-sphere.fixture.tsx b/examples/high-geodesic-sphere.fixture.tsx
index 902b203..25ca143 100644
--- a/examples/high-geodesic-sphere.fixture.tsx
+++ b/examples/high-geodesic-sphere.fixture.tsx
@@ -1,13 +1,16 @@
-import { GeodesicSphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { GeodesicSphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <GeodesicSphere
-      radius={10}
-      frequency={12}
-      color="violet"
-      center={[10, 5, 0]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <GeodesicSphere
+        radius={10}
+        frequency={12}
+        color="violet"
+        center={[10, 5, 0]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/hull-chain.fixture.tsx b/examples/hull-chain.fixture.tsx
index 6e6c048..e82f54c 100644
--- a/examples/hull-chain.fixture.tsx
+++ b/examples/hull-chain.fixture.tsx
@@ -1,12 +1,15 @@
-import { Cuboid, Ellipsoid, HullChain } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cuboid, Ellipsoid, HullChain } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <HullChain color="lightgreen" center={[0, 0, -10]}>
-      <Cuboid size={[10, 10, 10]} />
-      <Ellipsoid radius={[10, 10, 12]} center={[0, 0, 10]} />
-      <Cuboid size={[10, 10, 10]} center={[0, 0, 20]} />
-    </HullChain>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <HullChain color="lightgreen" center={[0, 0, -10]}>
+        <Cuboid size={[10, 10, 10]} />
+        <Ellipsoid radius={[10, 10, 12]} center={[0, 0, 10]} />
+        <Cuboid size={[10, 10, 10]} center={[0, 0, 20]} />
+      </HullChain>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/hull.fixture.tsx b/examples/hull.fixture.tsx
index 488cb2d..2313261 100644
--- a/examples/hull.fixture.tsx
+++ b/examples/hull.fixture.tsx
@@ -1,11 +1,14 @@
-import { Cuboid, Ellipsoid, Hull, Translate } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cuboid, Ellipsoid, Hull } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Hull color="lightblue" center={[0, -5, -10]}>
-      <Cuboid size={[10, 10, 10]} />
-      <Ellipsoid radius={[10, 10, 10]} center={[0, 0, 15]} />
-    </Hull>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Hull color="lightblue" center={[0, -5, -10]}>
+        <Cuboid size={[10, 10, 10]} />
+        <Ellipsoid radius={[10, 10, 10]} center={[0, 0, 15]} />
+      </Hull>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/low-geodesic-sphere.fixture.tsx b/examples/low-geodesic-sphere.fixture.tsx
index 647d09e..a94ea1d 100644
--- a/examples/low-geodesic-sphere.fixture.tsx
+++ b/examples/low-geodesic-sphere.fixture.tsx
@@ -1,8 +1,11 @@
-import { GeodesicSphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { GeodesicSphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <GeodesicSphere radius={10} frequency={6} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <GeodesicSphere radius={10} frequency={6} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/partial-cylindrical-elliptic.fixture.tsx b/examples/partial-cylindrical-elliptic.fixture.tsx
index 84bb8f6..0614301 100644
--- a/examples/partial-cylindrical-elliptic.fixture.tsx
+++ b/examples/partial-cylindrical-elliptic.fixture.tsx
@@ -1,15 +1,18 @@
-import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { CylinderElliptic } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <CylinderElliptic
-      height={6}
-      startRadius={[1, 2]}
-      endRadius={[1, 2]}
-      segments={64}
-      startAngle={0}
-      endAngle={Math.PI / 2}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <CylinderElliptic
+        height={6}
+        startRadius={[1, 2]}
+        endRadius={[1, 2]}
+        segments={64}
+        startAngle={0}
+        endAngle={Math.PI / 2}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/polygon.fixture.tsx b/examples/polygon.fixture.tsx
index d49d870..7441711 100644
--- a/examples/polygon.fixture.tsx
+++ b/examples/polygon.fixture.tsx
@@ -1,18 +1,21 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Polygon } from "../lib/jscad-fns/polygon"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Polygon } from "../lib/jscad-fns/polygon";
 
 export default () => (
-  <JsCadFixture>
-    <Polygon
-      points={[
-        [-2, -1],
-        [2, -1],
-        [2.5, 2],
-        [1, 1],
-        [0, 2],
-        [-1, 1],
-        [-2, 2],
-      ]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Polygon
+        points={[
+          [-2, -1],
+          [2, -1],
+          [2.5, 2],
+          [1, 1],
+          [0, 2],
+          [-1, 1],
+          [-2, 2],
+        ]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/project.fixture.tsx b/examples/project.fixture.tsx
index 22d7b1d..e5a5288 100644
--- a/examples/project.fixture.tsx
+++ b/examples/project.fixture.tsx
@@ -1,21 +1,24 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Project } from "../lib/jscad-fns"
-import { Polygon } from "../lib/jscad-fns/polygon"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Project } from "../lib/jscad-fns";
+import { Polygon } from "../lib/jscad-fns/polygon";
 
 export default () => (
-  <JsCadFixture>
-    <Project axis={[0, 0, 1]} origin={[0, 0, 0]}>
-      <Polygon
-        points={[
-          [-2, -1],
-          [2, -1],
-          [2.5, 2],
-          [1, 1],
-          [0, 2],
-          [-1, 1],
-          [-2, 2],
-        ]}
-      />
-    </Project>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Project axis={[0, 0, 1]} origin={[0, 0, 0]}>
+        <Polygon
+          points={[
+            [-2, -1],
+            [2, -1],
+            [2.5, 2],
+            [1, 1],
+            [0, 2],
+            [-1, 1],
+            [-2, 2],
+          ]}
+        />
+      </Project>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/rectangle.fixture.tsx b/examples/rectangle.fixture.tsx
index f8643ce..47b6de0 100644
--- a/examples/rectangle.fixture.tsx
+++ b/examples/rectangle.fixture.tsx
@@ -1,8 +1,11 @@
-import { Rectangle } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Rectangle } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Rectangle size={[10, 20]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Rectangle size={[10, 20]} />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/rotate.fixture.tsx b/examples/rotate.fixture.tsx
index 27fe756..3f5a3ea 100644
--- a/examples/rotate.fixture.tsx
+++ b/examples/rotate.fixture.tsx
@@ -1,21 +1,24 @@
-import { Polygon } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Rotate } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { Polygon } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Rotate } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture>
-    <Rotate angles={[0, 0, Math.PI]} color="cyan" center={[0, 0, 10]}>
-      <Polygon
-        points={[
-          [-2, -1],
-          [2, -1],
-          [2.5, 2],
-          [1, 1],
-          [0, 2],
-          [-1, 1],
-          [-2, 2],
-        ]}
-      />
-    </Rotate>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Rotate angles={[0, 0, Math.PI]} color="cyan" center={[0, 0, 10]}>
+        <Polygon
+          points={[
+            [-2, -1],
+            [2, -1],
+            [2.5, 2],
+            [1, 1],
+            [0, 2],
+            [-1, 1],
+            [-2, 2],
+          ]}
+        />
+      </Rotate>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/rounded-cuboid.fixture.tsx b/examples/rounded-cuboid.fixture.tsx
index 2666fa5..3ca5e67 100644
--- a/examples/rounded-cuboid.fixture.tsx
+++ b/examples/rounded-cuboid.fixture.tsx
@@ -1,13 +1,16 @@
-import { RoundedCuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { RoundedCuboid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <RoundedCuboid
-      size={[15, 10, 10]}
-      roundRadius={1}
-      color="skyblue"
-      center={[0, 0, 10]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <RoundedCuboid
+        size={[15, 10, 10]}
+        roundRadius={1}
+        color="skyblue"
+        center={[0, 0, 10]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/rounded-cylinder.fixture.tsx b/examples/rounded-cylinder.fixture.tsx
index 5b5948a..59cebfd 100644
--- a/examples/rounded-cylinder.fixture.tsx
+++ b/examples/rounded-cylinder.fixture.tsx
@@ -1,14 +1,17 @@
-import { RoundedCylinder } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { RoundedCylinder } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <RoundedCylinder
-      radius={10}
-      height={20}
-      roundRadius={5}
-      color="#4B0082"
-      center={[0, 0, 10]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <RoundedCylinder
+        radius={10}
+        height={20}
+        roundRadius={5}
+        color="#4B0082"
+        center={[0, 0, 10]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/sphere.fixture.tsx b/examples/sphere.fixture.tsx
index 35fa24b..2b0b56d 100644
--- a/examples/sphere.fixture.tsx
+++ b/examples/sphere.fixture.tsx
@@ -1,8 +1,11 @@
-import { Sphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Sphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Sphere radius={10} color="orange" />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Sphere radius={10} color="orange" />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/subtract.fixture.tsx b/examples/subtract.fixture.tsx
index 3d27252..8d8afc5 100644
--- a/examples/subtract.fixture.tsx
+++ b/examples/subtract.fixture.tsx
@@ -1,11 +1,14 @@
-import { Cube, Sphere, Subtract } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cube, Sphere, Subtract } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Subtract>
-      <Cube size={10} />
-      <Sphere radius={6} />
-    </Subtract>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Subtract>
+        <Cube size={10} />
+        <Sphere radius={6} />
+      </Subtract>
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/torus.fixture.tsx b/examples/torus.fixture.tsx
index a26d1b8..b4a8f0d 100644
--- a/examples/torus.fixture.tsx
+++ b/examples/torus.fixture.tsx
@@ -1,8 +1,16 @@
-import { Torus } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Torus } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Torus innerRadius={1} outerRadius={1.2} color="red" center={[0, 10, 0]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Torus
+        innerRadius={1}
+        outerRadius={1.2}
+        color="red"
+        center={[0, 10, 0]}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/translate.fixture.tsx b/examples/translate.fixture.tsx
index 1556fec..761eaf1 100644
--- a/examples/translate.fixture.tsx
+++ b/examples/translate.fixture.tsx
@@ -1,26 +1,29 @@
-import { Cuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Translate } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { Cuboid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Translate } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture>
-    <Cuboid size={[20, 10, 10]} />
-    <Cuboid center={[0, 0, 15]} size={[15, 10, 15]} color="red" />
-    <Translate offset={[0, 0, -15]}>
-      <Cuboid size={[15, 10, 15]} color="blue" />
-      <Cuboid size={[5, 25, 5]} color="white" />
-    </Translate>
-    <Translate offset={[0, 15, 0]}>
+  <Example>
+    <JsCadFixture>
+      <Cuboid size={[20, 10, 10]} />
+      <Cuboid center={[0, 0, 15]} size={[15, 10, 15]} color="red" />
       <Translate offset={[0, 0, -15]}>
-        <Cuboid size={[3, 3, 3]} color="green" />
-        <Cuboid size={[4, 2, 4]} color="white" />
-        <Cuboid size={[5, 1, 5]} color="red" />
-        <Translate offset={[0, 0, -10]}>
-          <Cuboid size={[3, 3, 3]} color="blue" />
+        <Cuboid size={[15, 10, 15]} color="blue" />
+        <Cuboid size={[5, 25, 5]} color="white" />
+      </Translate>
+      <Translate offset={[0, 15, 0]}>
+        <Translate offset={[0, 0, -15]}>
+          <Cuboid size={[3, 3, 3]} color="green" />
           <Cuboid size={[4, 2, 4]} color="white" />
           <Cuboid size={[5, 1, 5]} color="red" />
+          <Translate offset={[0, 0, -10]}>
+            <Cuboid size={[3, 3, 3]} color="blue" />
+            <Cuboid size={[4, 2, 4]} color="white" />
+            <Cuboid size={[5, 1, 5]} color="red" />
+          </Translate>
         </Translate>
       </Translate>
-    </Translate>
-  </JsCadFixture>
-)
+    </JsCadFixture>
+  </Example>
+);
diff --git a/examples/twisted-cylindrical-elliptic.fixture.tsx b/examples/twisted-cylindrical-elliptic.fixture.tsx
index dbd78b4..1e9705f 100644
--- a/examples/twisted-cylindrical-elliptic.fixture.tsx
+++ b/examples/twisted-cylindrical-elliptic.fixture.tsx
@@ -1,15 +1,18 @@
-import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { CylinderElliptic } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <CylinderElliptic
-      height={6}
-      startRadius={[1, 1.5]}
-      endRadius={[1.5, 1]}
-      segments={64}
-      startAngle={0}
-      endAngle={Math.PI * 2}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <CylinderElliptic
+        height={6}
+        startRadius={[1, 1.5]}
+        endRadius={[1.5, 1]}
+        segments={64}
+        startAngle={0}
+        endAngle={Math.PI * 2}
+      />
+    </JsCadFixture>
+  </Example>
+);
diff --git a/package.json b/package.json
index 1147e38..7c4720b 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,10 @@
   },
   "dependencies": {
     "color": "^4.2.3",
-    "react-reconciler": "^0.29.2"
+    "react-element-to-jsx-string": "^15.0.0",
+    "react-icons": "^5.3.0",
+    "react-reconciler": "^0.29.2",
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.3",
diff --git a/src/CodeViewer.tsx b/src/CodeViewer.tsx
new file mode 100644
index 0000000..681c323
--- /dev/null
+++ b/src/CodeViewer.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { FiCopy } from "react-icons/fi";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface CodeViewerProps {
+  code: string;
+}
+
+const CodeViewer: React.FC<CodeViewerProps> = ({ code }) => {
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy code: ", err);
+    }
+  };
+
+  return (
+    <div style={{ position: "relative", width: "100%" }}>
+      <SyntaxHighlighter
+        language="typescript"
+        style={vscDarkPlus}
+        customStyle={{
+          padding: "16px",
+          borderRadius: "8px",
+          fontSize: "14px",
+          overflow: "auto",
+          whiteSpace: "pre-wrap",
+          wordWrap: "break-word",
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+      <button
+        onClick={handleCopy}
+        style={{
+          position: "absolute",
+          top: "8px",
+          right: "8px",
+          backgroundColor: "transparent",
+          border: "none",
+          color: "white",
+          cursor: "pointer",
+          zIndex: 10,
+        }}
+        title="Copy to clipboard"
+      >
+        <FiCopy size={20} />
+      </button>
+      {copySuccess && (
+        <span
+          style={{
+            position: "absolute",
+            top: "40px",
+            right: "8px",
+            color: "white",
+            fontSize: "0.9rem",
+          }}
+        >
+          Copied!
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default CodeViewer;
diff --git a/src/Example.tsx b/src/Example.tsx
new file mode 100644
index 0000000..6879892
--- /dev/null
+++ b/src/Example.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import jsxToString from "react-element-to-jsx-string";
+import CodeViewer from "./CodeViewer";
+import "./main.css";
+
+interface ExampleProps {
+  children: React.ReactNode;
+}
+
+const Example: React.FC<ExampleProps> = ({ children }) => {
+  const [showCode, setShowCode] = useState(false);
+
+  const handleToggleCode = () => setShowCode(!showCode);
+
+  // Convert children to JSX string
+  const designCode = jsxToString(children, {
+    useFunctionCode: true,
+    functionNameOnly: true,
+  });
+
+  return (
+    <div className="example-container">
+      {children}
+      <button onClick={handleToggleCode} className="toggle-button">
+        {showCode ? "Hide Code" : "View Code"}
+      </button>
+      {showCode && (
+        <div className="code-viewer">
+          <CodeViewer code={designCode} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Example;
diff --git a/src/main.css b/src/main.css
index 4dc4eeb..aea7347 100644
--- a/src/main.css
+++ b/src/main.css
@@ -3,3 +3,39 @@ body {
   margin: 0;
   padding: 0;
 }
+
+.example-container {
+  position: relative; /* This allows absolute positioning of the button and code viewer */
+}
+
+.toggle-button {
+  position: absolute;
+  top: 10px; /* Position from the top */
+  left: 10px; /* Position from the left */
+  background-color: #3b82f6; /* Blue color */
+  color: white;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  z-index: 10; /* Ensure the button stays above other content */
+}
+
+.toggle-button:hover {
+  background-color: #2563eb; /* Darker blue on hover */
+}
+
+.code-viewer {
+  position: absolute;
+  top: 20px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  background-color: black;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+  height: 40vh;
+}