diff --git a/docs/app/guides/custom-components/contexts/page.tsx b/docs/app/guides/custom-components/contexts/page.tsx
index f78b0613..e15b8918 100644
--- a/docs/app/guides/custom-components/contexts/page.tsx
+++ b/docs/app/guides/custom-components/contexts/page.tsx
@@ -1,8 +1,5 @@
-import PizzaSlice from "guide-examples/custom/pizza-slice"
-import PizzaSliceSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
-import PointCloud from "guide-examples/custom/point-cloud"
-import PointCloudSource from "!raw-loader!guide-examples/custom/point-cloud"
+import * as PizzaSlice from "guide-examples/custom/pizza-slice"
+import * as PointCloud from "guide-examples/custom/point-cloud"
 
 import CodeAndExample from "components/CodeAndExample"
 import Link from "next/link"
@@ -62,7 +59,7 @@ export default function TransformContextsPage() {
         transforms it.
       </p>
 
-      <CodeAndExample component={<PizzaSlice />} source={PizzaSliceSource} />
+      <CodeAndExample example={PizzaSlice} />
 
       <p>
         This is an example of a component that gets entirely transformed by the user and view
@@ -82,7 +79,7 @@ export default function TransformContextsPage() {
         the CSS transforms approach here, because that would distort each circle.
       </p>
 
-      <CodeAndExample component={<PointCloud />} source={PointCloudSource} />
+      <CodeAndExample example={PointCloud} />
     </>
   )
 }
diff --git a/docs/app/guides/display/circles/page.tsx b/docs/app/guides/display/circles/page.tsx
index a60d2d58..292a5506 100644
--- a/docs/app/guides/display/circles/page.tsx
+++ b/docs/app/guides/display/circles/page.tsx
@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import MovableCircle from "guide-examples/MovableCircle"
+import * as MovableCircle from "guide-examples/MovableCircle"
 import MovableCircleSource from "!raw-loader!guide-examples/MovableCircle"
 
 import { PropTable } from "components/PropTable"
