diff --git a/apps/typegpu-docs/src/components/CodeEditor.tsx b/apps/typegpu-docs/src/components/CodeEditor.tsx
index 90ab90aa57..7e3c7b4d7a 100644
--- a/apps/typegpu-docs/src/components/CodeEditor.tsx
+++ b/apps/typegpu-docs/src/components/CodeEditor.tsx
@@ -6,7 +6,10 @@ import Editor, {
 import type { editor } from 'monaco-editor';
 import { entries, filter, fromEntries, isTruthy, map, pipe } from 'remeda';
 import { SANDBOX_MODULES } from '../utils/examples/sandboxModules.ts';
-import type { ExampleSrcFile } from '../utils/examples/types.ts';
+import type {
+  ExampleCommonFile,
+  ExampleSrcFile,
+} from '../utils/examples/types.ts';
 import { tsCompilerOptions } from '../utils/liveEditor/embeddedTypeScript.ts';
 
 function handleEditorWillMount(monaco: Monaco) {
@@ -56,7 +59,7 @@ function handleEditorOnMount(editor: editor.IStandaloneCodeEditor) {
 }
 
 type Props = {
-  file: ExampleSrcFile;
+  file: ExampleSrcFile | ExampleCommonFile;
   shown: boolean;
 };
 
@@ -68,6 +71,11 @@ const createCodeEditorComponent = (
 (props: Props) => {
   const { file, shown } = props;
 
+  // Monaco needs relative paths to work correctly and '../../common/file.ts' will not do
+  const path = 'common' in file
+    ? `common/${file.path}`
+    : `${file.exampleKey.replace('--', '/')}/${file.path}`;
+
   return (
     <div
       className={shown
@@ -77,7 +85,7 @@ const createCodeEditorComponent = (
       <Editor
         defaultLanguage={language}
         value={file.content}
-        path={file.path}
+        path={path}
         beforeMount={beforeMount}
         onMount={onMount}
         options={{
diff --git a/apps/typegpu-docs/src/components/ExamplePage.tsx b/apps/typegpu-docs/src/components/ExamplePage.tsx
index 0e45ffd3cc..0249f75c04 100644
--- a/apps/typegpu-docs/src/components/ExamplePage.tsx
+++ b/apps/typegpu-docs/src/components/ExamplePage.tsx
@@ -1,7 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { Suspense, useEffect, useRef } from 'react';
 import { currentExampleAtom } from '../utils/examples/currentExampleAtom.ts';
-import { examples } from '../examples/exampleContent.ts';
+import { common, examples } from '../examples/exampleContent.ts';
 import { ExampleNotFound } from './ExampleNotFound.tsx';
 import { ExampleView } from './ExampleView.tsx';
 
@@ -68,7 +68,11 @@ function ExamplePage() {
 
     if (currentExample in examples) {
       return (
-        <ExampleView key={currentExample} example={examples[currentExample]} />
+        <ExampleView
+          key={currentExample}
+          example={examples[currentExample]}
+          common={common}
+        />
       );
     }
 
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index bc3611bdcc..72aaf91d74 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -10,7 +10,11 @@ import { ExecutionCancelledError } from '../utils/examples/errors.ts';
 import { exampleControlsAtom } from '../utils/examples/exampleControlAtom.ts';
 import { executeExample } from '../utils/examples/exampleRunner.ts';
 import type { ExampleState } from '../utils/examples/exampleState.ts';
-import type { Example } from '../utils/examples/types.ts';
+import type {
+  Example,
+  ExampleCommonFile,
+  ExampleSrcFile,
+} from '../utils/examples/types.ts';
 import { isGPUSupported } from '../utils/isGPUSupported.ts';
 import { HtmlCodeEditor, TsCodeEditor } from './CodeEditor.tsx';
 import { ControlPanel } from './ControlPanel.tsx';
@@ -20,6 +24,7 @@ import { openInStackBlitz } from './stackblitz/openInStackBlitz.ts';
 
 type Props = {
   example: Example;
+  common: ExampleCommonFile[];
   isPlayground?: boolean;
 };
 
@@ -66,8 +71,8 @@ function useExample(
   }, [setSnackbarText, setExampleControlParams]);
 }
 
-export function ExampleView({ example }: Props) {
-  const { tsFiles, tsImport, htmlFile } = example;
+export function ExampleView({ example, common }: Props) {
+  const { tsFiles: srcFiles, tsImport, htmlFile } = example;
 
   const [snackbarText, setSnackbarText] = useAtom(currentSnackbarAtom);
   const [currentFilePath, setCurrentFilePath] = useState<string>('index.ts');
@@ -76,6 +81,7 @@ export function ExampleView({ example }: Props) {
   const codeEditorMobileShowing = useAtomValue(codeEditorShownMobileAtom);
   const exampleHtmlRef = useRef<HTMLDivElement>(null);
 
+  const tsFiles = filterRelevantTsFiles(srcFiles, common);
   const filePaths = tsFiles.map((file) => file.path);
   const editorTabsList = [
     'index.ts',
@@ -171,7 +177,7 @@ export function ExampleView({ example }: Props) {
                 </div>
 
                 <div className='absolute right-0 z-5 md:top-15 md:right-8'>
-                  <Button onClick={() => openInStackBlitz(example)}>
+                  <Button onClick={() => openInStackBlitz(example, common)}>
                     <span className='font-bold'>Edit on</span>
                     <img
                       src='https://developer.stackblitz.com/img/logo/stackblitz-logo-black_blue.svg'
@@ -290,3 +296,27 @@ function useResizableCanvas(exampleHtmlRef: RefObject<HTMLDivElement | null>) {
     };
   }, [exampleHtmlRef]);
 }
+
+/**
+ * NOTE: this function only filters common files used in src files.
+ * Common files used in other common files will not be included.
+ */
+function filterRelevantTsFiles(
+  srcFiles: ExampleSrcFile[],
+  commonFiles: ExampleCommonFile[],
+) {
+  const tsFiles: (ExampleSrcFile | ExampleCommonFile)[] = [
+    ...srcFiles,
+  ];
+
+  for (const common of commonFiles) {
+    for (const src of srcFiles) {
+      if (src.content.includes(`common/${common.path}`)) {
+        tsFiles.push(common);
+        break;
+      }
+    }
+  }
+
+  return tsFiles;
+}
diff --git a/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts b/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts
index f2601780c7..8d32b0742b 100644
--- a/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts
+++ b/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts
@@ -19,7 +19,7 @@ import pnpmWorkspace from '../../../../../pnpm-workspace.yaml?raw';
 import typegpuDocsPackageJson from '../../../package.json' with {
   type: 'json',
 };
-import type { Example } from '../../utils/examples/types.ts';
+import type { Example, ExampleCommonFile } from '../../utils/examples/types.ts';
 // biome-ignore lint/correctness/useImportExtensions: dude it's there
 import index from './stackBlitzIndex.ts?raw';
 
@@ -51,17 +51,29 @@ if (pnpmWorkspaceYaml instanceof type.errors) {
   throw new Error(pnpmWorkspaceYaml.summary);
 }
 
-export const openInStackBlitz = (example: Example) => {
-  const tsFiles = example.tsFiles.reduce(
-    (acc, file) => {
-      acc[`src/${file.path}`] = file.content.replaceAll(
-        '/TypeGPU',
-        'https://docs.swmansion.com/TypeGPU',
-      );
-      return acc;
-    },
-    {} as Record<string, string>,
-  );
+export const openInStackBlitz = (
+  example: Example,
+  common: ExampleCommonFile[],
+) => {
+  const tsFiles: Record<string, string> = {};
+
+  for (const file of example.tsFiles) {
+    tsFiles[`src/${file.path}`] = file.content;
+  }
+  for (const file of common) {
+    tsFiles[`src/common/${file.path}`] = file.content;
+  }
+
+  for (const key of Object.keys(tsFiles)) {
+    const content = tsFiles[key];
+    tsFiles[key] = content.replaceAll(
+      '/TypeGPU',
+      'https://docs.swmansion.com/TypeGPU',
+    ).replaceAll(
+      '../../common',
+      './common',
+    );
+  }
 
   StackBlitzSDK.openProject(
     {
diff --git a/apps/typegpu-docs/src/examples/rendering/phong-reflection/setup-orbit-camera.ts b/apps/typegpu-docs/src/examples/common/setup-orbit-camera.ts
similarity index 100%
rename from apps/typegpu-docs/src/examples/rendering/phong-reflection/setup-orbit-camera.ts
rename to apps/typegpu-docs/src/examples/common/setup-orbit-camera.ts
diff --git a/apps/typegpu-docs/src/examples/exampleContent.ts b/apps/typegpu-docs/src/examples/exampleContent.ts
index 058dc998ba..2eff97af3e 100644
--- a/apps/typegpu-docs/src/examples/exampleContent.ts
+++ b/apps/typegpu-docs/src/examples/exampleContent.ts
@@ -2,6 +2,7 @@ import pathe from 'pathe';
 import * as R from 'remeda';
 import type {
   Example,
+  ExampleCommonFile,
   ExampleMetadata,
   ExampleSrcFile,
   ThumbnailPair,
@@ -75,8 +76,9 @@ const metaFiles = R.pipe(
   R.mapKeys(pathToExampleKey),
 );
 
-const readonlyTsFiles = R.pipe(
-  import.meta.glob('./**/*.ts', {
+const exampleTsFiles = R.pipe(
+  // './<category>/<example>/<file>.ts'
+  import.meta.glob('./*/*/*.ts', {
     query: 'raw',
     eager: true,
     import: 'default',
@@ -127,7 +129,7 @@ export const examples = R.pipe(
     ({
       key,
       metadata: value,
-      tsFiles: readonlyTsFiles[key] ?? [],
+      tsFiles: exampleTsFiles[key] ?? [],
       tsImport: () => noCacheImport(tsFilesImportFunctions[key]),
       htmlFile: htmlFiles[key]?.[0] ?? '',
       thumbnails: thumbnailFiles[key],
@@ -140,4 +142,18 @@ export const examplesByCategory = R.groupBy(
   (example) => example.metadata.category,
 );
 
+export const common = R.pipe(
+  import.meta.glob('./common/*.ts', {
+    query: 'raw',
+    eager: true,
+    import: 'default',
+  }) as Record<string, string>,
+  R.mapValues((content: string, key: string): ExampleCommonFile => ({
+    common: true,
+    path: pathe.basename(key),
+    content,
+  })),
+  R.values(),
+);
+
 export const PLAYGROUND_KEY = 'playground__';
diff --git a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts
index fc98284da1..3fe4c55e94 100644
--- a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts
@@ -9,7 +9,7 @@ import {
   ModelVertexOutput,
 } from './schemas.ts';
 import { loadModel } from './load-model.ts';
-import { Camera, setupOrbitCamera } from './setup-orbit-camera.ts';
+import { Camera, setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 
 // setup
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -46,7 +46,7 @@ const exampleControlsUniform = root.createUniform(
   p.initialControls,
 );
 
-export const vertexShader = tgpu['~unstable'].vertexFn({
+const vertexShader = tgpu['~unstable'].vertexFn({
   in: { ...ModelVertexInput.propTypes, instanceIndex: d.builtin.instanceIndex },
   out: ModelVertexOutput,
 })((input) => {
@@ -63,7 +63,7 @@ export const vertexShader = tgpu['~unstable'].vertexFn({
 });
 
 // see https://gist.github.com/chicio/d983fff6ff304bd55bebd6ff05a2f9dd
-export const fragmentShader = tgpu['~unstable'].fragmentFn({
+const fragmentShader = tgpu['~unstable'].fragmentFn({
   in: ModelVertexOutput,
   out: d.vec4f,
 })((input) => {
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/index.ts b/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
index 51c6d72777..0bbb4584e3 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
@@ -39,7 +39,7 @@ import {
   Time,
   timeAccess,
 } from './schemas.ts';
-import { Camera, setupOrbitCamera } from './setup-orbit-camera.ts';
+import { Camera, setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/schemas.ts b/apps/typegpu-docs/src/examples/simulation/gravity/schemas.ts
index 3b3c444a88..323d1fc596 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/schemas.ts
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/schemas.ts
@@ -1,6 +1,6 @@
 import tgpu, { type TgpuSampler } from 'typegpu';
 import * as d from 'typegpu/data';
-import { Camera } from './setup-orbit-camera.ts';
+import { Camera } from '../../common/setup-orbit-camera.ts';
 
 export type CelestialBody = d.Infer<typeof CelestialBody>;
 export const CelestialBody = d.struct({
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/setup-orbit-camera.ts b/apps/typegpu-docs/src/examples/simulation/gravity/setup-orbit-camera.ts
deleted file mode 100644
index 39b376d4cd..0000000000
--- a/apps/typegpu-docs/src/examples/simulation/gravity/setup-orbit-camera.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import * as m from 'wgpu-matrix';
-import * as d from 'typegpu/data';
-import * as std from 'typegpu/std';
-
-export const Camera = d.struct({
-  position: d.vec4f,
-  targetPos: d.vec4f,
-  view: d.mat4x4f,
-  projection: d.mat4x4f,
-});
-
-export interface CameraOptions {
-  initPos: d.v4f;
-  target?: d.v4f;
-  minZoom?: number;
-  maxZoom?: number;
-  invertCamera?: boolean;
-}
-
-const cameraDefaults: Partial<CameraOptions> = {
-  target: d.vec4f(0, 0, 0, 1),
-  minZoom: 1,
-  maxZoom: 100,
-  invertCamera: false,
-};
-
-/**
- * Sets up an orbit camera.
- * Calls the callback on scroll events, canvas clicks/touches and resizes.
- * Also, calls the callback during the setup with an initial camera.
- */
-export function setupOrbitCamera(
-  canvas: HTMLCanvasElement,
-  partialOptions: CameraOptions,
-  callback: (updatedProps: Partial<d.Infer<typeof Camera>>) => void,
-) {
-  const options = { ...cameraDefaults, ...partialOptions } as Required<
-    CameraOptions
-  >;
-
-  // orbit variables storing the current camera position
-  const cameraState = {
-    target: d.vec4f(),
-    radius: 0,
-    pitch: 0,
-    yaw: 0,
-  };
-
-  // initialize the camera
-  targetCamera(options.initPos, options.target);
-
-  function targetCamera(newPos: d.v4f, newTarget?: d.v4f) {
-    const tgt = newTarget ?? cameraState.target;
-    const cameraVector = newPos.sub(tgt);
-    cameraState.radius = std.length(cameraVector);
-    cameraState.yaw = Math.atan2(cameraVector.x, cameraVector.z);
-    cameraState.pitch = Math.asin(cameraVector.y / cameraState.radius);
-    cameraState.target = tgt;
-
-    callback(Camera({
-      position: newPos,
-      targetPos: cameraState.target,
-      view: calculateView(newPos, cameraState.target),
-      projection: calculateProj(canvas.clientWidth / canvas.clientHeight),
-    }));
-  }
-
-  function rotateCamera(dx: number, dy: number) {
-    const orbitSensitivity = 0.005;
-    cameraState.yaw += -dx * orbitSensitivity * (options.invertCamera ? -1 : 1);
-    cameraState.pitch += dy * orbitSensitivity *
-      (options.invertCamera ? -1 : 1);
-    cameraState.pitch = std.clamp(
-      cameraState.pitch,
-      -Math.PI / 2 + 0.01,
-      Math.PI / 2 - 0.01,
-    );
-
-    const newCameraPos = calculatePos(
-      cameraState.target,
-      cameraState.radius,
-      cameraState.pitch,
-      cameraState.yaw,
-    );
-
-    callback({
-      view: calculateView(newCameraPos, cameraState.target),
-      position: newCameraPos,
-    });
-  }
-
-  function zoomCamera(delta: number) {
-    cameraState.radius += delta * 0.05;
-    cameraState.radius = std.clamp(
-      cameraState.radius,
-      options.minZoom,
-      options.maxZoom,
-    );
-
-    const newPos = calculatePos(
-      cameraState.target,
-      cameraState.radius,
-      cameraState.pitch,
-      cameraState.yaw,
-    );
-    const newView = calculateView(newPos, cameraState.target);
-
-    callback({ view: newView, position: newPos });
-  }
-
-  // resize observer
-  const resizeObserver = new ResizeObserver(() => {
-    const projection = calculateProj(canvas.clientWidth / canvas.clientHeight);
-    callback({ projection });
-  });
-  resizeObserver.observe(canvas);
-
-  // Variables for mouse/touch interaction.
-  let isDragging = false;
-  let prevX = 0;
-  let prevY = 0;
-
-  // mouse/touch events
-  canvas.addEventListener('wheel', (event: WheelEvent) => {
-    event.preventDefault();
-    zoomCamera(event.deltaY);
-  }, { passive: false });
-
-  canvas.addEventListener('mousedown', (event) => {
-    isDragging = true;
-    prevX = event.clientX;
-    prevY = event.clientY;
-  });
-
-  canvas.addEventListener('touchstart', (event) => {
-    event.preventDefault();
-    if (event.touches.length === 1) {
-      isDragging = true;
-      prevX = event.touches[0].clientX;
-      prevY = event.touches[0].clientY;
-    }
-  }, { passive: false });
-
-  const mouseUpEventListener = () => {
-    isDragging = false;
-  };
-  window.addEventListener('mouseup', mouseUpEventListener);
-
-  const touchEndEventListener = () => {
-    isDragging = false;
-  };
-  window.addEventListener('touchend', touchEndEventListener);
-
-  const mouseMoveEventListener = (event: MouseEvent) => {
-    const dx = event.clientX - prevX;
-    const dy = event.clientY - prevY;
-    prevX = event.clientX;
-    prevY = event.clientY;
-
-    if (isDragging) {
-      rotateCamera(dx, dy);
-    }
-  };
-  window.addEventListener('mousemove', mouseMoveEventListener);
-
-  const touchMoveEventListener = (event: TouchEvent) => {
-    if (isDragging && event.touches.length === 1) {
-      event.preventDefault();
-      const dx = event.touches[0].clientX - prevX;
-      const dy = event.touches[0].clientY - prevY;
-      prevX = event.touches[0].clientX;
-      prevY = event.touches[0].clientY;
-
-      rotateCamera(dx, dy);
-    }
-  };
-  window.addEventListener('touchmove', touchMoveEventListener, {
-    passive: false,
-  });
-
-  function cleanupCamera() {
-    window.removeEventListener('mouseup', mouseUpEventListener);
-    window.removeEventListener('mousemove', mouseMoveEventListener);
-    window.removeEventListener('touchmove', touchMoveEventListener);
-    window.removeEventListener('touchend', touchEndEventListener);
-    resizeObserver.unobserve(canvas);
-  }
-
-  return { cleanupCamera, targetCamera };
-}
-
-function calculatePos(
-  target: d.v4f,
-  radius: number,
-  pitch: number,
-  yaw: number,
-) {
-  const newX = radius * Math.sin(yaw) * Math.cos(pitch);
-  const newY = radius * Math.sin(pitch);
-  const newZ = radius * Math.cos(yaw) * Math.cos(pitch);
-  const displacement = d.vec4f(newX, newY, newZ, 0);
-  return target.add(displacement);
-}
-
-function calculateView(position: d.v4f, target: d.v4f) {
-  return m.mat4.lookAt(
-    position,
-    target,
-    d.vec3f(0, 1, 0),
-    d.mat4x4f(),
-  );
-}
-
-function calculateProj(aspectRatio: number) {
-  return m.mat4.perspective(Math.PI / 4, aspectRatio, 0.1, 1000, d.mat4x4f());
-}
diff --git a/apps/typegpu-docs/src/utils/examples/types.ts b/apps/typegpu-docs/src/utils/examples/types.ts
index 6c92bfc2bc..70338722a0 100644
--- a/apps/typegpu-docs/src/utils/examples/types.ts
+++ b/apps/typegpu-docs/src/utils/examples/types.ts
@@ -21,6 +21,18 @@ export const exampleCategories = [
 
 export type ExampleSrcFile = {
   exampleKey: string;
+  /**
+   * The relative path, for example 'index.ts'
+   */
+  path: string;
+  content: string;
+};
+
+export type ExampleCommonFile = {
+  common: true;
+  /**
+   * The relative path, for example 'helper.ts'
+   */
   path: string;
   content: string;
 };