@@ -10,7 +10,7 @@ export default function Page() {
     <>
       <p>Circles take a center vector and a radius.</p>
 
-      <CodeAndExample component={<MovableCircle />} source={MovableCircleSource} />
+      <CodeAndExample example={MovableCircle} />
 
       <PropTable of={"Circle"} />
     </>
diff --git a/docs/app/guides/display/coordinates/page.tsx b/docs/app/guides/display/coordinates/page.tsx
index 98d861a6..675eed8b 100644
--- a/docs/app/guides/display/coordinates/page.tsx
+++ b/docs/app/guides/display/coordinates/page.tsx
@@ -1,16 +1,11 @@
 import { PropTable } from "components/PropTable"
 import CodeAndExample from "components/CodeAndExample"
 
-import CartesianCoordinatesExample from "guide-examples/display/coordinates/CartesianCoordinatesExample"
-import CartesianCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesExample"
-
-import CartesianCoordinatesConfigExample from "guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
-import CartesianCoordinatesConfigExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
+import * as CartesianCoordinatesExample from "guide-examples/display/coordinates/CartesianCoordinatesExample"
+import * as CartesianCoordinatesConfigExample from "guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
 import Code from "components/Code"
 
-import PolarCoordinatesExample from "guide-examples/display/coordinates/PolarCoordinatesExample"
-import PolarCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/PolarCoordinatesExample"
-
+import * as PolarCoordinatesExample from "guide-examples/display/coordinates/PolarCoordinatesExample"
 function CoordinatesPage() {
   return (
     <>
@@ -24,10 +19,7 @@ function CoordinatesPage() {
 
       <h2>Cartesian coordinates</h2>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesExample />}
-        source={CartesianCoordinatesExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesExample} />
 
       <PropTable of={"Coordinates.Cartesian"} />
 
@@ -64,17 +56,11 @@ function CoordinatesPage() {
         <code>labels</code> to render in terms of π.
       </p>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesConfigExample />}
-        source={CartesianCoordinatesConfigExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesConfigExample} />
 
       <h2>Polar coordinates</h2>
 
-      <CodeAndExample
-        component={<PolarCoordinatesExample />}
-        source={PolarCoordinatesExampleSource}
-      />
+      <CodeAndExample example={PolarCoordinatesExample} />
 
       <PropTable of={"Coordinates.Polar"} />
 
diff --git a/docs/app/guides/display/debug/page.tsx b/docs/app/guides/display/debug/page.tsx
index 5eb3a08d..6b08ee81 100644
--- a/docs/app/guides/display/debug/page.tsx
+++ b/docs/app/guides/display/debug/page.tsx
@@ -4,12 +4,8 @@ import Link from "next/link"
 
 import CodeAndExample from "components/CodeAndExample"
 
-import PizzaSliceExample from "guide-examples/custom/pizza-slice"
-import PizzaSliceExampleSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
-import Example from "guide-examples/debug/PaneVisualizerExample"
-import PaneVisualizerExampleSource from "!raw-loader!guide-examples/debug/PaneVisualizerExample"
-
+import * as PizzaSliceExample from "guide-examples/custom/pizza-slice"
+import * as Example from "guide-examples/debug/PaneVisualizerExample"
 export default function DebugPage() {
   return (
     <>
@@ -29,7 +25,7 @@ export default function DebugPage() {
         <Link href="/guides/custom-components/overview">custom components</Link>.
       </p>
 
-      <CodeAndExample component={<PizzaSliceExample />} source={PizzaSliceExampleSource} />
+      <CodeAndExample example={PizzaSliceExample} />
 
       <PropTable of={"Debug.TransformWidget"} />
 
@@ -41,7 +37,7 @@ export default function DebugPage() {
         pane context.
       </p>
 
-      <CodeAndExample component={<Example />} source={PaneVisualizerExampleSource} />
+      <CodeAndExample example={Example} />
 
       <PropTable of={"Debug.ViewportInfo"} />
     </>
diff --git a/docs/app/guides/display/ellipses/page.tsx b/docs/app/guides/display/ellipses/page.tsx
index 81e4baa2..74bc4683 100644
--- a/docs/app/guides/display/ellipses/page.tsx
+++ b/docs/app/guides/display/ellipses/page.tsx
@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import MovableEllipse from "guide-examples/MovableEllipse"
+import * as MovableEllipse from "guide-examples/MovableEllipse"
 import MovableEllipseSource from "!raw-loader!guide-examples/MovableEllipse"
 import WIP from "components/WIP"
 import Link from "next/link"
@@ -12,7 +12,7 @@ export default function Page() {
     <>
       <p>Ellipses take a center vector, radius vector, and an angle.</p>
 
-      <CodeAndExample component={<MovableEllipse />} source={MovableEllipseSource} />
+      <CodeAndExample example={MovableEllipse} />
 
       <PropTable of={"Ellipse"} />
 
diff --git a/docs/app/guides/display/lines/page.tsx b/docs/app/guides/display/lines/page.tsx
index a884e2d7..07c58b61 100644
--- a/docs/app/guides/display/lines/page.tsx
+++ b/docs/app/guides/display/lines/page.tsx
@@ -1,15 +1,10 @@
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
-import LineSegmentExample from "guide-examples/LineSegmentExample"
-import LineSegmentExampleSource from "!raw-loader!guide-examples/LineSegmentExample"
-import LineThroughPointsExample from "guide-examples/LineThroughPointsExample"
-import LineThroughPointsExampleSource from "!raw-loader!guide-examples/LineThroughPointsExample"
-import LinePointSlopeExample from "guide-examples/LinePointSlopeExample"
-import LinePointSlopeExampleSource from "!raw-loader!guide-examples/LinePointSlopeExample"
-import LinePointAngleExample from "guide-examples/LinePointAngleExample"
-import LinePointAngleExampleSource from "!raw-loader!guide-examples/LinePointAngleExample"
-
+import * as LineSegmentExample from "guide-examples/LineSegmentExample"
+import * as LineThroughPointsExample from "guide-examples/LineThroughPointsExample"
+import * as LinePointSlopeExample from "guide-examples/LinePointSlopeExample"
+import * as LinePointAngleExample from "guide-examples/LinePointAngleExample"
 function Lines() {
   return (
     <>
@@ -17,25 +12,22 @@ function Lines() {
 
       <h2>Line segment</h2>
 
-      <CodeAndExample component={<LineSegmentExample />} source={LineSegmentExampleSource} />
+      <CodeAndExample example={LineSegmentExample} />
       <PropTable of={"Line.Segment"} />
 
       <h2>Line through two points</h2>
 
-      <CodeAndExample
-        component={<LineThroughPointsExample />}
-        source={LineThroughPointsExampleSource}
-      />
+      <CodeAndExample example={LineThroughPointsExample} />
       <PropTable of={"Line.ThroughPoints"} />
 
       <h2>Point and slope</h2>
 
-      <CodeAndExample component={<LinePointSlopeExample />} source={LinePointSlopeExampleSource} />
+      <CodeAndExample example={LinePointSlopeExample} />
       <PropTable of={"Line.PointSlope"} />
 
       <h2>Point and angle</h2>
 
-      <CodeAndExample component={<LinePointAngleExample />} source={LinePointAngleExampleSource} />
+      <CodeAndExample example={LinePointAngleExample} />
       <PropTable of={"Line.PointAngle"} />
     </>
   )
diff --git a/docs/app/guides/display/mafs/page.tsx b/docs/app/guides/display/mafs/page.tsx
index 30ddc20b..7144921a 100644
--- a/docs/app/guides/display/mafs/page.tsx
+++ b/docs/app/guides/display/mafs/page.tsx
@@ -1,17 +1,10 @@
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
-import PlainMafsExample from "guide-examples/PlainMafsExample"
-import PlainMafsExampleSource from "!raw-loader!guide-examples/PlainMafsExample"
-
-import ContainViewboxExample from "guide-examples/display/viewbox/ContainViewbox"
-import ContainViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/ContainViewbox"
-
-import ZoomExample from "guide-examples/display/viewbox/ZoomExample"
-import ZoomExampleSource from "!raw-loader!guide-examples/display/viewbox/ZoomExample"
-
-import StretchViewboxExample from "guide-examples/display/viewbox/StretchViewbox"
-import StretchViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/StretchViewbox"
+import * as PlainMafsExample from "guide-examples/PlainMafsExample"
+import * as ContainViewboxExample from "guide-examples/display/viewbox/ContainViewbox"
+import * as ZoomExample from "guide-examples/display/viewbox/ZoomExample"
+import * as StretchViewboxExample from "guide-examples/display/viewbox/StretchViewbox"
 import Code from "components/Code"
 
 export async function generateMetadata() {
@@ -28,7 +21,7 @@ function MafsPage() {
         components. On its own, it renders a blank canvas.
       </p>
 
-      <CodeAndExample component={<PlainMafsExample />} source={PlainMafsExampleSource} />
+      <CodeAndExample example={PlainMafsExample} />
       <PropTable of="Mafs" />
 
       <h2>Sizing</h2>
@@ -63,7 +56,7 @@ function MafsPage() {
         <code>0.5-5</code>
       </p>
 
-      <CodeAndExample component={<ZoomExample />} source={ZoomExampleSource} />
+      <CodeAndExample example={ZoomExample} />
 
       <h2>Viewbox</h2>
 
@@ -73,7 +66,7 @@ function MafsPage() {
         to specify this with the <code>viewBox</code> prop.
       </p>
 
-      <CodeAndExample component={<ContainViewboxExample />} source={ContainViewboxExampleSource} />
+      <CodeAndExample example={ContainViewboxExample} />
 
       <h3>Aspect ratio preservation</h3>
 
@@ -83,7 +76,7 @@ function MafsPage() {
         tossing aside the aspect ratio preservation.
       </p>
 
-      <CodeAndExample component={<StretchViewboxExample />} source={StretchViewboxExampleSource} />
+      <CodeAndExample example={StretchViewboxExample} />
 
       <p>
         The only other option is <code>"contain"</code> for now, which is also the default.
diff --git a/docs/app/guides/display/plots/page.tsx b/docs/app/guides/display/plots/page.tsx
index f912d6d1..a217bb7c 100644
--- a/docs/app/guides/display/plots/page.tsx
+++ b/docs/app/guides/display/plots/page.tsx
@@ -1,21 +1,17 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import OfXAndY from "guide-examples/plots/of-x-and-y"
+import * as OfXAndY from "guide-examples/plots/of-x-and-y"
 import OfXAndYSource from "!raw-loader!guide-examples/plots/of-x-and-y.tsx"
 
-import TwistyBoi from "guide-examples/plots/twisty-boi"
+import * as TwistyBoi from "guide-examples/plots/twisty-boi"
 import TwistyBoiSource from "!raw-loader!guide-examples/plots/twisty-boi.tsx"
 
-import VectorFieldExample from "guide-examples/VectorFieldExample"
-import VectorFieldExampleSource from "!raw-loader!guide-examples/VectorFieldExample"
-
-import SineStressTest from "guide-examples/plots/sine-stress-test"
+import * as VectorFieldExample from "guide-examples/VectorFieldExample"
+import * as SineStressTest from "guide-examples/plots/sine-stress-test"
 import SineStressTestSource from "!raw-loader!guide-examples/plots/sine-stress-test.tsx"
 
 import { PropTable } from "components/PropTable"
-import InequalitiesExample from "guide-examples/plots/inequalities"
-import InequalitiesExampleSource from "!raw-loader!guide-examples/plots/inequalities.tsx"
-
+import * as InequalitiesExample from "guide-examples/plots/inequalities"
 function Functions() {
   return (
     <>
@@ -27,7 +23,7 @@ function Functions() {
       <h2>
         Functions of <em className="font-display">x</em> and <em className="font-display">y</em>
       </h2>
-      <CodeAndExample component={<OfXAndY />} source={OfXAndYSource} />
+      <CodeAndExample example={OfXAndY} />
       <PropTable of={"Plot.OfX"} />
       <PropTable of={"Plot.OfY"} />
 
@@ -48,11 +44,11 @@ function Functions() {
         <code>&lt;</code> <em>and</em> <code>≤</code>.
       </p>
 
-      <CodeAndExample component={<InequalitiesExample />} source={InequalitiesExampleSource} />
+      <CodeAndExample example={InequalitiesExample} />
       <PropTable of={"Plot.Inequality"} />
 
       <h2>Parametric functions</h2>
-      <CodeAndExample component={<TwistyBoi />} source={TwistyBoiSource} />
+      <CodeAndExample example={TwistyBoi} />
       <PropTable of={"Plot.Parametric"} />
 
       <h2>Vector fields</h2>
@@ -64,7 +60,7 @@ function Functions() {
         vector field is.
       </p>
 
-      <CodeAndExample component={<VectorFieldExample />} source={VectorFieldExampleSource} />
+      <CodeAndExample example={VectorFieldExample} />
       <PropTable of={"Plot.VectorField"} />
 
       <h2>Render quality</h2>
@@ -105,7 +101,7 @@ function Functions() {
         plot has nearly 3 megabytes of SVG path data).
       </p>
 
-      <CodeAndExample component={<SineStressTest />} source={SineStressTestSource} />
+      <CodeAndExample example={SineStressTest} />
 
       <p>
         If you pan this example around, you may see a considerably slow framerate. Interestingly,
diff --git a/docs/app/guides/display/points/page.tsx b/docs/app/guides/display/points/page.tsx
index 08c18a60..981767a3 100644
--- a/docs/app/guides/display/points/page.tsx
+++ b/docs/app/guides/display/points/page.tsx
@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import SimplePoint from "guide-examples/display/SimplePoint"
+import * as SimplePoint from "guide-examples/display/SimplePoint"
 import SimplePointSource from "!raw-loader!guide-examples/display/SimplePoint"
 
 import { PropTable } from "components/PropTable"
@@ -10,7 +10,7 @@ function Points() {
     <>
       <p>Points are dots that can be rendered at a location (x, y).</p>
 
-      <CodeAndExample component={<SimplePoint />} source={SimplePointSource} />
+      <CodeAndExample example={SimplePoint} />
 
       <PropTable of={"Point"} />
     </>
diff --git a/docs/app/guides/display/polygons/page.tsx b/docs/app/guides/display/polygons/page.tsx
index 867b4790..dddedd40 100644
--- a/docs/app/guides/display/polygons/page.tsx
+++ b/docs/app/guides/display/polygons/page.tsx
@@ -1,9 +1,7 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import PolygonExample from "guide-examples/PolygonExample"
-import PolygonExampleSource from "!raw-loader!guide-examples/PolygonExample"
-import PolylineExample from "guide-examples/PolylineExample"
-import PolylineExampleSource from "!raw-loader!guide-examples/PolylineExample"
+import * as PolygonExample from "guide-examples/PolygonExample"
+import * as PolylineExample from "guide-examples/PolylineExample"
 import { PropTable } from "components/PropTable"
 
 function Polygons() {
@@ -11,11 +9,11 @@ function Polygons() {
     <>
       <p>Polygons take a number of points and create a closed shape.</p>
 
-      <CodeAndExample component={<PolygonExample />} source={PolygonExampleSource} />
+      <CodeAndExample example={PolygonExample} />
 
       <PropTable of={"Polygon"} />
 
-      <CodeAndExample component={<PolylineExample />} source={PolylineExampleSource} />
+      <CodeAndExample example={PolylineExample} />
 
       <PropTable of={"Polyline"} />
     </>
diff --git a/docs/app/guides/display/text/page.tsx b/docs/app/guides/display/text/page.tsx
index 50140e22..72cbbe03 100644
--- a/docs/app/guides/display/text/page.tsx
+++ b/docs/app/guides/display/text/page.tsx
@@ -1,7 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import TextExample from "guide-examples/TextExample"
-import TextExampleSource from "!raw-loader!guide-examples/TextExample"
+import * as TextExample from "guide-examples/TextExample"
 import { PropTable } from "components/PropTable"
 
 function Text() {
@@ -13,7 +12,7 @@ function Text() {
         <code>attach</code> will orient the text along a cardinal direction ("n", "s", "nw", etc.)
       </p>
 
-      <CodeAndExample component={<TextExample />} source={TextExampleSource} />
+      <CodeAndExample example={TextExample} />
 
       <PropTable of={"Text"} />
     </>
diff --git a/docs/app/guides/display/transform/page.tsx b/docs/app/guides/display/transform/page.tsx
index 2cf48195..851f68e7 100644
--- a/docs/app/guides/display/transform/page.tsx
+++ b/docs/app/guides/display/transform/page.tsx
@@ -1,5 +1,4 @@
-import SimpleTransformExample from "guide-examples/utility/SimpleTransform"
-import SimpleTransformExampleSource from "!raw-loader!guide-examples/utility/SimpleTransform"
+import * as SimpleTransformExample from "guide-examples/utility/SimpleTransform"
 import CodeAndExample from "components/CodeAndExample"
 import Code from "components/Code"
 import { PropTable } from "components/PropTable"
@@ -12,10 +11,7 @@ export default function Page() {
         collectively. This is where <code>Transform</code> comes in handy.
       </p>
 
-      <CodeAndExample
-        component={<SimpleTransformExample />}
-        source={SimpleTransformExampleSource}
-      />
+      <CodeAndExample example={SimpleTransformExample} />
 
       <PropTable of={"Transform"} />
 
diff --git a/docs/app/guides/display/vectors/page.tsx b/docs/app/guides/display/vectors/page.tsx
index 6d73541a..c2aaed85 100644
--- a/docs/app/guides/display/vectors/page.tsx
+++ b/docs/app/guides/display/vectors/page.tsx
@@ -1,9 +1,7 @@
 import { PropTable } from "components/PropTable"
 
 import CodeAndExample from "components/CodeAndExample"
-import VectorExample from "guide-examples/display/vectors/VectorExample"
-import VectorExampleSource from "!raw-loader!guide-examples/display/vectors/VectorExample"
-
+import * as VectorExample from "guide-examples/display/vectors/VectorExample"
 function Vectors() {
   return (
     <>
@@ -14,7 +12,7 @@ function Vectors() {
         matrices), exposing them as <code>vec</code>. Those utilities are used extensively here.
       </p>
 
-      <CodeAndExample component={<VectorExample />} source={VectorExampleSource} />
+      <CodeAndExample example={VectorExample} />
 
       <PropTable of={"Vector"} />
     </>
diff --git a/docs/app/guides/examples/bezier-curves/page.tsx b/docs/app/guides/examples/bezier-curves/page.tsx
index d24c4206..5a6ddb53 100644
--- a/docs/app/guides/examples/bezier-curves/page.tsx
+++ b/docs/app/guides/examples/bezier-curves/page.tsx
@@ -1,6 +1,5 @@
 import CodeAndExample from "components/CodeAndExample"
-import BezierCurves from "guide-examples/examples/BezierCurves"
-import BezierCurvesSource from "!raw-loader!guide-examples/examples/BezierCurves.tsx"
+import * as BezierCurves from "guide-examples/examples/BezierCurves"
 import Link from "next/link"
 
 export default function BezierCurvesPage() {
@@ -11,7 +10,7 @@ export default function BezierCurvesPage() {
         <Link href="https://www.youtube.com/watch?v=aVwxzDHniEw">video on Bézier curves</Link>.
       </p>
 
-      <CodeAndExample source={BezierCurvesSource} component={<BezierCurves />} />
+      <CodeAndExample example={BezierCurves} />
     </>
   )
 }
diff --git a/docs/app/guides/examples/fancy-parabola/page.tsx b/docs/app/guides/examples/fancy-parabola/page.tsx
index fa05ff76..7be8d4f2 100644
--- a/docs/app/guides/examples/fancy-parabola/page.tsx
+++ b/docs/app/guides/examples/fancy-parabola/page.tsx
@@ -1,13 +1,12 @@
 import CodeAndExample from "components/CodeAndExample"
-import FancyParabola from "guide-examples/examples/FancyParabola"
-import FancyParabolaSource from "!raw-loader!guide-examples/examples/FancyParabola.tsx"
+import * as FancyParabola from "guide-examples/examples/FancyParabola"
 
 export default function ProjectilePage() {
   return (
     <>
       <p></p>
 
-      <CodeAndExample source={FancyParabolaSource} component={<FancyParabola />} />
+      <CodeAndExample example={FancyParabola} />
     </>
   )
 }
diff --git a/docs/app/guides/examples/projectile-motion/page.tsx b/docs/app/guides/examples/projectile-motion/page.tsx
index 1dedcf65..c38da5d5 100644
--- a/docs/app/guides/examples/projectile-motion/page.tsx
+++ b/docs/app/guides/examples/projectile-motion/page.tsx
@@ -1,6 +1,5 @@
 import CodeAndExample from "components/CodeAndExample"
-import ProjectileMotion from "guide-examples/examples/ProjectileMotion"
-import ProjectileMotionSource from "!raw-loader!guide-examples/examples/ProjectileMotion.tsx"
+import * as ProjectileMotion from "guide-examples/examples/ProjectileMotion"
 
 function ProjectilePage() {
   return (
@@ -11,7 +10,7 @@ function ProjectilePage() {
         the animation.
       </p>
 
-      <CodeAndExample source={ProjectileMotionSource} component={<ProjectileMotion />} />
+      <CodeAndExample example={ProjectileMotion} />
     </>
   )
 }
diff --git a/docs/app/guides/examples/riemann-sums/page.tsx b/docs/app/guides/examples/riemann-sums/page.tsx
index ffff8dd0..a5c16fb0 100644
--- a/docs/app/guides/examples/riemann-sums/page.tsx
+++ b/docs/app/guides/examples/riemann-sums/page.tsx
@@ -1,6 +1,5 @@
 import CodeAndExample from "components/CodeAndExample"
-import Riemann from "guide-examples/examples/Riemann"
-import RiemannSource from "!raw-loader!guide-examples/examples/Riemann.tsx"
+import * as Riemann from "guide-examples/examples/Riemann"
 
 function RiemannPage() {
   return (
@@ -17,7 +16,7 @@ function RiemannPage() {
         provide inputs to Mafs.
       </p>
 
-      <CodeAndExample source={RiemannSource} component={<Riemann />} />
+      <CodeAndExample example={Riemann} />
     </>
   )
 }
diff --git a/docs/app/guides/experimental/animation/page.tsx b/docs/app/guides/experimental/animation/page.tsx
index 057a88b8..acc083f9 100644
--- a/docs/app/guides/experimental/animation/page.tsx
+++ b/docs/app/guides/experimental/animation/page.tsx
@@ -1,7 +1,7 @@
 import WIP from "components/WIP"
 import CodeAndExample from "components/CodeAndExample"
 
-import AnimatedPoint from "guide-examples/animation/AnimatedPoint"
+import * as AnimatedPoint from "guide-examples/animation/AnimatedPoint"
 import AnimatedPointSource from "!raw-loader!guide-examples/animation/AnimatedPoint"
 
 function Stopwatch() {
@@ -24,7 +24,7 @@ function Stopwatch() {
         </p>
       </WIP>
 
-      <CodeAndExample component={<AnimatedPoint />} source={AnimatedPointSource} />
+      <CodeAndExample example={AnimatedPoint} />
     </>
   )
 }
diff --git a/docs/app/guides/experimental/latex/page.tsx b/docs/app/guides/experimental/latex/page.tsx
index 961c9aad..f8ccfd73 100644
--- a/docs/app/guides/experimental/latex/page.tsx
+++ b/docs/app/guides/experimental/latex/page.tsx
@@ -1,11 +1,9 @@
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
-import LatexExample from "components/guide-examples/display/Latex"
-import LatexExampleSource from "!raw-loader!components/guide-examples/display/Latex"
+import * as LatexExample from "components/guide-examples/display/Latex"
+import * as LatexDocExample from "components/guide-examples/display/LatexDoc"
 
-import LatexDocExample from "components/guide-examples/display/LatexDoc"
-import LatexDocExampleSource from "!raw-loader!components/guide-examples/display/LatexDoc"
 import Link from "next/link"
 import Experimental from "components/Experimental"
 import Code from "components/Code"
@@ -57,8 +55,8 @@ export default function LatexPage() {
         <code>x</code> variable in the following code).
       </p>
 
-      <CodeAndExample component={<LatexExample />} source={LatexExampleSource} />
-      <CodeAndExample component={<LatexDocExample />} source={LatexDocExampleSource} />
+      <CodeAndExample example={LatexExample} />
+      <CodeAndExample example={LatexDocExample} />
     </>
   )
 }
diff --git a/docs/app/guides/get-started/hello-f-x/page.tsx b/docs/app/guides/get-started/hello-f-x/page.tsx
index 14085ddd..37c67a3a 100644
--- a/docs/app/guides/get-started/hello-f-x/page.tsx
+++ b/docs/app/guides/get-started/hello-f-x/page.tsx
@@ -1,15 +1,10 @@
-import CodeAndExample from "../../../../components/CodeAndExample"
-
-import Plain from "../../../../components/guide-examples/hello-fx/plain"
-import PlainSource from "!raw-loader!../../../../components/guide-examples/hello-fx/plain"
-import Subdivions from "../../../../components/guide-examples/hello-fx/subdivisions"
-import SubdivionsSource from "!raw-loader!../../../../components/guide-examples/hello-fx/subdivisions"
-import Sine from "../../../../components/guide-examples/hello-fx/sine"
-import SineSource from "!raw-loader!../../../../components/guide-examples/hello-fx/sine"
-import SinePi from "../../../../components/guide-examples/hello-fx/sine-pi"
-import SinePiSource from "!raw-loader!../../../../components/guide-examples/hello-fx/sine-pi"
-import Draggable from "../../../../components/guide-examples/hello-fx/draggable"
-import DraggableSource from "!raw-loader!../../../../components/guide-examples/hello-fx/draggable"
+import CodeAndExample from "components/CodeAndExample"
+
+import * as Plain from "guide-examples/hello-fx/plain"
+import * as Subdivions from "guide-examples/hello-fx/subdivisions"
+import * as Sine from "guide-examples/hello-fx/sine"
+import * as SinePi from "guide-examples/hello-fx/sine-pi"
+import * as Draggable from "guide-examples/hello-fx/draggable"
 import type { Metadata } from "next"
 
 export const metadata: Metadata = {
@@ -33,14 +28,14 @@ function Page() {
         nothing too interesting on it.
       </p>
 
-      <CodeAndExample collapsible={false} component={<Plain />} source={PlainSource} />
+      <CodeAndExample collapsible={false} example={Plain} />
 
       <p>
         <code>CartesianCoordinates</code> is pretty customizable. Let's make our graph a little bit
         more sophisticated-looking by adding some subdivisions.
       </p>
 
-      <CodeAndExample collapsible={false} component={<Subdivions />} source={SubdivionsSource} />
+      <CodeAndExample collapsible={false} example={Subdivions} />
 
       <h2>Plotting a function</h2>
 
@@ -49,7 +44,7 @@ function Page() {
         <code>Math.sin(x)</code>.
       </p>
 
-      <CodeAndExample collapsible={false} component={<Sine />} source={SineSource} />
+      <CodeAndExample collapsible={false} example={Sine} />
 
       <p>
         We've passed a plain JavaScript function, and Mafs evaluated it and plotted it across the
@@ -69,7 +64,7 @@ function Page() {
         <li>Tell Mafs to let us squish the viewport</li>
       </ul>
 
-      <CodeAndExample collapsible={false} component={<SinePi />} source={SinePiSource} />
+      <CodeAndExample collapsible={false} example={SinePi} />
 
       <p>
         At this point, it's worth noting that you haven't <em>instructed</em> the library to do
@@ -85,7 +80,7 @@ function Page() {
         to our function.
       </p>
 
-      <CodeAndExample collapsible={false} component={<Draggable />} source={DraggableSource} />
+      <CodeAndExample collapsible={false} example={Draggable} />
 
       <p>
         There are a few noteworthy things here: one is how we declared our point. We start centered
diff --git a/docs/app/guides/get-started/installation/page.tsx b/docs/app/guides/get-started/installation/page.tsx
index bb12cf92..e17e4b7a 100644
--- a/docs/app/guides/get-started/installation/page.tsx
+++ b/docs/app/guides/get-started/installation/page.tsx
@@ -1,8 +1,7 @@
-import Code from "../../../../components/Code"
-import CodeAndExample from "../../../../components/CodeAndExample"
+import Code from "components/Code"
+import CodeAndExample from "components/CodeAndExample"
 
-import Plain from "../../../../components/guide-examples/hello-fx/plain"
-import PlainSource from "!raw-loader!../../../../components/guide-examples/hello-fx/plain"
+import * as Plain from "guide-examples/hello-fx/plain"
 import endent from "endent"
 import type { Metadata } from "next"
 
@@ -35,7 +34,7 @@ function Page() {
 
       <p>Now, in your React app, you should be able to render a Mafs view.</p>
 
-      <CodeAndExample component={<Plain />} source={PlainSource} />
+      <CodeAndExample example={Plain} />
 
       <h2>Fancy math font</h2>
 
diff --git a/docs/app/guides/interaction/movable-points/page.tsx b/docs/app/guides/interaction/movable-points/page.tsx
index 4ba96b99..d1a9e5c1 100644
--- a/docs/app/guides/interaction/movable-points/page.tsx
+++ b/docs/app/guides/interaction/movable-points/page.tsx
@@ -1,10 +1,10 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import PointsAlongFunction from "guide-examples/display/PointsAlongFunction"
+import * as PointsAlongFunction from "guide-examples/display/PointsAlongFunction"
 import PointsAlongFunctionSource from "!raw-loader!guide-examples/display/PointsAlongFunction"
-import DynamicMovablePoints from "guide-examples/display/DynamicMovablePoints"
+import * as DynamicMovablePoints from "guide-examples/display/DynamicMovablePoints"
 import DynamicMovablePointsSource from "!raw-loader!guide-examples/display/DynamicMovablePoints"
-import SnapPoint from "guide-examples/SnapPoint"
+import * as SnapPoint from "guide-examples/SnapPoint"
 import SnapPointSource from "!raw-loader!guide-examples/SnapPoint"
 import { Advanced } from "components/Advanced"
 import Code from "components/Code"
@@ -24,7 +24,7 @@ function Stopwatch() {
         or constrained to an arbitrary function. This example constrains movement horizontally:
       </p>
 
-      <CodeAndExample component={<PointsAlongFunction />} source={PointsAlongFunctionSource} />
+      <CodeAndExample example={PointsAlongFunction} />
 
       <h2>Constraints</h2>
 
@@ -94,7 +94,7 @@ function Stopwatch() {
         circle.
       </p>
 
-      <CodeAndExample component={<SnapPoint />} source={SnapPointSource} />
+      <CodeAndExample example={SnapPoint} />
 
       <h2 className="flex flex-col gap-1">
         <div>
@@ -110,7 +110,7 @@ function Stopwatch() {
         (since the React "rules of hooks" ban you from dynamically calling hooks).
       </p>
 
-      <CodeAndExample component={<DynamicMovablePoints />} source={DynamicMovablePointsSource} />
+      <CodeAndExample example={DynamicMovablePoints} />
 
       <PropTable of={"MovablePoint"} />
     </>
diff --git a/docs/app/guides/sidebar.tsx b/docs/app/guides/sidebar.tsx
index af0f9506..1da30bfa 100644
--- a/docs/app/guides/sidebar.tsx
+++ b/docs/app/guides/sidebar.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-
 import fancyFx from "../../helpers/fancyFx"
 
 import { Guides } from "./guides"
diff --git a/docs/components/Code.tsx b/docs/components/Code.tsx
index e759ca29..e83bf4a6 100644
--- a/docs/components/Code.tsx
+++ b/docs/components/Code.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-
 import endent from "endent"
 import { toH } from "hast-to-hyperscript"
 
diff --git a/docs/components/CodeAndExample.tsx b/docs/components/CodeAndExample.tsx
index 84a03ffb..eef6f371 100644
--- a/docs/components/CodeAndExample.tsx
+++ b/docs/components/CodeAndExample.tsx
@@ -9,18 +9,15 @@ import sdk from "@stackblitz/sdk"
 import endent from "endent"
 
 interface Props {
-  source: string
-  component: React.ReactNode
+  example: { default: React.ComponentType; sourceCode?: string }
   clean?: boolean
   collapsible?: boolean
 }
 
-function CodeAndExample({
-  collapsible: collapsibleProp = true,
-  source,
-  component,
-  clean = true,
-}: Props) {
+function CodeAndExample({ collapsible: collapsibleProp = true, example, clean = true }: Props) {
+  const Component = example.default
+  let source = example.sourceCode!
+
   if (clean) {
     const remove = [
       /\s+height=\{[^}]*\}/g,
@@ -49,7 +46,7 @@ function CodeAndExample({
 
   return (
     <div className="w-auto sm:text-base text-sm -m-6 md:m-0 dark:shadow-xl">
-      <div className={`unround-mafs z-10`}>{component}</div>
+      <div className={`unround-mafs z-10`}>{<Component />}</div>
 
       <div className="relative">
         <div
diff --git a/docs/components/Experimental.tsx b/docs/components/Experimental.tsx
index 00ccc12e..8dc51ecc 100644
--- a/docs/components/Experimental.tsx
+++ b/docs/components/Experimental.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 function Experimental({ children }: React.PropsWithChildren) {
   return (
     <div className="bg-red-200 dark:bg-opacity-5 -m-6 md:m-0 p-6 md:rounded-lg space-y-2 text-red-900 dark:text-red-200">
diff --git a/docs/components/ScrollTop.tsx b/docs/components/ScrollTop.tsx
index e238cea8..16afff03 100644
--- a/docs/components/ScrollTop.tsx
+++ b/docs/components/ScrollTop.tsx
@@ -2,7 +2,6 @@
 
 import { useSelectedLayoutSegments } from "next/navigation"
 import * as React from "react"
-
 export default function ScrollTop() {
   const [sectionTitleKebab, guideTitleKebab] = useSelectedLayoutSegments()
 
diff --git a/docs/components/WIP.tsx b/docs/components/WIP.tsx
index b5c32501..31ecfadf 100644
--- a/docs/components/WIP.tsx
+++ b/docs/components/WIP.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 function WIP({ children }: React.PropsWithChildren) {
   return (
     <div className="bg-yellow-200 dark:bg-opacity-5 -m-6 md:m-0 p-6 md:rounded-lg space-y-2 text-yellow-900 dark:text-yellow-200">
diff --git a/docs/components/guide-examples/custom/pizza-slice.tsx b/docs/components/guide-examples/custom/pizza-slice.tsx
index 24c8535d..927cf573 100644
--- a/docs/components/guide-examples/custom/pizza-slice.tsx
+++ b/docs/components/guide-examples/custom/pizza-slice.tsx
@@ -2,7 +2,6 @@
 
 import { Mafs, Coordinates, Debug } from "mafs"
 import * as React from "react"
-
 export default function Example() {
   return (
     <Mafs height={300} viewBox={{ y: [-1, 1], x: [-1, 1] }}>
diff --git a/docs/components/guide-examples/examples/ProjectileMotion.tsx b/docs/components/guide-examples/examples/ProjectileMotion.tsx
index a48b2282..22fabd3e 100644
--- a/docs/components/guide-examples/examples/ProjectileMotion.tsx
+++ b/docs/components/guide-examples/examples/ProjectileMotion.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-
 import {
   Mafs,
   useStopwatch,
diff --git a/docs/guide-example-loader.js b/docs/guide-example-loader.js
new file mode 100644
index 00000000..2b1c30db
--- /dev/null
+++ b/docs/guide-example-loader.js
@@ -0,0 +1,10 @@
+const path = require("node:path")
+
+module.exports = function guideExampleLoader(source) {
+  // const filename = path.basename(this.resourcePath, path.extname(this.resourcePath))
+
+  return `
+    ${source}
+    ; export const sourceCode = ${JSON.stringify(source)};
+  `
+}
diff --git a/docs/helpers/fancyFx.tsx b/docs/helpers/fancyFx.tsx
index 26b35e39..843c1f6b 100644
--- a/docs/helpers/fancyFx.tsx
+++ b/docs/helpers/fancyFx.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 export default function fancyFx(title: string): React.ReactNode {
   function FOfX() {
     return (
diff --git a/docs/next.config.js b/docs/next.config.js
index 44b6fb5a..1908def2 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["mafs"],
+  webpack: (config, { isServer }) => {
+    // Add a loader that attaches source code to files in guide-examples
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      include: /guide-examples/,
+      use: [{ loader: require.resolve("./guide-example-loader") }],
+    })
+
+    return config
+  },
   async redirects() {
     return [
       {
diff --git a/scripts/testgen.ts b/scripts/testgen.ts
index 1792068d..44ef6222 100644
--- a/scripts/testgen.ts
+++ b/scripts/testgen.ts
@@ -3,7 +3,6 @@ import path from "path"
 import fs from "fs-extra"
 import prettier from "prettier"
 import * as url from "url"
-
 const SKIP = [
   // Animations are flaky
   /animated/i,
diff --git a/src/animation/useStopwatch.ts b/src/animation/useStopwatch.ts
index e5d4cd96..b242fc07 100644
--- a/src/animation/useStopwatch.ts
+++ b/src/animation/useStopwatch.ts
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 export interface StopwatchArguments {
   /** The start time in seconds */
   startTime?: number
diff --git a/src/context/TestContext.tsx b/src/context/TestContext.tsx
index 3f53b6c1..5b810931 100644
--- a/src/context/TestContext.tsx
+++ b/src/context/TestContext.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 interface TestContextShape {
   overrideHeight?: number
 }
diff --git a/src/debug/TransformWidget.tsx b/src/debug/TransformWidget.tsx
index c045b2b6..7d63920d 100644
--- a/src/debug/TransformWidget.tsx
+++ b/src/debug/TransformWidget.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 import { vec } from "../vec"
 import { Theme } from "../display/Theme"
 import { useMovablePoint } from "../interaction/useMovablePoint"
diff --git a/src/gestures/useWheelEnabler.tsx b/src/gestures/useWheelEnabler.tsx
index c025b6d6..41aa8a5e 100644
--- a/src/gestures/useWheelEnabler.tsx
+++ b/src/gestures/useWheelEnabler.tsx
@@ -1,5 +1,4 @@
 import * as React from "react"
-
 /**
  * A custom hook that makes the `wheel` event not interrupt scrolling. It will
  * only allow the Mafs viewport to be zoomed using the wheel if the user hasn't