From 9e9e3902d65d2a97f6132ce9aeb9cd01e5b54da1 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 2 Oct 2026 13:44:52 +0200
Subject: [PATCH 01/12] feat: common.attachAutoResizer

---
 .../src/components/ExampleView.tsx            |  90 +---------
 .../landing-examples/HoverExampleLive.tsx     |  19 ++-
 .../components/stackblitz/stackBlitzIndex.ts  |  46 ------
 .../algorithms/genetic-racing/index.html      |   2 +-
 .../algorithms/genetic-racing/index.ts        |   6 +
 .../algorithms/jump-flood-distance/index.html |   2 +-
 .../algorithms/jump-flood-distance/index.ts   |  20 +--
 .../algorithms/jump-flood-voronoi/index.html  |   2 +-
 .../algorithms/jump-flood-voronoi/index.ts    |  18 +-
 .../algorithms/mnist-inference/index.html     |   6 +-
 .../algorithms/mnist-inference/index.ts       |   5 +-
 .../src/examples/algorithms/sort/index.html   |   2 +-
 .../src/examples/algorithms/sort/index.ts     |  19 ++-
 .../src/examples/geometry/circles/index.html  |   2 +-
 .../src/examples/geometry/circles/index.ts    |  24 ++-
 .../geometry/lines-combinations/index.html    |   2 +-
 .../geometry/lines-combinations/index.ts      |  19 ++-
 .../image-processing/ascii-filter/index.html  |   2 +-
 .../image-processing/ascii-filter/index.ts    |  47 ++++--
 .../background-segmentation/index.html        |   2 +-
 .../background-segmentation/index.ts          |  51 ++++--
 .../examples/image-processing/blur/index.html |   2 +-
 .../examples/image-processing/blur/index.ts   |  13 +-
 .../camera-thresholding/index.html            |   2 +-
 .../camera-thresholding/index.ts              |  41 +++--
 .../image-processing/chroma-keying/index.html |   2 +-
 .../image-processing/chroma-keying/index.ts   |  42 +++--
 .../image-processing/image-tuning/index.html  |   2 +-
 .../image-processing/image-tuning/index.ts    |  15 +-
 .../selfie-segmentation/index.html            |  22 +--
 .../selfie-segmentation/index.ts              |  13 +-
 .../react/shifting-gradient/index.tsx         |   2 +-
 .../react/spinning-triangle/index.tsx         |   2 +-
 .../src/examples/rendering/3d-fish/index.html |   2 +-
 .../src/examples/rendering/3d-fish/index.ts   |  11 +-
 .../src/examples/rendering/3d-fish/scene.ts   |  75 +++++----
 .../rendering/box-raytracing/index.html       |   2 +-
 .../rendering/box-raytracing/index.ts         |  21 ++-
 .../examples/rendering/caustics/index.html    |   2 +-
 .../src/examples/rendering/caustics/index.ts  |  15 +-
 .../src/examples/rendering/caustics/scene.ts  |  16 +-
 .../src/examples/rendering/clouds/index.html  |   2 +-
 .../src/examples/rendering/clouds/index.ts    |  51 +++---
 .../rendering/cubemap-reflection/index.html   |   2 +-
 .../rendering/cubemap-reflection/index.ts     |  11 +-
 .../rendering/cubemap-reflection/scene.ts     |  31 ++--
 .../src/examples/rendering/disco/index.html   |   2 +-
 .../src/examples/rendering/disco/index.ts     |  30 +++-
 .../rendering/function-visualizer/index.html  |   2 +-
 .../rendering/function-visualizer/index.ts    |  32 ++--
 .../rendering/jelly-slider/index.html         |   2 +-
 .../examples/rendering/jelly-slider/index.ts  |  15 +-
 .../examples/rendering/jelly-slider/scene.ts  |  45 ++---
 .../rendering/jelly-switch/index.html         |   2 +-
 .../examples/rendering/jelly-switch/index.ts  |  46 ++++--
 .../examples/rendering/os-awards/index.html   |   2 +-
 .../src/examples/rendering/os-awards/index.ts |  18 +-
 .../rendering/os-awards/mesh/renderer.ts      |  12 +-
 .../rendering/perlin-noise/index.html         |   2 +-
 .../examples/rendering/perlin-noise/index.ts  |  26 ++-
 .../rendering/phong-reflection/index.html     |   2 +-
 .../rendering/phong-reflection/index.ts       |  37 +++--
 .../rendering/point-light-shadow/index.html   |   2 +-
 .../rendering/point-light-shadow/index.ts     |  67 ++++----
 .../src/examples/rendering/pom/index.html     |   2 +-
 .../src/examples/rendering/pom/index.ts       |  24 ++-
 .../drawInteraction.ts                        |  25 ++-
 .../radiance-cascades-drawing/index.html      |   2 +-
 .../radiance-cascades-drawing/index.ts        |  24 ++-
 .../rendering/radiance-cascades/index.html    |   2 +-
 .../rendering/radiance-cascades/index.ts      |  18 +-
 .../rendering/ray-marching/index.html         |   2 +-
 .../examples/rendering/ray-marching/index.ts  |  11 +-
 .../examples/rendering/ray-marching/scene.ts  |  13 +-
 .../rendering/render-bundles-with/index.html  |   2 +-
 .../rendering/render-bundles-with/index.ts    |  25 ++-
 .../rendering/render-bundles/index.html       |   2 +-
 .../rendering/render-bundles/index.ts         |  21 ++-
 .../rendering/simple-shadow/index.html        |   2 +-
 .../examples/rendering/simple-shadow/index.ts |  49 +++---
 .../rendering/smoky-triangle/index.html       |   2 +-
 .../rendering/smoky-triangle/index.ts         |  21 ++-
 .../examples/rendering/suika-sdf/index.html   |   2 +-
 .../src/examples/rendering/suika-sdf/index.ts |  62 ++++---
 .../examples/rendering/two-boxes/index.html   |   2 +-
 .../src/examples/rendering/two-boxes/index.ts |  20 ++-
 .../rendering/xor-dev-centrifuge-2/index.html |   2 +-
 .../rendering/xor-dev-centrifuge-2/index.ts   |   5 +-
 .../rendering/xor-dev-runner/index.html       |   2 +-
 .../rendering/xor-dev-runner/index.ts         |   8 +-
 .../examples/simple/gradient-tiles/index.html |   2 +-
 .../examples/simple/gradient-tiles/index.ts   |  13 +-
 .../examples/simple/liquid-glass/index.html   |   2 +-
 .../src/examples/simple/liquid-glass/index.ts |  23 ++-
 .../examples/simple/mesh-skinning/index.html  |   2 +-
 .../examples/simple/mesh-skinning/index.ts    |  17 +-
 .../src/examples/simple/oklab/index.html      |   6 +-
 .../src/examples/simple/oklab/index.ts        |  38 ++++-
 .../examples/simple/ripple-cube/index.html    |   2 +-
 .../src/examples/simple/ripple-cube/index.ts  |  55 ++++--
 .../simple/ripple-cube/post-processing.ts     | 156 ++++++++++++------
 .../src/examples/simple/square/index.html     |   2 +-
 .../src/examples/simple/square/index.ts       |  16 +-
 .../src/examples/simple/stencil/index.html    |   2 +-
 .../src/examples/simple/stencil/index.ts      |  49 +++---
 .../src/examples/simple/triangle/index.html   |   2 +-
 .../src/examples/simple/triangle/index.ts     |  30 +++-
 .../src/examples/simple/vaporrave/index.html  |   2 +-
 .../src/examples/simple/vaporrave/index.ts    |  11 +-
 .../src/examples/simple/vaporrave/scene.ts    |  17 +-
 .../src/examples/simulation/boids/index.html  |   2 +-
 .../src/examples/simulation/boids/index.ts    |  32 +++-
 .../examples/simulation/confetti/index.html   |   2 +-
 .../src/examples/simulation/confetti/index.ts |   5 +-
 .../fluid-double-buffering/index.html         |   2 +-
 .../fluid-double-buffering/index.ts           |  15 +-
 .../simulation/fluid-with-atomics/index.html  |   2 +-
 .../simulation/fluid-with-atomics/index.ts    |  13 ++
 .../simulation/game-of-life/index.html        |   2 +-
 .../examples/simulation/game-of-life/index.ts |  31 +++-
 .../examples/simulation/game-of-life/input.ts |  15 +-
 .../examples/simulation/gravity/index.html    |   2 +-
 .../src/examples/simulation/gravity/index.ts  |  23 +--
 .../simulation/slime-mold-3d/index.html       |   2 +-
 .../simulation/slime-mold-3d/index.ts         |  29 +++-
 .../examples/simulation/slime-mold/index.html |   2 +-
 .../examples/simulation/slime-mold/index.ts   |  31 +++-
 .../simulation/stable-fluid/index.html        |   2 +-
 .../examples/simulation/stable-fluid/index.ts | 108 +++++++-----
 .../examples/simulation/wind-map/index.html   |   2 +-
 .../src/examples/simulation/wind-map/index.ts |  15 +-
 .../tests/sdf-docs-examples/index.html        |   2 +-
 .../examples/tests/sdf-docs-examples/index.ts |   3 +
 .../src/examples/tests/uniformity/index.html  |   2 +-
 .../src/examples/tests/uniformity/index.ts    |  10 ++
 .../examples/threejs/attractors/index.html    |   2 +-
 .../examples/threejs/compute-cloth/index.html |   2 +-
 .../threejs/compute-geometry/index.html       |   2 +-
 .../threejs/compute-particles-snow/index.html |   2 +-
 .../threejs/compute-particles/index.html      |   2 +-
 .../src/examples/threejs/simple/index.html    |   2 +-
 .../threejs/test-reused-functions/index.html  |   2 +-
 .../src/examples/threejs/varyings/index.html  |   2 +-
 .../templates/template-vite-bare/src/main.ts  |  27 +--
 .../template-vite-complex/src/main.ts         |  28 +---
 .../typegpu/src/common/attachAutoResizer.ts   |  48 ++++++
 packages/typegpu/src/common/index.ts          |   5 +
 147 files changed, 1522 insertions(+), 882 deletions(-)
 create mode 100644 packages/typegpu/src/common/attachAutoResizer.ts

diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index 6c1264169a..bbc1843a06 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -1,14 +1,6 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import {
-  type RefObject,
-  Suspense,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-  lazy,
-} from 'react';
+import { Suspense, useEffect, useLayoutEffect, useRef, useState, lazy } from 'react';
 import { currentSnackbarAtom } from '../utils/examples/currentSnackbarAtom.ts';
 import { tsoverUsedAtom, exampleFullscreenAtom } from '../utils/examples/exampleViewStateAtoms.ts';
 import { ExecutionCancelledError } from '../utils/examples/errors.ts';
@@ -131,7 +123,6 @@ export function ExampleView({ example, common }: Props) {
   }, [fullscreen, setFullscreen]);
 
   const isLoading = useExample(tsImport, setSnackbarText);
-  useResizableCanvas(exampleHtmlRef);
 
   return (
     <>
@@ -348,85 +339,6 @@ function GPUUnsupportedPanel() {
   );
 }
 
-function useResizableCanvas(exampleHtmlRef: RefObject<HTMLDivElement | null>) {
-  useEffect(() => {
-    const canvases = exampleHtmlRef.current?.querySelectorAll('canvas') as
-      | HTMLCanvasElement[]
-      | undefined;
-    const observers: ResizeObserver[] = [];
-
-    for (const canvas of canvases ?? []) {
-      if ('width' in canvas.attributes || 'height' in canvas.attributes) {
-        continue;
-      }
-
-      const newCanvas = document.createElement('canvas');
-      const container = document.createElement('div');
-      const frame = document.createElement('div');
-
-      frame.appendChild(newCanvas);
-      container.appendChild(frame);
-
-      container.className = 'flex flex-1 justify-center items-center w-full h-full md:w-auto';
-      container.style.containerType = 'size';
-
-      frame.className = 'relative';
-
-      if (canvas.dataset.fitToContainer !== undefined) {
-        frame.style.width = '100%';
-        frame.style.height = '100%';
-      } else {
-        const aspectRatio = canvas.dataset.aspectRatio ?? '1';
-        frame.style.aspectRatio = aspectRatio;
-        frame.style.height = `min(100cqh, calc(100cqw/(${aspectRatio})))`;
-      }
-
-      for (const prop of canvas.style) {
-        // @ts-expect-error
-        newCanvas.style[prop] = canvas.style[prop];
-      }
-      for (const attribute of canvas.attributes) {
-        // @ts-expect-error
-        newCanvas[attribute.name] = attribute.value;
-      }
-      newCanvas.className = 'absolute w-full h-full';
-
-      canvas.parentElement?.replaceChild(container, canvas);
-
-      const onResize: ResizeObserverCallback = ([entry]) => {
-        if (!entry) {
-          return;
-        }
-
-        // Despite what the types say this property does not exist in Safari (hence the optional chaining).
-        const dpcb = entry.devicePixelContentBoxSize?.[0] as ResizeObserverSize | undefined;
-
-        const dpr = dpcb ? 1 : window.devicePixelRatio || 1;
-        const box =
-          dpcb ??
-          (Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize);
-
-        if (!box) {
-          return;
-        }
-
-        newCanvas.width = Math.round(box.inlineSize * dpr);
-        newCanvas.height = Math.round(box.blockSize * dpr);
-      };
-
-      const observer = new ResizeObserver(onResize);
-      observer.observe(newCanvas);
-      observers.push(observer);
-    }
-
-    return () => {
-      for (const observer of observers) {
-        observer.disconnect();
-      }
-    };
-  }, [exampleHtmlRef]);
-}
-
 /**
  * NOTE: this function only filters common files used in src files.
  * Common files used in other common files will not be included.
diff --git a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
index bc39d9887d..734e30ad6e 100644
--- a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
+++ b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
@@ -1,8 +1,9 @@
-import type { TgpuRoot } from 'typegpu';
+import { common, type TgpuRoot } from 'typegpu';
 import { useConfigureContext, useRoot } from '@typegpu/react';
 import { useEffect, useState } from 'react';
 
 interface ExampleState {
+  onResize?(): void;
   onCleanup(): void;
 }
 
@@ -14,6 +15,9 @@ export default function HoverExampleLive({ setup }: HoverExampleLiveProps) {
   const root = useRoot();
   const { ctxRef, ref: canvasRef } = useConfigureContext({
     alphaMode: 'premultiplied',
+    // Resizing is handled by `common.attachAutoResizer` below, so that the
+    // example can react to the new size.
+    autoResize: false,
   });
   const [isActive, setIsActive] = useState(false);
   const [error, setError] = useState<unknown>(null);
@@ -39,8 +43,19 @@ export default function HoverExampleLive({ setup }: HoverExampleLiveProps) {
       if (cancelled) return;
 
       try {
+        const canvas = ctxRef.current.canvas as HTMLCanvasElement;
         const example = await setup(root, ctxRef.current);
-        onCleanup = () => example.onCleanup();
+        const autoResizer = common.attachAutoResizer({
+          root,
+          canvas,
+          onResize() {
+            example.onResize?.();
+          },
+        });
+        onCleanup = () => {
+          autoResizer.detach();
+          example.onCleanup();
+        };
 
         if (cancelled) {
           onCleanup();
diff --git a/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts b/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts
index c707a4371a..b5abd8329e 100644
--- a/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts
+++ b/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts
@@ -10,52 +10,6 @@ body.style.margin = '0';
 body.style.boxSizing = 'border-box';
 body.style.padding = '1rem';
 
-// Resize canvases
-for (const canvas of document.querySelectorAll('canvas')) {
-  if ('width' in canvas.attributes || 'height' in canvas.attributes) {
-    continue; // custom canvas, not replacing with resizable
-  }
-
-  const container = document.createElement('div');
-  const frame = document.createElement('div');
-
-  canvas.parentElement?.replaceChild(container, canvas);
-
-  frame.appendChild(canvas);
-  container.appendChild(frame);
-
-  container.style.display = 'flex';
-  container.style.flex = '1';
-  container.style.justifyContent = 'center';
-  container.style.alignItems = 'top';
-  container.style.width = '100%';
-
-  container.style.containerType = 'size';
-
-  frame.style.position = 'relative';
-
-  if (canvas.dataset.fitToContainer !== undefined) {
-    frame.style.width = '100%';
-    frame.style.height = '100%';
-  } else {
-    const aspectRatio = canvas.dataset.aspectRatio ?? '1';
-    frame.style.aspectRatio = aspectRatio;
-    frame.style.height = `min(calc(min(100cqw, 100cqh)/(${aspectRatio})), min(100cqw, 100cqh))`;
-  }
-
-  canvas.style.position = 'absolute';
-  canvas.style.width = '100%';
-  canvas.style.height = '100%';
-
-  const onResize = () => {
-    canvas.width = frame.clientWidth * window.devicePixelRatio;
-    canvas.height = frame.clientHeight * window.devicePixelRatio;
-  };
-
-  onResize();
-  new ResizeObserver(onResize).observe(container);
-}
-
 const controlsPanel = document.createElement('div');
 controlsPanel.style.display = 'grid';
 controlsPanel.style.gridTemplateColumns = '1fr 1fr';
diff --git a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
index c732f96f62..60b1adde94 100644
--- a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
@@ -1,4 +1,4 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 <div class="stats"></div>
 <style>
   .stats {
diff --git a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts
index c4c1857180..df441af3cc 100644
--- a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts
@@ -550,6 +550,11 @@ applyGridSize(...GRID_SIZES[gridSizeKey]);
 applyTrack(generateGridTrack(trackSeed, ...GRID_SIZES[gridSizeKey]));
 startSimulation();
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -623,6 +628,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(rafHandle);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
index ebba4d5f20..071b7e80ab 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
@@ -342,8 +342,6 @@ function recreateResources() {
   sourceIdx = 0;
 }
 
-clearCanvas();
-
 function getTouchPosition(rect: DOMRect, touches: TouchList) {
   if (touches.length === 2) {
     return {
@@ -357,17 +355,16 @@ function getTouchPosition(rect: DOMRect, touches: TouchList) {
   };
 }
 
-// #region Example controls & Cleanup
-
-let resizeTimeout: ReturnType<typeof setTimeout>;
-const resizeObserver = new ResizeObserver(() => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(() => {
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
     recreateResources();
     clearCanvas();
-  }, 100);
+  },
 });
-resizeObserver.observe(canvas);
+
+// #region Example controls & Cleanup
 
 const onMouseDown = (e: MouseEvent) => {
   if (e.button !== 0 && e.button !== 2) {
@@ -475,8 +472,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
-  clearTimeout(resizeTimeout);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts
index b435b73a5d..221b18b61e 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts
@@ -241,17 +241,16 @@ function reset() {
 
 reset();
 
-// #region Example controls & Cleanup
-
-let resizeTimeout: ReturnType<typeof setTimeout>;
-const resizeObserver = new ResizeObserver(() => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(() => {
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
     recreateResources();
     reset();
-  }, 100);
+  },
 });
-resizeObserver.observe(canvas);
+
+// #region Example controls & Cleanup
 
 export const controls = defineControls({
   'Run Algorithm': {
@@ -295,8 +294,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
-  clearTimeout(resizeTimeout);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
index 4dd50692e9..92f10d8661 100644
--- a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
@@ -1,6 +1,6 @@
 <div class="loading">🤖 Downloading the model...</div>
-<div class="example">
-  <canvas></canvas>
+<div class="example gap-4 flex-col md:flex-row">
+  <canvas class="w-80 h-80" />
   <div class="predictions-container">
     <div class="bars-container">
       <div class="bar">O</div>
@@ -37,7 +37,7 @@
   }
 
   .loading.loaded ~ .example {
-    display: contents;
+    display: flex;
   }
 
   .predictions-container {
diff --git a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts
index 527f131a2d..d7ff23f45e 100644
--- a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import type { LayerData, Network } from './data.ts';
 import { downloadLayers } from './helpers.ts';
 import { defineControls } from '../../common/defineControls.ts';
@@ -281,6 +281,8 @@ precisionEl.className = hasShaderF16 ? 'enabled' : 'disabled';
 
 run();
 
+const autoResizer = common.attachAutoResizer({ root, canvas });
+
 canvas.addEventListener('mousedown', () => {
   uiState.isDrawing = true;
 });
@@ -428,6 +430,7 @@ export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
   window.removeEventListener('mouseup', mouseUpEventListener);
   window.removeEventListener('touchend', touchEndEventListener);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/algorithms/sort/index.html b/apps/typegpu-docs/src/examples/algorithms/sort/index.html
index 65c5005787..b3805f0cfc 100644
--- a/apps/typegpu-docs/src/examples/algorithms/sort/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/sort/index.html
@@ -1,4 +1,4 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
 <div id="sort-overlay" hidden>
   <div id="sort-spinner"></div>
   <span id="sort-status"></span>
diff --git a/apps/typegpu-docs/src/examples/algorithms/sort/index.ts b/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
index 2b5b3a5257..55e9408cbf 100644
--- a/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std, type TgpuCommandEncoder, type TgpuQuerySet } from 'typegpu';
+import { tgpu, common, d, std, type TgpuCommandEncoder, type TgpuQuerySet } from 'typegpu';
 import {
   createBitonicSorter,
   createRadixSorter,
@@ -8,7 +8,6 @@ import {
   sortKey,
 } from '@typegpu/algorithm';
 import { randf } from '@typegpu/noise';
-import { fullScreenTriangle } from 'typegpu/common';
 import { defineControls } from '../../common/defineControls.ts';
 
 const maxBufferSize = await navigator.gpu.requestAdapter().then((adapter) => {
@@ -35,8 +34,6 @@ const querySet = root.enabledFeatures.has('timestamp-query')
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
 const maxSide = Math.floor(Math.sqrt(maxBufferSize / 4));
 const minLog = 2;
 const maxLog = Math.floor(Math.log2(maxSide));
@@ -134,9 +131,8 @@ const initKernel = tgpu.computeFn({
 });
 
 const renderPipeline = root.createRenderPipeline({
-  vertex: fullScreenTriangle,
+  vertex: common.fullScreenTriangle,
   fragment: fragmentFn,
-  targets: { format: presentationFormat },
 });
 
 const initPipeline = root.createComputePipeline({ compute: initKernel });
@@ -194,6 +190,16 @@ function generateRandomArray() {
   encoder.submit();
 }
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    const encoder = root['~unstable'].createCommandEncoder();
+    render(encoder);
+    encoder.submit();
+  },
+});
+
 const overlay = document.getElementById('sort-overlay') as HTMLDivElement;
 const spinnerEl = document.getElementById('sort-spinner') as HTMLDivElement;
 const statusEl = document.getElementById('sort-status') as HTMLSpanElement;
@@ -403,6 +409,7 @@ export function onCleanup() {
   }
   sorter.destroy();
   querySet?.destroy();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/geometry/circles/index.html b/apps/typegpu-docs/src/examples/geometry/circles/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/geometry/circles/index.html
+++ b/apps/typegpu-docs/src/examples/geometry/circles/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/geometry/circles/index.ts b/apps/typegpu-docs/src/examples/geometry/circles/index.ts
index 1428c861b5..a4078fa74d 100644
--- a/apps/typegpu-docs/src/examples/geometry/circles/index.ts
+++ b/apps/typegpu-docs/src/examples/geometry/circles/index.ts
@@ -1,5 +1,5 @@
 import { circle, circleVertexCount } from '@typegpu/geometry';
-import { tgpu, d, std as s } from 'typegpu';
+import { tgpu, common, d, std as s } from 'typegpu';
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 const canvas = document.querySelector('canvas');
@@ -45,8 +45,6 @@ const createDepthAndMsaaTextures = () => {
 };
 
 createDepthAndMsaaTextures();
-const resizeObserver = new ResizeObserver(createDepthAndMsaaTextures);
-resizeObserver.observe(canvas);
 
 // const Uniforms = d.struct({});
 
@@ -128,7 +126,7 @@ const pipeline = root.createRenderPipeline({
   multisample: { count: multisample ? 4 : 1 },
 });
 
-setTimeout(() => {
+const render = () => {
   pipeline
     .with(uniformsBindGroup)
     .withColorAttachment({
@@ -146,11 +144,27 @@ setTimeout(() => {
       console.log((Number(b - a) * 1e-6).toFixed(3), 'ms');
     })
     .draw(circleVertexCount(4), circleCount);
-}, 100);
+};
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    createDepthAndMsaaTextures();
+
+    render();
+  },
+});
 
 // #region Example controls & Cleanup
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
+++ b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts
index dcf98fdfca..38c071feaa 100644
--- a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts
+++ b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts
@@ -10,7 +10,7 @@ import {
   startCapSlot,
   arrowCapParamsSlot,
 } from '@typegpu/geometry';
-import { tgpu, type ColorAttachment } from 'typegpu';
+import { tgpu, common, type ColorAttachment } from 'typegpu';
 import {
   arrayOf,
   builtin,
@@ -73,8 +73,6 @@ const createDepthAndMsaaTextures = () => {
 };
 
 createDepthAndMsaaTextures();
-const resizeObserver = new ResizeObserver(createDepthAndMsaaTextures);
-resizeObserver.observe(canvas);
 
 const Uniforms = struct({
   time: f32,
@@ -409,6 +407,20 @@ const runAnimationFrame = (timeMs: number) => {
 };
 runAnimationFrame(0);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    createDepthAndMsaaTextures();
+    draw(time);
+  },
+});
+
 const fillOptions = {
   none: 0,
   solid: 1,
@@ -505,6 +517,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
   cancelAnimationFrame(frameId);
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
index 25ee8e0719..616ed0b443 100644
--- a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
@@ -2,7 +2,7 @@
   <div class="spinner">Loading...</div>
 </div>
 
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts
index 0b4b6db242..f8d5e3690b 100644
--- a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts
@@ -53,6 +53,24 @@ const spinner = document.querySelector('.spinner-background') as HTMLDivElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 canvas.parentElement?.appendChild(video);
 
+let frameSize: { width: number; height: number } | undefined;
+function handleResize() {
+  if (!frameSize) {
+    return;
+  }
+
+  const domAspectRatio = canvas.clientWidth / canvas.clientHeight;
+  const targetAspectRatio = frameSize.width / frameSize.height;
+
+  if (targetAspectRatio > domAspectRatio) {
+    // the surface is wider than the container
+    canvas.height = canvas.width / targetAspectRatio;
+  } else {
+    // the surface is taller than the container
+    canvas.width = canvas.height * targetAspectRatio;
+  }
+}
+
 const pipeline = root.createRenderPipeline({
   vertex: common.fullScreenTriangle,
   /**
@@ -172,7 +190,6 @@ let bindGroup:
   | undefined;
 
 let videoFrameCallbackId: number | undefined;
-let lastFrameSize: { width: number; height: number } | undefined;
 
 function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   if (video.readyState < 2) {
@@ -183,14 +200,9 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   const frameWidth = metadata.width;
   const frameHeight = metadata.height;
 
-  if (
-    !lastFrameSize ||
-    lastFrameSize.width !== frameWidth ||
-    lastFrameSize.height !== frameHeight
-  ) {
-    lastFrameSize = { width: frameWidth, height: frameHeight };
-
-    updateVideoDisplay(frameWidth, frameHeight);
+  if (!frameSize || frameSize.width !== frameWidth || frameSize.height !== frameHeight) {
+    frameSize = { width: frameWidth, height: frameHeight };
+    handleResize();
   }
 
   bindGroup = root.createBindGroup(layout, {
@@ -210,14 +222,6 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 }
 
-function updateVideoDisplay(frameWidth: number, frameHeight: number) {
-  const aspectRatio = frameWidth / frameHeight;
-  if (canvas.parentElement) {
-    canvas.parentElement.style.aspectRatio = `${aspectRatio}`;
-    canvas.parentElement.style.height = `min(100cqh, calc(100cqw/(${aspectRatio})))`;
-  }
-}
-
 const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 function setUVTransformForIOS() {
   const angle = screen.orientation.type;
@@ -241,6 +245,14 @@ if (isIOS) {
 
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    handleResize();
+  },
+});
+
 export const controls = defineControls({
   'use extended characters': {
     initial: false,
@@ -279,5 +291,6 @@ export function onCleanup() {
     }
   }
 
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
index 7936ea5765..d73c36d09b 100644
--- a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
@@ -1,4 +1,4 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
 <video
   autoplay
   playsinline
diff --git a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
index 99c2174622..64b1beac5b 100644
--- a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
@@ -207,15 +207,28 @@ function updateCropBounds(aspectRatio: number) {
   });
 }
 
-function onVideoChange(size: { width: number; height: number }) {
-  const aspectRatio = size.width / size.height;
-  video.style.height = `${video.clientWidth / aspectRatio}px`;
-  if (canvas.parentElement) {
-    canvas.parentElement.style.aspectRatio = `${aspectRatio}`;
-    canvas.parentElement.style.height = `min(100cqh, calc(100cqw/(${aspectRatio})))`;
+let frameSize: { width: number; height: number } | undefined;
+
+function handleResize() {
+  if (!frameSize) {
+    return;
+  }
+  const size = frameSize;
+
+  const targetAspectRatio = size.width / size.height;
+  video.style.height = `${video.clientWidth / targetAspectRatio}px`;
+
+  const domAspectRatio = canvas.clientWidth / canvas.clientHeight;
+
+  if (targetAspectRatio > domAspectRatio) {
+    // the surface is wider than the container
+    canvas.height = canvas.width / targetAspectRatio;
+  } else {
+    // the surface is taller than the container
+    canvas.width = canvas.height * targetAspectRatio;
   }
 
-  updateCropBounds(aspectRatio);
+  updateCropBounds(targetAspectRatio);
 
   blurredTextures = [0, 1].map(() =>
     root
@@ -245,7 +258,6 @@ function onVideoChange(size: { width: number; height: number }) {
 }
 
 let videoFrameCallbackId: number | undefined;
-let lastFrameSize: { width: number; height: number } | undefined;
 
 async function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   if (video.readyState < 2) {
@@ -256,13 +268,9 @@ async function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata
   const frameWidth = metadata.width;
   const frameHeight = metadata.height;
 
-  if (
-    !lastFrameSize ||
-    lastFrameSize.width !== frameWidth ||
-    lastFrameSize.height !== frameHeight
-  ) {
-    lastFrameSize = { width: frameWidth, height: frameHeight };
-    onVideoChange(lastFrameSize);
+  if (!frameSize || frameSize.width !== frameWidth || frameSize.height !== frameHeight) {
+    frameSize = { width: frameWidth, height: frameHeight };
+    handleResize();
   }
 
   blurredTextures[0].write(video);
@@ -299,6 +307,14 @@ async function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata
 }
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    handleResize();
+  },
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -334,8 +350,8 @@ export const controls = defineControls({
     initial: useSquareCrop,
     onToggleChange(value) {
       useSquareCrop = value;
-      if (lastFrameSize) {
-        updateCropBounds(lastFrameSize.width / lastFrameSize.height);
+      if (frameSize) {
+        updateCropBounds(frameSize.width / frameSize.height);
       }
     },
   },
@@ -359,6 +375,7 @@ export function onCleanup() {
     adapter.requestDevice = oldRequestDevice;
   }
 
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/image-processing/blur/index.html b/apps/typegpu-docs/src/examples/image-processing/blur/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/image-processing/blur/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/blur/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/image-processing/blur/index.ts b/apps/typegpu-docs/src/examples/image-processing/blur/index.ts
index 890d30e9cd..590fabec64 100644
--- a/apps/typegpu-docs/src/examples/image-processing/blur/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/blur/index.ts
@@ -171,7 +171,17 @@ function render() {
 
   renderPipeline.withColorAttachment({ view: context }).draw(3);
 }
-render();
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 // #region Example controls & Cleanup
 
@@ -200,6 +210,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
index 25ee8e0719..616ed0b443 100644
--- a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
@@ -2,7 +2,7 @@
   <div class="spinner">Loading...</div>
 </div>
 
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts
index b3e82e2720..d6c25c8364 100644
--- a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts
@@ -64,12 +64,22 @@ const renderPipeline = root.createRenderPipeline({
   targets: { format: presentationFormat },
 });
 
-function onVideoChange(size: { width: number; height: number }) {
-  const aspectRatio = size.width / size.height;
-  video.style.height = `${video.clientWidth / aspectRatio}px`;
-  if (canvas.parentElement) {
-    canvas.parentElement.style.aspectRatio = `${aspectRatio}`;
-    canvas.parentElement.style.height = `min(100cqh, calc(100cqw/(${aspectRatio})))`;
+function handleResize() {
+  if (!frameSize) {
+    return;
+  }
+
+  const targetAspectRatio = frameSize.width / frameSize.height;
+  video.style.height = `${video.clientWidth / targetAspectRatio}px`;
+
+  const domAspectRatio = canvas.clientWidth / canvas.clientHeight;
+
+  if (targetAspectRatio > domAspectRatio) {
+    // the surface is wider than the container
+    canvas.height = canvas.width / targetAspectRatio;
+  } else {
+    // the surface is taller than the container
+    canvas.width = canvas.height * targetAspectRatio;
   }
 }
 
@@ -95,7 +105,7 @@ if (isIOS) {
 }
 
 let videoFrameCallbackId: number | undefined;
-let lastFrameSize: { width: number; height: number } | undefined;
+let frameSize: { width: number; height: number } | undefined;
 
 function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   if (video.readyState < 2) {
@@ -106,13 +116,9 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   const frameWidth = metadata.width;
   const frameHeight = metadata.height;
 
-  if (
-    !lastFrameSize ||
-    lastFrameSize.width !== frameWidth ||
-    lastFrameSize.height !== frameHeight
-  ) {
-    lastFrameSize = { width: frameWidth, height: frameHeight };
-    onVideoChange(lastFrameSize);
+  if (!frameSize || frameSize.width !== frameWidth || frameSize.height !== frameHeight) {
+    frameSize = { width: frameWidth, height: frameHeight };
+    handleResize();
   }
 
   renderPipeline
@@ -133,6 +139,12 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
 }
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize: handleResize,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -160,6 +172,7 @@ export function onCleanup() {
       track.stop();
     }
   }
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
index c071e43f77..a1b839d1b7 100644
--- a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
@@ -1,4 +1,4 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts
index de68f71817..b0d7c69b10 100644
--- a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts
@@ -63,12 +63,23 @@ const renderPipeline = root.createRenderPipeline({
   targets: { format: presentationFormat },
 });
 
-function onVideoChange(size: { width: number; height: number }) {
-  const aspectRatio = size.width / size.height;
-  video.style.height = `${video.clientWidth / aspectRatio}px`;
-  if (canvas.parentElement) {
-    canvas.parentElement.style.aspectRatio = `${aspectRatio}`;
-    canvas.parentElement.style.height = `min(100cqh, calc(100cqw/(${aspectRatio})))`;
+function handleResize() {
+  if (!frameSize) {
+    return;
+  }
+
+  const size = frameSize;
+  const targetAspectRatio = size.width / size.height;
+  video.style.height = `${video.clientWidth / targetAspectRatio}px`;
+
+  const domAspectRatio = canvas.clientWidth / canvas.clientHeight;
+
+  if (targetAspectRatio > domAspectRatio) {
+    // the surface is wider than the container
+    canvas.height = canvas.width / targetAspectRatio;
+  } else {
+    // the surface is taller than the container
+    canvas.width = canvas.height * targetAspectRatio;
   }
 }
 
@@ -94,7 +105,7 @@ if (isIOS) {
 }
 
 let videoFrameCallbackId: number | undefined;
-let lastFrameSize: { width: number; height: number } | undefined;
+let frameSize: { width: number; height: number } | undefined;
 
 function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   if (video.readyState < 2) {
@@ -105,13 +116,9 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   const frameWidth = metadata.width;
   const frameHeight = metadata.height;
 
-  if (
-    !lastFrameSize ||
-    lastFrameSize.width !== frameWidth ||
-    lastFrameSize.height !== frameHeight
-  ) {
-    lastFrameSize = { width: frameWidth, height: frameHeight };
-    onVideoChange(lastFrameSize);
+  if (!frameSize || frameSize.width !== frameWidth || frameSize.height !== frameHeight) {
+    frameSize = { width: frameWidth, height: frameHeight };
+    handleResize();
   }
 
   const group = root.createBindGroup(layout, {
@@ -125,6 +132,12 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
 
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize: handleResize,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -152,6 +165,7 @@ export function onCleanup() {
       track.stop();
     }
   }
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts
index edc6de826c..13bb26f449 100644
--- a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts
@@ -344,10 +344,21 @@ export const controls = defineControls({
   },
 });
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
 // #endregion
-
-render();
diff --git a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
index c071e43f77..b8a6402627 100644
--- a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
@@ -1,15 +1,7 @@
-<canvas></canvas>
-<video autoplay playsinline></video>
-
-<style>
-  /* Keep the video "painted" so Safari continues decoding frames. */
-  video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-    pointer-events: none;
-  }
-</style>
+<canvas class="w-full h-full object-contain" />
+<!-- Keep the video "painted" so Safari continues decoding frames. -->
+<video
+  autoplay
+  playsinline
+  class="absolute top-0 left-0 w-[1px] h-[1px] opacity-0 pointer-events-none"
+/>
diff --git a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts
index e241bdbc08..7239d5f045 100644
--- a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts
@@ -18,9 +18,19 @@ import {
 const root = await tgpu.init();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
-
 const video = document.querySelector('video') as HTMLVideoElement;
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+  },
+});
+
 const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
@@ -196,6 +206,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   video.cancelVideoFrameCallback(videoFrameCallbackId);
+  autoResizer.detach();
   if (isIOS) {
     window.removeEventListener('orientationchange', setUVTransformForIOS);
   }
diff --git a/apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx b/apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx
index c44b5aa063..29ccc222af 100644
--- a/apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx
+++ b/apps/typegpu-docs/src/examples/react/shifting-gradient/index.tsx
@@ -37,7 +37,7 @@ function App() {
     renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3);
   });
 
-  return <canvas ref={ref} className="aspect-square h-full max-h-[100vw]" />;
+  return <canvas ref={ref} className="aspect-square w-auto h-full max-h-[100vw]" />;
 }
 
 // #region Example controls and cleanup
diff --git a/apps/typegpu-docs/src/examples/react/spinning-triangle/index.tsx b/apps/typegpu-docs/src/examples/react/spinning-triangle/index.tsx
index cbdfa25e7b..3d70bd916e 100644
--- a/apps/typegpu-docs/src/examples/react/spinning-triangle/index.tsx
+++ b/apps/typegpu-docs/src/examples/react/spinning-triangle/index.tsx
@@ -63,7 +63,7 @@ function App() {
     renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3);
   });
 
-  return <canvas ref={ref} className="aspect-square h-full max-h-[100vw]" />;
+  return <canvas ref={ref} className="aspect-square w-auto h-full max-h-[100vw]" />;
 }
 
 // #region Example controls and cleanup
diff --git a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
index 4dcce7ff04..236e1fb54c 100644
--- a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
@@ -44,4 +44,4 @@ <h3 class="attribution-header">Attribution (click to dismiss)</h3>
     from original
   </p>
 </div>
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts
index f36d4b038f..5406dd5955 100644
--- a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.ts
@@ -1,4 +1,4 @@
-import { tgpu } from 'typegpu';
+import { tgpu, common } from 'typegpu';
 
 import { defineControls } from '../../common/defineControls.ts';
 import { setupScene } from './scene.ts';
@@ -8,6 +8,14 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    scene.onResize();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -18,6 +26,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/3d-fish/scene.ts b/apps/typegpu-docs/src/examples/rendering/3d-fish/scene.ts
index 3a3682ffcf..141abfdfaa 100644
--- a/apps/typegpu-docs/src/examples/rendering/3d-fish/scene.ts
+++ b/apps/typegpu-docs/src/examples/rendering/3d-fish/scene.ts
@@ -131,7 +131,7 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     ),
     projection: m.mat4.perspective(
       Math.PI / 4,
-      canvas.clientWidth / canvas.clientHeight,
+      canvas.width / canvas.height,
       0.1,
       1000,
       d.mat4x4f(),
@@ -222,22 +222,9 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     }),
   );
 
-  // frame
-
   let odd = false;
-  let lastTimestamp: DOMHighResTimeStamp = 0;
-  let animationFrameId: number;
-
-  function frame(timestamp: DOMHighResTimeStamp) {
-    odd = !odd;
-
-    currentTimeBuffer.write(timestamp);
-    timePassedBuffer.write((timestamp - lastTimestamp) * speedMultiplier);
-    lastTimestamp = timestamp;
-    cameraBuffer.write(camera);
-
-    simulatePipeline.with(computeBindGroups[odd ? 1 : 0]).dispatchThreads(p.fishAmount);
 
+  function render() {
     renderPipeline
       .withColorAttachment({
         view: context,
@@ -270,6 +257,24 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
       .with(renderInstanceLayout, fishDataBuffers[odd ? 1 : 0])
       .with(renderFishBindGroups[odd ? 1 : 0])
       .draw(fishModel.polygonCount, p.fishAmount);
+  }
+
+  // frame
+
+  let lastTimestamp: DOMHighResTimeStamp = 0;
+  let animationFrameId: number;
+
+  function frame(timestamp: DOMHighResTimeStamp) {
+    odd = !odd;
+
+    currentTimeBuffer.write(timestamp);
+    timePassedBuffer.write((timestamp - lastTimestamp) * speedMultiplier);
+    lastTimestamp = timestamp;
+    cameraBuffer.write(camera);
+
+    simulatePipeline.with(computeBindGroups[odd ? 1 : 0]).dispatchThreads(p.fishAmount);
+
+    render();
 
     animationFrameId = requestAnimationFrame(frame);
   }
@@ -418,35 +423,35 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
   };
   window.addEventListener('touchmove', touchMoveEventListener);
 
-  // observer and cleanup
-
-  const resizeObserver = new ResizeObserver(() => {
-    camera.projection = m.mat4.perspective(
-      Math.PI / 4,
-      canvas.clientWidth / canvas.clientHeight,
-      0.1,
-      1000,
-      d.mat4x4f(),
-    );
-
-    depthTexture.destroy();
-    depthTexture = root.device.createTexture({
-      size: [canvas.width, canvas.height, 1],
-      format: 'depth24plus',
-      usage: GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-  });
-  resizeObserver.observe(canvas);
+  // resizing and cleanup
 
   return {
     randomizeFishPositions,
+    onResize() {
+      camera.projection = m.mat4.perspective(
+        Math.PI / 4,
+        canvas.width / canvas.height,
+        0.1,
+        1000,
+        d.mat4x4f(),
+      );
+      cameraBuffer.patch({ projection: camera.projection });
+
+      depthTexture.destroy();
+      depthTexture = root.device.createTexture({
+        size: [canvas.width, canvas.height, 1],
+        format: 'depth24plus',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+
+      render();
+    },
     onCleanup() {
       disposed = true;
       cancelAnimationFrame(animationFrameId);
       window.removeEventListener('mouseup', mouseUpEventListener);
       window.removeEventListener('mousemove', mouseMoveEventListener);
       window.removeEventListener('touchmove', touchMoveEventListener);
-      resizeObserver.disconnect();
     },
   };
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.ts b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.ts
index 463186b86c..7e3d4e7a90 100644
--- a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.ts
@@ -1,5 +1,5 @@
 import { linearToSrgb, srgbToLinear } from '@typegpu/color';
-import { tgpu, d, type TgpuFragmentFn, type TgpuVertexFn } from 'typegpu';
+import { tgpu, common, d, type TgpuFragmentFn, type TgpuVertexFn } from 'typegpu';
 import { discard, max, min, mul, normalize, pow, sub } from 'typegpu/std';
 import { mat4 } from 'wgpu-matrix';
 import { defineControls } from '../../common/defineControls.ts';
@@ -246,6 +246,10 @@ const pipeline = root.createRenderPipeline({
 
 // UI
 
+function render() {
+  pipeline.withColorAttachment({ view: context }).draw(3);
+}
+
 let animationFrameId: number;
 let lastTime: number | null = null;
 
@@ -269,11 +273,23 @@ const runner = (timestamp: number) => {
 
   frame += (rotationSpeed * deltaTime) / 1000;
 
-  pipeline.withColorAttachment({ view: context }).draw(3);
+  render();
   animationFrameId = requestAnimationFrame(runner);
 };
 animationFrameId = requestAnimationFrame(runner);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -320,6 +336,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics/index.html b/apps/typegpu-docs/src/examples/rendering/caustics/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/caustics/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics/index.ts b/apps/typegpu-docs/src/examples/rendering/caustics/index.ts
index 4b15920d44..0e0b297257 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/caustics/index.ts
@@ -1,4 +1,4 @@
-import { tgpu } from 'typegpu';
+import { tgpu, common } from 'typegpu';
 
 import { defineControls } from '../../common/defineControls.ts';
 import { setupScene } from './scene.ts';
@@ -8,6 +8,18 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    scene.onResize();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -24,6 +36,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics/scene.ts b/apps/typegpu-docs/src/examples/rendering/caustics/scene.ts
index c6b5b46aab..c09f3ffe87 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics/scene.ts
+++ b/apps/typegpu-docs/src/examples/rendering/caustics/scene.ts
@@ -131,21 +131,27 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
 
   let isRunning = true;
 
-  function draw(timestamp: number) {
+  function render() {
+    pipeline.withColorAttachment({ view: context }).draw(3);
+  }
+
+  function frame(timestamp: number) {
     if (!isRunning) return;
 
     time.write((timestamp * 0.001) % 1000);
+    render();
 
-    pipeline.withColorAttachment({ view: context }).draw(3);
-
-    requestAnimationFrame(draw);
+    requestAnimationFrame(frame);
   }
-  requestAnimationFrame(draw);
+  requestAnimationFrame(frame);
 
   return {
     set tileDensity(density: number) {
       tileDensity.write(density);
     },
+    onResize() {
+      render();
+    },
     onCleanup() {
       isRunning = false;
     },
diff --git a/apps/typegpu-docs/src/examples/rendering/clouds/index.html b/apps/typegpu-docs/src/examples/rendering/clouds/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/clouds/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/clouds/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/clouds/index.ts b/apps/typegpu-docs/src/examples/rendering/clouds/index.ts
index 7ab45bd7a6..ba0dd14959 100644
--- a/apps/typegpu-docs/src/examples/rendering/clouds/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/clouds/index.ts
@@ -182,26 +182,7 @@ function createCloudUpscaleBindGroup() {
 
 let cloudUpscaleBindGroup = createCloudUpscaleBindGroup();
 
-const resizeObserver = new ResizeObserver(() => {
-  resolutionUniform.write(d.vec2f(canvas.width, canvas.height));
-
-  const [width, height] = getCloudTargetSize();
-  if (width === cloudTarget.width && height === cloudTarget.height) {
-    return;
-  }
-
-  const previousCloudTarget = cloudTarget;
-  cloudTarget = createCloudTarget(width, height);
-  cloudUpscaleBindGroup = createCloudUpscaleBindGroup();
-  previousCloudTarget.texture.destroy();
-});
-resizeObserver.observe(canvas);
-
-let frameId: number;
-
-function render(timestamp: number) {
-  paramsUniform.patch({ time: (timestamp / 1000) % 500 });
-
+function render() {
   cloudPipeline
     .with(cloudsBindGroup)
     .withColorAttachment({
@@ -217,11 +198,35 @@ function render(timestamp: number) {
       clearValue: [0, 0, 0, 1],
     })
     .draw(3);
+}
+
+let frameId: number;
 
-  frameId = requestAnimationFrame(render);
+function frame(timestamp: number) {
+  paramsUniform.patch({ time: (timestamp / 1000) % 500 });
+  render();
+  frameId = requestAnimationFrame(frame);
 }
 
-frameId = requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    resolutionUniform.write(d.vec2f(canvas.width, canvas.height));
+
+    const [width, height] = getCloudTargetSize();
+    if (width !== cloudTarget.width || height !== cloudTarget.height) {
+      const previousCloudTarget = cloudTarget;
+      cloudTarget = createCloudTarget(width, height);
+      cloudUpscaleBindGroup = createCloudUpscaleBindGroup();
+      previousCloudTarget.texture.destroy();
+    }
+
+    render();
+  },
+});
 
 const qualityOptions = {
   'very high': {
@@ -258,7 +263,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   cloudTarget.texture.destroy();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
index cb4615fc87..a2d13746bb 100644
--- a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
@@ -38,4 +38,4 @@ <h3 class="controls-header">Controls (click to dismiss)</h3>
     under CC BY 4.0 / Modified from original
   </p>
 </div>
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts
index 26e9c18a97..038dbe5aaa 100644
--- a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 
 import { type CubemapNames } from './cubemap.ts';
 import { defineControls } from '../../common/defineControls.ts';
@@ -24,6 +24,14 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    scene.onResize();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -89,6 +97,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/scene.ts b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/scene.ts
index 70a5e66876..2c02c32c9b 100644
--- a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/scene.ts
+++ b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/scene.ts
@@ -264,25 +264,6 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
 
   // #region Example controls and cleanup
 
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      const dpr = window.devicePixelRatio;
-      const width = entry.contentRect.width;
-      const height = entry.contentRect.height;
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
-      const newProj = m.mat4.perspective(
-        Math.PI / 4,
-        canvas.width / canvas.height,
-        0.1,
-        10000,
-        d.mat4x4f(),
-      );
-      cameraBuffer.patch({ projection: newProj });
-    }
-  });
-  resizeObserver.observe(canvas);
-
   // Variables for mouse interaction.
   let isDragging = false;
   let prevX = 0;
@@ -442,13 +423,23 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
       materialProps.reflectivity = value;
       materialBuffer.patch({ reflectivity: value });
     },
+    onResize() {
+      const newProj = m.mat4.perspective(
+        Math.PI / 4,
+        canvas.width / canvas.height,
+        0.1,
+        10000,
+        d.mat4x4f(),
+      );
+      cameraBuffer.patch({ projection: newProj });
+      render();
+    },
     onCleanup() {
       exampleDestroyed = true;
       window.removeEventListener('mouseup', mouseUpEventListener);
       window.removeEventListener('mousemove', mouseMoveEventListener);
       window.removeEventListener('touchmove', touchMoveEventListener);
       window.removeEventListener('touchend', touchEndEventListener);
-      resizeObserver.unobserve(canvas);
       icosphereGenerator.destroy();
     },
   };
diff --git a/apps/typegpu-docs/src/examples/rendering/disco/index.html b/apps/typegpu-docs/src/examples/rendering/disco/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/disco/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/disco/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/disco/index.ts b/apps/typegpu-docs/src/examples/rendering/disco/index.ts
index 513d735869..389734b4ac 100644
--- a/apps/typegpu-docs/src/examples/rendering/disco/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/disco/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 import { resolutionAccess, timeAccess } from './consts.ts';
 import {
   mainFragment1,
@@ -42,11 +42,7 @@ let currentPipeline = pipelines[0];
 let startTime: null | number = null;
 let frameId: number;
 
-function render(timestamp: number) {
-  if (startTime === null) {
-    startTime = timestamp;
-  }
-  time.write((timestamp - startTime) / 1000);
+function render() {
   resolutionUniform.write(d.vec2f(canvas.width, canvas.height));
 
   currentPipeline
@@ -55,14 +51,32 @@ function render(timestamp: number) {
       clearValue: [0, 0, 0, 1],
     })
     .draw(6);
+}
+
+function frame(timestamp: number) {
+  if (startTime === null) {
+    startTime = timestamp;
+  }
+  time.write((timestamp - startTime) / 1000);
+
+  render();
 
-  frameId = requestAnimationFrame(render);
+  frameId = requestAnimationFrame(frame);
 }
 
-frameId = requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts
index a547923370..6a6e9ed887 100644
--- a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.ts
@@ -1,5 +1,5 @@
 import type { TgpuGuardedComputePipeline, TgpuRawCodeSnippet } from 'typegpu';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { mat4 } from 'wgpu-matrix';
 import { defineControls } from '../../common/defineControls.ts';
 
@@ -383,21 +383,23 @@ window.addEventListener('touchend', touchEndEventListener);
 
 // Resize observer and cleanup
 
-const resizeObserver = new ResizeObserver(() => {
-  queuePropertiesBufferUpdate();
-
-  msTexture.destroy();
-  msTexture = device.createTexture({
-    size: [canvas.width, canvas.height],
-    sampleCount: 4,
-    format: presentationFormat,
-    usage: GPUTextureUsage.RENDER_ATTACHMENT,
-  });
-  msView = msTexture.createView();
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    queuePropertiesBufferUpdate();
+
+    msTexture.destroy();
+    msTexture = device.createTexture({
+      size: [canvas.width, canvas.height],
+      sampleCount: 4,
+      format: presentationFormat,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    msView = msTexture.createView();
+  },
 });
 
-resizeObserver.observe(canvas);
-
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -456,7 +458,7 @@ export function onCleanup() {
   window.removeEventListener('mousemove', mouseMoveEventListener);
   window.removeEventListener('touchmove', touchMoveEventListener);
   window.removeEventListener('touchend', touchEndEventListener);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
index a1a36aafb9..0942059962 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
@@ -33,4 +33,4 @@
   Inspired by work of
   <a href="https://x.com/cerpow/status/1964953851603358112" target="_blank">Voicu Apostol</a>
 </div>
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts
index 6b8ee8bfca..c623879660 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 
 import { setupScene } from './scene.ts';
 import { defineControls } from '../../common/defineControls.ts';
@@ -13,6 +13,18 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    scene.onResize();
+  },
+});
+
 // #region Example controls and cleanup
 
 let attributionDismissed = false;
@@ -82,6 +94,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/scene.ts b/apps/typegpu-docs/src/examples/rendering/jelly-slider/scene.ts
index 8563ff240a..d07892cb77 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/scene.ts
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/scene.ts
@@ -660,7 +660,6 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
   const digitsTexture = digitsProvider.digitTextureAtlas.createView(d.texture2dArray(d.f32));
 
   let qualityScale = 0.5;
-  let [prevCanvasWidth, prevCanvasHeight] = [canvas.width, canvas.height];
   let [width, height] = [canvas.width * qualityScale, canvas.height * qualityScale];
 
   let textures = createTextures(root, width, height);
@@ -746,8 +745,7 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
   }
   let bindGroups = createBindGroups();
 
-  function onResize() {
-    [prevCanvasWidth, prevCanvasHeight] = [canvas.width, canvas.height];
+  function handleResize() {
     [width, height] = [canvas.width * qualityScale, canvas.height * qualityScale];
     camera.updateProjection(Math.PI / 4, width, height);
     textures = createTextures(root, width, height);
@@ -758,28 +756,14 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     bindGroups = createBindGroups();
   }
 
-  let animationFrameHandle: number;
-  function render(timestamp: number) {
-    if (canvas.width !== prevCanvasWidth || canvas.height !== prevCanvasHeight) {
-      onResize();
-    }
-
+  function render() {
     frameCount++;
     camera.jitter();
-    const deltaTime = Math.min(
-      lastTimestamp !== null ? (timestamp - lastTimestamp) * 0.001 : 0,
-      0.1,
-    );
-    lastTimestamp = timestamp;
 
     sceneParamsUniform.patch({
       seed: d.vec2f((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2),
     });
 
-    eventHandler.update();
-    slider.setDragX(eventHandler.currentMouseX);
-    slider.update(deltaTime);
-
     const currentFrame = frameCount % 2;
 
     rayMarchPipeline
@@ -796,11 +780,26 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
         view: context,
       })
       .draw(3);
+  }
 
-    animationFrameHandle = requestAnimationFrame(render);
+  let animationFrameHandle: number;
+  function frame(timestamp: number) {
+    const deltaTime = Math.min(
+      lastTimestamp !== null ? (timestamp - lastTimestamp) * 0.001 : 0,
+      0.1,
+    );
+    lastTimestamp = timestamp;
+
+    eventHandler.update();
+    slider.setDragX(eventHandler.currentMouseX);
+    slider.update(deltaTime);
+
+    render();
+
+    animationFrameHandle = requestAnimationFrame(frame);
   }
 
-  animationFrameHandle = requestAnimationFrame(render);
+  animationFrameHandle = requestAnimationFrame(frame);
 
   return {
     rayMarchPipeline,
@@ -810,7 +809,7 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     },
     set qualityScale(v: number) {
       qualityScale = v;
-      onResize();
+      handleResize();
     },
     set lightDirection(v: d.v3f) {
       sceneParamsUniform.patch({
@@ -875,6 +874,10 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
 
       return resolutionScale;
     },
+    onResize() {
+      handleResize();
+      render();
+    },
     onCleanup() {
       cancelAnimationFrame(animationFrameHandle);
     },
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.ts b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.ts
index 69f7b99204..ed4c6bd776 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.ts
@@ -484,7 +484,6 @@ const renderPipeline = root.createRenderPipeline({
   targets: { format: presentationFormat },
 });
 
-let lastTimestamp: number | null = null;
 let frameCount = 0;
 const taaResolver = new TAAResolver(root, width, height);
 
@@ -503,19 +502,13 @@ function createBindGroups() {
 
 let bindGroups = createBindGroups();
 
-let animationFrameHandle: number;
-function render(timestamp: number) {
+function render() {
   frameCount++;
-  camera.jitter();
-  const deltaTime = Math.min(lastTimestamp !== null ? (timestamp - lastTimestamp) * 0.001 : 0, 0.1);
-  lastTimestamp = timestamp;
+  const currentFrame = frameCount % 2;
 
+  camera.jitter();
   randomUniform.write(d.vec2f((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2));
 
-  switchBehavior.update(deltaTime);
-
-  const currentFrame = frameCount % 2;
-
   rayMarchPipeline
     .withColorAttachment({
       view: textures[currentFrame].sampled,
@@ -530,11 +523,14 @@ function render(timestamp: number) {
     .withColorAttachment({ view: context })
     .with(bindGroups.render[currentFrame])
     .draw(3);
-
-  animationFrameHandle = requestAnimationFrame(render);
 }
 
 function handleResize() {
+  // Keeping the aspect ratio 1:1
+  const size = Math.min(canvas.width, canvas.height);
+  canvas.width = size;
+  canvas.height = size;
+
   [width, height] = [canvas.width * qualityScale, canvas.height * qualityScale];
   camera.updateProjection(Math.PI / 4, width, height);
   textures = createTextures(root, width, height);
@@ -543,14 +539,30 @@ function handleResize() {
   frameCount = 0;
 
   bindGroups = createBindGroups();
+  render();
 }
 
-const resizeObserver = new ResizeObserver(() => {
-  handleResize();
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    handleResize();
+  },
 });
-resizeObserver.observe(canvas);
 
-animationFrameHandle = requestAnimationFrame(render);
+let lastTimestamp: number | null = null;
+let animationFrameHandle: number;
+function frame(timestamp: number) {
+  const deltaTime = Math.min(lastTimestamp !== null ? (timestamp - lastTimestamp) * 0.001 : 0, 0.1);
+  lastTimestamp = timestamp;
+
+  switchBehavior.update(deltaTime);
+
+  render();
+
+  animationFrameHandle = requestAnimationFrame(frame);
+}
+animationFrameHandle = requestAnimationFrame(frame);
 
 // #region Example controls and cleanup
 
@@ -684,7 +696,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameHandle);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/os-awards/index.html b/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
index 972583913a..86a6e42572 100644
--- a/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
@@ -12,4 +12,4 @@
 <div class="spinner-background">
   <div class="spinner">Loading...</div>
 </div>
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/os-awards/index.ts b/apps/typegpu-docs/src/examples/rendering/os-awards/index.ts
index 4c7fa78d0c..4132070558 100644
--- a/apps/typegpu-docs/src/examples/rendering/os-awards/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/os-awards/index.ts
@@ -115,16 +115,27 @@ function updateAwardTransform(timeMs: number) {
   awardTransformInverse.write(m.mat4.invert(transformDraft, inverseDraft));
 }
 
-let frameId = requestAnimationFrame(function frame(timeMs) {
-  updateAwardTransform(timeMs);
-
+function render() {
   envPipeline.with(sharedBindGroup).withColorAttachment({ view: context }).draw(3);
   renderers[renderer].draw(sharedBindGroup);
+}
+
+let frameId = requestAnimationFrame(function frame(timeMs) {
+  updateAwardTransform(timeMs);
+  render();
   loadingScreen.remove();
 
   frameId = requestAnimationFrame(frame);
 });
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -147,6 +158,7 @@ export function onCleanup() {
   cancelAnimationFrame(frameId);
   cleanupCamera();
   Object.values(renderers).forEach((r) => r.destroy());
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/os-awards/mesh/renderer.ts b/apps/typegpu-docs/src/examples/rendering/os-awards/mesh/renderer.ts
index 4a7868db52..8a22d7ae18 100644
--- a/apps/typegpu-docs/src/examples/rendering/os-awards/mesh/renderer.ts
+++ b/apps/typegpu-docs/src/examples/rendering/os-awards/mesh/renderer.ts
@@ -130,14 +130,15 @@ export function createMeshRenderer(
       .$usage('render');
 
   let depth = createDepthTexture();
-  const resizeObserver = new ResizeObserver(() => {
-    depth.destroy();
-    depth = createDepthTexture();
-  });
-  resizeObserver.observe(canvas);
 
   return {
     draw(sharedBindGroup: SharedBindGroup) {
+      // Recreating the depth texture if the canvas has been resized
+      if (depth.props.size[0] !== canvas.width || depth.props.size[1] !== canvas.height) {
+        depth.destroy();
+        depth = createDepthTexture();
+      }
+
       pipeline
         .with(sharedBindGroup)
         .withColorAttachment({ view: context, loadOp: 'load' })
@@ -152,7 +153,6 @@ export function createMeshRenderer(
         .drawIndexed(award.indexCount);
     },
     destroy() {
-      resizeObserver.disconnect();
       depth.destroy();
     },
   };
diff --git a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts
index 72f36af744..1bdfa9d27b 100644
--- a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.ts
@@ -66,19 +66,34 @@ let activeSharpenFn: 'exponential' | 'tanh' = 'exponential';
 let isRunning = true;
 let bindGroup = root.createBindGroup(dynamicLayout, perlinCache.bindings);
 
-function draw(timestamp: number) {
+function render() {
+  renderPipelines[activeSharpenFn].with(bindGroup).withColorAttachment({ view: context }).draw(3);
+}
+
+function frame(timestamp: number) {
   if (!isRunning) {
     return;
   }
 
   time.write((timestamp * 0.0002) % DEPTH);
+  render();
 
-  renderPipelines[activeSharpenFn].with(bindGroup).withColorAttachment({ view: context }).draw(3);
-
-  requestAnimationFrame(draw);
+  requestAnimationFrame(frame);
 }
 
-requestAnimationFrame(draw);
+requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export const controls = defineControls({
   'grid size': {
@@ -109,5 +124,6 @@ export const controls = defineControls({
 
 export function onCleanup() {
   isRunning = false;
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
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 f6a2f49617..8434f72027 100644
--- a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import * as p from './params.ts';
 import {
   ExampleControls,
@@ -102,9 +102,7 @@ let depthTexture = root.device.createTexture({
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
 });
 
-// frame
-let frameId: number;
-function frame() {
+function render() {
   renderPipeline
     .withColorAttachment({
       view: context,
@@ -118,11 +116,30 @@ function frame() {
     })
     .with(modelVertexLayout, model.vertexBuffer)
     .draw(model.polygonCount);
+}
 
+// frame
+let frameId: number;
+function frame() {
+  render();
   frameId = requestAnimationFrame(frame);
 }
 frameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    depthTexture.destroy();
+    depthTexture = root.device.createTexture({
+      size: [canvas.width, canvas.height, 1],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 export const controls = defineControls({
   'light color': {
@@ -166,20 +183,10 @@ export const controls = defineControls({
   },
 });
 
-const resizeObserver = new ResizeObserver(() => {
-  depthTexture.destroy();
-  depthTexture = root.device.createTexture({
-    size: [canvas.width, canvas.height, 1],
-    format: 'depth24plus',
-    usage: GPUTextureUsage.RENDER_ATTACHMENT,
-  });
-});
-resizeObserver.observe(canvas);
-
 export function onCleanup() {
   cancelAnimationFrame(frameId);
   cleanupCamera();
-  resizeObserver.unobserve(canvas);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.ts b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.ts
index 718feef491..e5290532c9 100644
--- a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.ts
@@ -7,7 +7,6 @@ import { CameraData, InstanceData, instanceLayout, VertexData, vertexLayout } fr
 import { defineControls } from '../../common/defineControls.ts';
 
 const root = await tgpu.init();
-const device = root.device;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
@@ -361,28 +360,11 @@ let lastTime: number | null = null;
 let time = 0;
 let animationFrameId: number;
 
-function render(timestamp: number) {
-  const dt = lastTime !== null ? (timestamp - lastTime) / 1000 : 0;
-  lastTime = timestamp;
-  time += dt;
-
-  for (let i = 0; i < orbitingCubes.length; i++) {
-    const offset = (i / orbitingCubes.length) * Math.PI * 2;
-    const angle = time * 0.5 + offset;
-    const radius = 4 + Math.sin(time * 2 + offset * 3) * 0.5;
-    const x = Math.cos(angle) * radius;
-    const z = Math.sin(angle) * radius;
-    const y = 2 + Math.sin(time * 1.5 + offset * 2) * 1.5;
-    orbitingCubes[i].position = d.vec3f(x, y, z);
-    orbitingCubes[i].rotation = d.vec3f(time, time * 0.5, 0);
-  }
-
-  scene.update();
+function render() {
   pointLight.renderShadowMaps(pipelineDepthOne, renderLayout, scene);
 
   if (showDepthPreview) {
     pipelinePreview.withColorAttachment({ view: context }).draw(3);
-    animationFrameId = requestAnimationFrame(render);
     return;
   }
 
@@ -421,17 +403,41 @@ function render(timestamp: number) {
     .withIndexBuffer(BoxGeometry.indexBuffer)
     .with(vertexLayout, BoxGeometry.vertexBuffer)
     .drawIndexed(BoxGeometry.indexCount);
+}
+
+function frame(timestamp: number) {
+  animationFrameId = requestAnimationFrame(frame);
 
-  animationFrameId = requestAnimationFrame(render);
+  const dt = lastTime !== null ? (timestamp - lastTime) / 1000 : 0;
+  lastTime = timestamp;
+  time += dt;
+
+  for (let i = 0; i < orbitingCubes.length; i++) {
+    const offset = (i / orbitingCubes.length) * Math.PI * 2;
+    const angle = time * 0.5 + offset;
+    const radius = 4 + Math.sin(time * 2 + offset * 3) * 0.5;
+    const x = Math.cos(angle) * radius;
+    const z = Math.sin(angle) * radius;
+    const y = 2 + Math.sin(time * 1.5 + offset * 2) * 1.5;
+    orbitingCubes[i].position = d.vec3f(x, y, z);
+    orbitingCubes[i].rotation = d.vec3f(time, time * 0.5, 0);
+  }
+
+  scene.update();
+
+  render();
 }
-animationFrameId = requestAnimationFrame(render);
 
-const resizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    const width = entry.contentBoxSize[0].inlineSize;
-    const height = entry.contentBoxSize[0].blockSize;
-    canvas.width = Math.max(1, Math.min(width, device.limits.maxTextureDimension2D));
-    canvas.height = Math.max(1, Math.min(height, device.limits.maxTextureDimension2D));
+animationFrameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
 
     depthTexture = root
       .createTexture({
@@ -447,9 +453,10 @@ const resizeObserver = new ResizeObserver((entries) => {
         sampleCount: 4,
       })
       .$usage('render');
-  }
+
+    render();
+  },
 });
-resizeObserver.observe(canvas);
 
 const initialCamPos = { x: 5, y: 5, z: -5 };
 let theta = Math.atan2(initialCamPos.z, initialCamPos.x);
@@ -657,7 +664,7 @@ export function onCleanup() {
   window.removeEventListener('mousemove', mouseMoveEventListener);
   window.removeEventListener('touchend', touchEndEventListener);
   window.removeEventListener('touchmove', touchMoveEventListener);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/pom/index.html b/apps/typegpu-docs/src/examples/rendering/pom/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/pom/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/pom/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/pom/index.ts b/apps/typegpu-docs/src/examples/rendering/pom/index.ts
index 102d07f6e6..23fb7cf34f 100644
--- a/apps/typegpu-docs/src/examples/rendering/pom/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/pom/index.ts
@@ -1,5 +1,5 @@
 import { randf } from '@typegpu/noise';
-import { tgpu, d, std, type RenderFlag, type TgpuTexture } from 'typegpu';
+import { tgpu, common, d, std, type RenderFlag, type TgpuTexture } from 'typegpu';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 import { defineControls } from '../../common/defineControls.ts';
 import {
@@ -405,8 +405,7 @@ function createDepthTexture() {
 }
 createDepthTexture();
 
-let frameId: number;
-function frame() {
+function render() {
   pipeline
     .withColorAttachment({ view: context, clearValue: [0, 0, 0, 1] })
     .withDepthStencilAttachment({
@@ -416,10 +415,24 @@ function frame() {
       depthStoreOp: 'store',
     })
     .drawIndexed(planeMesh.indexCount);
+}
+
+let frameId: number;
+function frame() {
+  render();
   frameId = requestAnimationFrame(frame);
 }
 frameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    createDepthTexture();
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -484,13 +497,10 @@ export const controls = defineControls({
   },
 });
 
-const resizeObserver = new ResizeObserver(createDepthTexture);
-resizeObserver.observe(canvas);
-
 export function onCleanup() {
   cancelAnimationFrame(frameId);
   cleanupCamera();
-  resizeObserver.unobserve(canvas);
+  autoResizer.detach();
   depthTexture.destroy();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/drawInteraction.ts b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/drawInteraction.ts
index bd38d9b86a..3aaf7d5475 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/drawInteraction.ts
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/drawInteraction.ts
@@ -39,25 +39,32 @@ export function createDrawInteraction({ canvas, onDraw }: DrawInteractionOptions
     return hslToRgb((timestamp * 0.00008) % 1, 0.82, 0.62);
   }
 
-  function mousePosition(e: MouseEvent): Point {
+  function clientToCanvas(clientX: number, clientY: number): Point {
     const rect = canvas.getBoundingClientRect();
+
+    // Taking into account the square aspect ratio
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
+    const size = Math.min(rect.width, rect.height);
+    const squareLeft = centerX - size / 2;
+    const squareTop = centerY - size / 2;
+
     return {
-      x: (e.clientX - rect.left) / rect.width,
-      y: (e.clientY - rect.top) / rect.height,
+      x: (clientX - squareLeft) / size,
+      y: (clientY - squareTop) / size,
     };
   }
 
+  function mousePosition(e: MouseEvent): Point {
+    return clientToCanvas(e.clientX, e.clientY);
+  }
+
   function touchPosition(touches: TouchList): Point {
     const first = touches[0];
     const second = touches[1];
     const clientX = second ? (first.clientX + second.clientX) / 2 : first.clientX;
     const clientY = second ? (first.clientY + second.clientY) / 2 : first.clientY;
-
-    const rect = canvas.getBoundingClientRect();
-    return {
-      x: (clientX - rect.left) / rect.width,
-      y: (clientY - rect.top) / rect.height,
-    };
+    return clientToCanvas(clientX, clientY);
   }
 
   function setButton(useSecondary: boolean) {
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts
index 03aedf25b0..96e38caf3a 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.ts
@@ -115,10 +115,7 @@ const interaction = createDrawInteraction({
   },
 });
 
-let frameId = requestAnimationFrame(frame);
-function frame(timestamp: number) {
-  interaction.update(timestamp);
-
+function render() {
   const encoder = root['~unstable'].createCommandEncoder();
   if (sceneDirty) {
     stamp(encoder);
@@ -131,9 +128,27 @@ function frame(timestamp: number) {
   pass.end();
 
   encoder.submit();
+}
+
+let frameId = requestAnimationFrame(frame);
+function frame(timestamp: number) {
+  interaction.update(timestamp);
+  render();
   frameId = requestAnimationFrame(frame);
 }
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -165,6 +180,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts
index ee3095ea4a..6e5527704b 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.ts
@@ -516,15 +516,23 @@ const dragController = new DragController(canvas, onDrag, onDrag);
 // #region Example controls and cleanup
 
 let resizeTimeout: ReturnType<typeof setTimeout>;
-const resizeObserver = new ResizeObserver(() => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(recreateSizedResources, 100);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(recreateSizedResources, 100);
+
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+  },
 });
-resizeObserver.observe(canvas);
 
 export function onCleanup() {
   dragController.destroy();
-  resizeObserver.disconnect();
+  autoResizer.detach();
   clearTimeout(resizeTimeout);
   if (frameId !== null) {
     cancelAnimationFrame(frameId);
diff --git a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.ts b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.ts
index 2c33a63226..ba47ff744f 100644
--- a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.ts
@@ -1,4 +1,4 @@
-import { tgpu } from 'typegpu';
+import { tgpu, common } from 'typegpu';
 
 import { setupScene } from './scene.ts';
 
@@ -7,7 +7,16 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    scene.onResize();
+  },
+});
+
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/ray-marching/scene.ts b/apps/typegpu-docs/src/examples/rendering/ray-marching/scene.ts
index 2234840267..a0fb2beccd 100644
--- a/apps/typegpu-docs/src/examples/rendering/ray-marching/scene.ts
+++ b/apps/typegpu-docs/src/examples/rendering/ray-marching/scene.ts
@@ -218,12 +218,16 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     fragment: fragmentMain,
   });
 
-  let animationFrame: number;
-  function run(timestamp: number) {
-    time.write((timestamp / 1000) % 1000);
+  function render() {
     resolution.write(d.vec2f(canvas.width, canvas.height));
 
     renderPipeline.withColorAttachment({ view: context }).draw(3);
+  }
+
+  let animationFrame: number;
+  function run(timestamp: number) {
+    time.write((timestamp / 1000) % 1000);
+    render();
 
     animationFrame = requestAnimationFrame(run);
   }
@@ -231,6 +235,9 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
   animationFrame = requestAnimationFrame(run);
 
   return {
+    onResize() {
+      render();
+    },
     onCleanup() {
       cancelAnimationFrame(animationFrame);
     },
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.ts b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.ts
index baae4dfcc4..72f5d002a1 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.ts
@@ -1,5 +1,5 @@
 import { perlin2d } from '@typegpu/noise';
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 import * as m from 'wgpu-matrix';
 import { defineControls } from '../../common/defineControls.ts';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
@@ -147,11 +147,7 @@ setCubeCount(INITIAL_CUBE_COUNT);
 
 let useBundles = true;
 
-let disposed = false;
-
-function frame() {
-  if (disposed) return;
-
+function render() {
   if (depthTexture.width !== canvas.width || depthTexture.height !== canvas.height) {
     depthTexture.destroy();
     depthTexture = root.device.createTexture({
@@ -186,12 +182,28 @@ function frame() {
 
   pass.end();
   encoder.submit();
+}
+
+let disposed = false;
+
+function frame() {
+  if (disposed) return;
+
+  render();
 
   requestAnimationFrame(frame);
 }
 
 requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -215,5 +227,6 @@ export function onCleanup() {
   cleanupCamera();
   perlinCache.destroy();
   depthTexture.destroy();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.ts b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.ts
index 538ec576ea..e6eee1a819 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.ts
@@ -1,5 +1,5 @@
 import { perlin2d } from '@typegpu/noise';
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 import * as m from 'wgpu-matrix';
 import { defineControls } from '../../common/defineControls.ts';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
@@ -146,9 +146,7 @@ let useBundles = true;
 
 let disposed = false;
 
-function frame() {
-  if (disposed) return;
-
+function render() {
   if (depthTexture.width !== canvas.width || depthTexture.height !== canvas.height) {
     depthTexture.destroy();
     depthTexture = root.device.createTexture({
@@ -187,12 +185,26 @@ function frame() {
 
   pass.end();
   encoder.submit();
+}
+
+function frame() {
+  if (disposed) return;
+
+  render();
 
   requestAnimationFrame(frame);
 }
 
 requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -214,6 +226,7 @@ export const controls = defineControls({
 export function onCleanup() {
   disposed = true;
   cleanupCamera();
+  autoResizer.detach();
   perlinCache.destroy();
   depthTexture.destroy();
   root.destroy();
diff --git a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.ts b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.ts
index 837c20896f..9d26c0a23a 100644
--- a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { mat4 } from 'wgpu-matrix';
 import { createCuboid, createPlane } from './geometry.ts';
 import {
@@ -280,11 +280,7 @@ function updateLightDirection(dir: d.v3f) {
   });
 }
 
-// Render loop
-let frameId: number | null = null;
 function render() {
-  frameId = requestAnimationFrame(render);
-
   const encoder = root['~unstable'].createCommandEncoder();
 
   const shadowPass = encoder.beginRenderPass({
@@ -322,23 +318,36 @@ function render() {
 
   encoder.submit();
 }
-frameId = requestAnimationFrame(render);
 
-const resizeObserver = new ResizeObserver(() => {
-  canvasTextures = createCanvasTextures();
+// Render loop
+let frameId: number | null = null;
+function frame() {
+  frameId = requestAnimationFrame(frame);
 
-  const newProjection = mat4.perspective(
-    Math.PI / 4,
-    canvas.width / canvas.height,
-    0.1,
-    100,
-    d.mat4x4f(),
-  );
-  cameraUniform.patch({
-    projection: newProjection,
-  });
+  render();
+}
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    canvasTextures = createCanvasTextures();
+
+    const newProjection = mat4.perspective(
+      Math.PI / 4,
+      canvas.width / canvas.height,
+      0.1,
+      100,
+      d.mat4x4f(),
+    );
+    cameraUniform.patch({
+      projection: newProjection,
+    });
+
+    render();
+  },
 });
-resizeObserver.observe(canvas);
 
 export const controls = defineControls({
   'camera X': {
@@ -435,6 +444,6 @@ export function onCleanup() {
   if (frameId !== null) {
     cancelAnimationFrame(frameId);
   }
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.ts b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.ts
index d06b2bc718..0a95ab4e94 100644
--- a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.ts
@@ -1,5 +1,5 @@
 import { perlin3d } from '@typegpu/noise';
-import { tgpu, d, std, type TgpuFragmentFn, type TgpuVertexFn } from 'typegpu';
+import { tgpu, common, d, std, type TgpuFragmentFn, type TgpuVertexFn } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 const Params = d.struct({
@@ -117,6 +117,10 @@ const basePipeline = root.pipe(perlinCache.inject()).createRenderPipeline({
 
 let pipeline = basePipeline;
 
+function render() {
+  pipeline.withColorAttachment({ view: context }).draw(3);
+}
+
 let frameId: number;
 function frame(timestamp: number) {
   paramsUniform.patch({
@@ -124,12 +128,24 @@ function frame(timestamp: number) {
     grainSeed: Math.floor(Math.random() * 100),
   });
 
-  pipeline.withColorAttachment({ view: context }).draw(3);
+  render();
 
   frameId = requestAnimationFrame(frame);
 }
 frameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 export const controls = defineControls({
   HDR: hdr && {
     initial: false,
@@ -225,5 +241,6 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
index d50df83d4b..3eda9a7c1e 100644
--- a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
@@ -1,4 +1,4 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" />
 
diff --git a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.ts b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.ts
index d1261b1e05..915da96cfc 100644
--- a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.ts
@@ -1,5 +1,5 @@
 import * as sdf from '@typegpu/sdf';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { fullScreenTriangle } from 'typegpu/common';
 import {
   DROP_Y,
@@ -414,18 +414,23 @@ const renderPipeline = root.createRenderPipeline({
   },
 });
 
-const resizeObserver = new ResizeObserver(() => {
-  mergedField.distance.destroy();
-  mergedField.info.destroy();
-  mergedField = createMergedFieldResources();
-  distanceView = mergedField.distance.createView(d.texture2d());
-  infoView = mergedField.info.createView(d.texture2d());
-  mergedFieldBindGroup = root.createBindGroup(mergedFieldLayout, {
-    distance: distanceView,
-    info: infoView,
-  });
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    mergedField.distance.destroy();
+    mergedField.info.destroy();
+    mergedField = createMergedFieldResources();
+    distanceView = mergedField.distance.createView(d.texture2d());
+    infoView = mergedField.info.createView(d.texture2d());
+    mergedFieldBindGroup = root.createBindGroup(mergedFieldLayout, {
+      distance: distanceView,
+      info: infoView,
+    });
+
+    render();
+  },
 });
-resizeObserver.observe(canvas);
 
 canvas.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false, signal });
 canvas.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false, signal });
@@ -528,6 +533,24 @@ function restart() {
   circleUniform.write(circleData);
 }
 
+function render() {
+  frameUniform.patch({
+    canvasAspect: canvas.width / canvas.height,
+  });
+
+  mergedFieldPipeline
+    .withColorAttachment({
+      distance: { view: distanceView },
+      info: { view: infoView },
+    })
+    .draw(3);
+
+  renderPipeline
+    .with(mergedFieldBindGroup)
+    .withColorAttachment({ view: context, clearValue: { r: 0, g: 0, b: 0, a: 1 } })
+    .draw(3);
+}
+
 let lastTime = 0;
 let animationFrameId = 0;
 
@@ -642,18 +665,7 @@ function frame(now: number) {
         },
   });
 
-  mergedFieldPipeline
-    .withColorAttachment({
-      distance: { view: distanceView },
-      info: { view: infoView },
-    })
-    .draw(3);
-
-  renderPipeline
-    .with(mergedFieldBindGroup)
-    .withColorAttachment({ view: context, clearValue: { r: 0, g: 0, b: 0, a: 1 } })
-    .draw(3);
-
+  render();
   animationFrameId = requestAnimationFrame(frame);
 }
 animationFrameId = requestAnimationFrame(frame);
@@ -676,6 +688,6 @@ export const controls = defineControls({
 export function onCleanup() {
   cleanupController.abort();
   cancelAnimationFrame(animationFrameId);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
index 9209e7c2fd..14e7a57baf 100644
--- a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
@@ -27,4 +27,4 @@ <h3 class="controls-header">Controls</h3>
   <p class="controls"><b>Right Mouse Button:</b> Rotate cubes</p>
   <p class="controls"><b>Scroll / Two-Finger Drag:</b> Zoom</p>
 </div>
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts
index 170eefbe43..acea55727e 100644
--- a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.ts
@@ -1,5 +1,5 @@
 import type { RenderFlag, TgpuBindGroup, TgpuBuffer, TgpuTexture, VertexFlag } from 'typegpu';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import * as m from 'wgpu-matrix';
 
 // Initialization
@@ -30,7 +30,7 @@ const vertexLayout = tgpu.vertexLayout(d.arrayOf(Vertex));
 
 // Scene Setup
 
-const aspect = canvas.clientWidth / canvas.clientHeight;
+const aspect = 1;
 const target = d.vec3f(0, 0, 0);
 const cameraInitialPos = d.vec4f(12, 5, 12, 1);
 
@@ -460,10 +460,18 @@ canvas.addEventListener(
   { passive: false },
 );
 
-const resizeObserver = new ResizeObserver(() => {
-  createDepthAndMsaaTextures();
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    createDepthAndMsaaTextures();
+  },
 });
-resizeObserver.observe(canvas);
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
@@ -471,7 +479,7 @@ export function onCleanup() {
   window.removeEventListener('mousemove', mouseMoveEventListener);
   window.removeEventListener('touchend', touchEndEventListener);
   window.removeEventListener('touchmove', touchMoveEventListener);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
index 1edc7df14f..57ee4dca06 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
@@ -1,4 +1,4 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 <p class="absolute px-2 py-1 rounded-xl top-2 mx-auto text-lg text-center text-white bg-black/50">
   Port of "Centrifuge 2" by XorDev (<a
     class="text-purple-300"
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.ts b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.ts
index f6bdfc3924..3bebf1ff21 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.ts
@@ -10,7 +10,7 @@
  * ```
  */
 
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 import { abs, atan2, cos, gt, length, normalize, select, sign, tanh } from 'typegpu/std';
 import { defineControls } from '../../common/defineControls.ts';
 
@@ -120,6 +120,8 @@ function draw(timestamp: number) {
 
 requestAnimationFrame(draw);
 
+const autoResizer = common.attachAutoResizer({ root, canvas });
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -178,6 +180,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   isRunning = false;
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
index 520ec6b0a1..d10c07071d 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
@@ -1,4 +1,4 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 <p class="absolute px-2 py-1 rounded-xl top-2 mx-auto text-lg text-center text-white bg-black/50">
   Port of "Runner" by XorDev (<a
     class="text-purple-300"
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts
index ee86a5a2c9..29286772eb 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.ts
@@ -12,7 +12,7 @@
  * ```
  */
 
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { abs, add, cos, max, min, mul, select, sign, sin, sub, tanh } from 'typegpu/std';
 import { defineControls } from '../../common/defineControls.ts';
 import { Camera, setupFirstPersonCamera } from '../../common/setup-first-person-camera.ts';
@@ -172,6 +172,11 @@ function draw() {
 
 requestAnimationFrame(draw);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -210,6 +215,7 @@ export const controls = defineControls({
 export function onCleanup() {
   isRunning = false;
   cleanupCamera();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
+++ b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.ts b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.ts
index dbda082b81..4989b578e6 100644
--- a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.ts
@@ -33,7 +33,17 @@ function draw(spanXValue: number, spanYValue: number) {
 let spanX = 10;
 let spanY = 10;
 
-draw(spanX, spanY);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    draw(spanX, spanY);
+  },
+});
 
 // #region Example controls and cleanup
 
@@ -62,6 +72,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
+++ b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
index 7e7b5597bb..b100c31ba2 100644
--- a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
@@ -180,12 +180,28 @@ canvas.addEventListener('touchmove', handleTouchMove, { passive: true });
 canvas.addEventListener('touchstart', handleTouchStart, { passive: true });
 canvas.addEventListener('click', handleClick);
 
-let frameId: number;
 function render() {
-  frameId = requestAnimationFrame(render);
   pipeline.withColorAttachment({ view: context }).draw(3);
 }
-frameId = requestAnimationFrame(render);
+
+let frameId: number;
+function frame() {
+  frameId = requestAnimationFrame(frame);
+  render();
+}
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export const controls = defineControls({
   'Rectangle dims': {
@@ -305,5 +321,6 @@ export function onCleanup() {
     cancelAnimationFrame(frameId);
   }
   window.removeEventListener('mousemove', handleMouseMove);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
index e14a9c47e5..dc3b398f45 100644
--- a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
+++ b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
@@ -1,4 +1,4 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 
 <style>
   #attribution {
diff --git a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.ts b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.ts
index e44b6a74e2..2124a1ac9e 100644
--- a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.ts
@@ -274,12 +274,6 @@ const pipelineConfig = {
 const lbsPipeline = root.createRenderPipeline({ vertex, ...pipelineConfig });
 const dqsPipeline = root.createRenderPipeline({ vertex: dqsVertex, ...pipelineConfig });
 
-const resizeObserver = new ResizeObserver(() => {
-  depthTexture = createDepthTexture();
-  msaaTexture = createMsaaTexture();
-});
-resizeObserver.observe(canvas);
-
 const state = {
   selectedVariantId,
   isPlaying: true,
@@ -518,6 +512,15 @@ function render(frameTimeMs: number) {
 let animationId: number | undefined;
 animationId = requestAnimationFrame(render);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    depthTexture = createDepthTexture();
+    msaaTexture = createMsaaTexture();
+  },
+});
+
 export const controls = defineControls({
   Animation: {
     initial: toLabel(selectedVariant.id),
@@ -552,7 +555,7 @@ export function onCleanup() {
   if (animationId !== undefined) {
     cancelAnimationFrame(animationId);
   }
-  resizeObserver.disconnect();
   cleanupCamera();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/oklab/index.html b/apps/typegpu-docs/src/examples/simple/oklab/index.html
index 67a0d1e431..e4aea34104 100644
--- a/apps/typegpu-docs/src/examples/simple/oklab/index.html
+++ b/apps/typegpu-docs/src/examples/simple/oklab/index.html
@@ -26,6 +26,8 @@
     font-size: small;
   }
 </style>
-<canvas></canvas>
-<div id="css-probe"></div>
+<div class="relative w-full h-full">
+  <canvas class="w-full h-full object-contain" />
+  <div id="css-probe"></div>
+</div>
 <div id="probe-position"></div>
diff --git a/apps/typegpu-docs/src/examples/simple/oklab/index.ts b/apps/typegpu-docs/src/examples/simple/oklab/index.ts
index 9150cccb87..310d04ea24 100644
--- a/apps/typegpu-docs/src/examples/simple/oklab/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/oklab/index.ts
@@ -27,8 +27,15 @@ document.addEventListener(
   'mousemove',
   (ev) => {
     const rect = canvas.getBoundingClientRect();
-    cssProbePosition.x = (ev.clientX - rect.x) / rect.width;
-    cssProbePosition.y = 1 - (ev.clientY - rect.y) / rect.height;
+
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
+    const size = Math.min(rect.width, rect.height);
+    const squareLeft = centerX - size / 2;
+    const squareTop = centerY - size / 2;
+
+    cssProbePosition.x = std.saturate((ev.clientX - squareLeft) / size);
+    cssProbePosition.y = std.saturate(1 - (ev.clientY - squareTop) / size);
     draw();
   },
   {
@@ -129,8 +136,16 @@ function draw() {
   const chroma = pos.x;
   const a = chroma * Math.cos(uniformsValue.hue);
   const b = chroma * Math.sin(uniformsValue.hue);
-  cssProbe.style.setProperty('--x', `${cssProbePosition.x * 100}%`);
-  cssProbe.style.setProperty('--y', `${cssProbePosition.y * 100}%`);
+
+  const rect = canvas.getBoundingClientRect();
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const size = Math.min(rect.width, rect.height);
+  const squareLeft = centerX - size / 2;
+  const squareTop = centerY - size / 2;
+
+  cssProbe.style.setProperty('--x', `${squareLeft - rect.left + cssProbePosition.x * size}px`);
+  cssProbe.style.setProperty('--y', `${squareTop - rect.top + cssProbePosition.y * size}px`);
   canvas.parentElement?.style.setProperty('--l', `${lightness}`);
   canvas.parentElement?.style.setProperty('--a', `${a}`);
   canvas.parentElement?.style.setProperty('--b', `${b}`);
@@ -143,9 +158,17 @@ function draw() {
   pipeline.withColorAttachment({ view: context }).draw(3);
 }
 
-setTimeout(() => {
-  draw();
-}, 100);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    draw();
+  },
+});
 
 // #region Example controls and cleanup
 
@@ -211,6 +234,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
   cleanupController.abort();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.ts b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.ts
index d895f19e8f..4d82074496 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.ts
@@ -1,6 +1,6 @@
 import { perlin3d, randf } from '@typegpu/noise';
 import * as sdf from '@typegpu/sdf';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 import { createBackgroundCubemap } from './background.ts';
 import { GRID_SIZE, halton, LIGHT_COUNT, MAX_DIST, MAX_STEPS, SURF_DIST } from './constants.ts';
@@ -19,7 +19,7 @@ const perlinCache = perlin3d.staticCache({
   size: d.vec3u(32, 32, 32),
 });
 
-const [width, height] = [canvas.width / 1.4, canvas.height / 1.4];
+const resolutionScale = 1 / 1.4;
 
 const Camera = d.struct({ position: d.vec4f, viewProjectionInverse: d.mat4x4f });
 const cameraUniform = root.createUniform(Camera);
@@ -113,7 +113,12 @@ const envMapBindGroup = root.createBindGroup(envMapLayout, {
   }),
 });
 
-const postProcessing = createPostProcessingPipelines(root, width, height, initialBloom);
+const postProcessing = createPostProcessingPipelines(
+  root,
+  canvas.width * resolutionScale,
+  canvas.height * resolutionScale,
+  initialBloom,
+);
 
 const cameraResult = setupOrbitCamera(
   canvas,
@@ -138,7 +143,7 @@ const rayMarchPipeline = root
   .createGuardedComputePipeline((x, y) => {
     'use gpu';
     randf.seed2(d.vec2f(d.f32(x), d.f32(y)).add(timeUniform.$));
-    const textureSize = std.textureDimensions(postProcessing.result.writeView.$);
+    const textureSize = std.textureDimensions(postProcessing.$.result);
     const uv = d.vec2f(x, y).add(0.5).div(d.vec2f(textureSize));
     const ray = getRayForUV(uv);
 
@@ -186,7 +191,7 @@ const rayMarchPipeline = root
       finalColor = std.mix(fogColor, sceneColor, fog);
     }
 
-    std.textureStore(postProcessing.result.writeView.$, d.vec2u(x, y), d.vec4f(finalColor, 1));
+    std.textureStore(postProcessing.$.result, d.vec2u(x, y), d.vec4f(finalColor, 1));
   });
 
 let animationFrame: number;
@@ -196,33 +201,48 @@ let accumulatedTime = 0;
 let lastTimestamp = 0;
 let isExtendedRipplesEnabled = false;
 
-function run(timestamp: number) {
-  const deltaTime = lastTimestamp === 0 ? 0 : (timestamp - lastTimestamp) / 1000;
-  lastTimestamp = timestamp;
-  const maxTime = isExtendedRipplesEnabled ? 62 : 28;
-  accumulatedTime = Math.min(maxTime, Math.max(0, accumulatedTime + deltaTime * timeScale));
-  timeUniform.write(accumulatedTime);
-
-  const jitterX = (halton(frameIndex % 16, 2) - 0.5) / width;
-  const jitterY = (halton(frameIndex % 16, 3) - 0.5) / height;
+function render() {
+  const jitterX = (halton(frameIndex % 16, 2) - 0.5) / postProcessing.width;
+  const jitterY = (halton(frameIndex % 16, 3) - 0.5) / postProcessing.height;
   jitterUniform.write(d.vec2f(jitterX, jitterY));
   frameIndex++;
 
   sdfPrecalcPipeline.dispatchThreads(GRID_SIZE / 2, GRID_SIZE / 2, GRID_SIZE / 2);
 
-  rayMarchPipeline.with(envMapBindGroup).with(sdfBindGroup).dispatchThreads(width, height);
+  rayMarchPipeline
+    .with(envMapBindGroup)
+    .with(sdfBindGroup)
+    .with(postProcessing.userGroup)
+    .dispatchThreads(postProcessing.width, postProcessing.height);
 
   postProcessing.runTaa();
-
   postProcessing.runBloom();
-
   postProcessing.render(context);
+}
+
+function run(timestamp: number) {
+  const deltaTime = lastTimestamp === 0 ? 0 : (timestamp - lastTimestamp) / 1000;
+  lastTimestamp = timestamp;
+  const maxTime = isExtendedRipplesEnabled ? 62 : 28;
+  accumulatedTime = Math.min(maxTime, Math.max(0, accumulatedTime + deltaTime * timeScale));
+  timeUniform.write(accumulatedTime);
+
+  render();
 
   animationFrame = requestAnimationFrame(run);
 }
 
 animationFrame = requestAnimationFrame(run);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    postProcessing.resize(canvas.width * resolutionScale, canvas.height * resolutionScale);
+    render();
+  },
+});
+
 export const controls = defineControls({
   metallic: {
     min: 0,
@@ -299,5 +319,6 @@ export const controls = defineControls({
 export function onCleanup() {
   cancelAnimationFrame(animationFrame);
   cameraResult.cleanupCamera();
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts b/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
index da14cf8b3a..3f975f20ec 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
@@ -6,6 +6,10 @@ import { BloomParams } from './types.ts';
 
 export const bloomParamsAccess = tgpu.accessor(BloomParams);
 
+const userLayout = tgpu.bindGroupLayout({
+  resultTexture: { storageTexture: d.textureStorage2d('rgba16float') },
+});
+
 const taaResolveLayout = tgpu.bindGroupLayout({
   currentTexture: { texture: d.texture2d() },
   historyTexture: { texture: d.texture2d() },
@@ -41,19 +45,11 @@ function createProcessingTexture(root: TgpuRoot, width: number, height: number)
 
 export function createPostProcessingPipelines(
   root: TgpuRoot,
-  width: number,
-  height: number,
+  initialWidth: number,
+  initialHeight: number,
   initialBloom: d.Infer<typeof BloomParams>,
 ) {
   const bloomUniform = root.createUniform(BloomParams, initialBloom);
-  const bloomWidth = Math.max(1, Math.floor(width / 2));
-  const bloomHeight = Math.max(1, Math.floor(height / 2));
-
-  const result = createProcessingTexture(root, width, height);
-  const bloom = createProcessingTexture(root, bloomWidth, bloomHeight);
-  const blurTemp = createProcessingTexture(root, bloomWidth, bloomHeight);
-  const history = createProcessingTexture(root, width, height);
-  const taaOutput = createProcessingTexture(root, width, height);
 
   const sampler = root.createSampler({
     magFilter: 'linear',
@@ -63,6 +59,7 @@ export function createPostProcessingPipelines(
   const taaResolve = root.createGuardedComputePipeline((x, y) => {
     'use gpu';
     const coord = d.vec2i(d.i32(x), d.i32(y));
+    const dims = std.textureDimensions(taaResolveLayout.$.currentTexture);
     const current = std.textureLoad(taaResolveLayout.$.currentTexture, coord, 0);
     const historyColor = std.textureLoad(taaResolveLayout.$.historyTexture, coord, 0);
 
@@ -75,7 +72,7 @@ export function createPostProcessingPipelines(
         const clampedCoord = std.clamp(
           sampleCoord,
           d.vec2i(0, 0),
-          d.vec2i(d.i32(width) - 1, d.i32(height) - 1),
+          d.vec2i(d.i32(dims.x) - 1, d.i32(dims.y) - 1),
         );
         const neighbor = std.textureLoad(taaResolveLayout.$.currentTexture, clampedCoord, 0).rgb;
         minColor = std.min(minColor, neighbor);
@@ -144,56 +141,109 @@ export function createPostProcessingPipelines(
     fragment: fragmentMain,
   });
 
-  const taaBindGroup = root.createBindGroup(taaResolveLayout, {
-    currentTexture: result.sampleView,
-    historyTexture: history.sampleView,
-    outputTexture: taaOutput.writeView,
-  });
-
-  const copyBindGroup = root.createBindGroup(processLayout, {
-    inputTexture: taaOutput.sampleView,
-    outputTexture: history.writeView,
-    sampler,
-  });
-
-  const extractBindGroup = root.createBindGroup(processLayout, {
-    inputTexture: result.sampleView,
-    outputTexture: bloom.writeView,
-    sampler,
-  });
-
-  const blurHorizontalBindGroup = root.createBindGroup(processLayout, {
-    inputTexture: bloom.sampleView,
-    outputTexture: blurTemp.writeView,
-    sampler,
-  });
-
-  const blurVerticalBindGroup = root.createBindGroup(processLayout, {
-    inputTexture: blurTemp.sampleView,
-    outputTexture: bloom.writeView,
-    sampler,
-  });
-
-  const compositeBindGroup = root.createBindGroup(compositeLayout, {
-    colorTexture: taaOutput.sampleView,
-    bloomTexture: bloom.sampleView,
-    sampler,
-  });
+  let width = initialWidth;
+  let height = initialHeight;
+  function createResolutionDependantResources() {
+    const bloomWidth = Math.max(1, Math.floor(width / 2));
+    const bloomHeight = Math.max(1, Math.floor(height / 2));
+
+    const result = createProcessingTexture(root, width, height);
+    const bloom = createProcessingTexture(root, bloomWidth, bloomHeight);
+    const blurTemp = createProcessingTexture(root, bloomWidth, bloomHeight);
+    const history = createProcessingTexture(root, width, height);
+    const taaOutput = createProcessingTexture(root, width, height);
+
+    return {
+      bloomWidth,
+      bloomHeight,
+
+      taaBindGroup: root.createBindGroup(taaResolveLayout, {
+        currentTexture: result.sampleView,
+        historyTexture: history.sampleView,
+        outputTexture: taaOutput.writeView,
+      }),
+
+      copyBindGroup: root.createBindGroup(processLayout, {
+        inputTexture: taaOutput.sampleView,
+        outputTexture: history.writeView,
+        sampler,
+      }),
+
+      extractBindGroup: root.createBindGroup(processLayout, {
+        inputTexture: result.sampleView,
+        outputTexture: bloom.writeView,
+        sampler,
+      }),
+
+      blurHorizontalBindGroup: root.createBindGroup(processLayout, {
+        inputTexture: bloom.sampleView,
+        outputTexture: blurTemp.writeView,
+        sampler,
+      }),
+
+      blurVerticalBindGroup: root.createBindGroup(processLayout, {
+        inputTexture: blurTemp.sampleView,
+        outputTexture: bloom.writeView,
+        sampler,
+      }),
+
+      compositeBindGroup: root.createBindGroup(compositeLayout, {
+        colorTexture: taaOutput.sampleView,
+        bloomTexture: bloom.sampleView,
+        sampler,
+      }),
+
+      userBindGroup: root.createBindGroup(userLayout, {
+        resultTexture: result.writeView,
+      }),
+    };
+  }
+
+  let resources = createResolutionDependantResources();
 
   return {
-    result,
     bloomUniform,
+    get $() {
+      return {
+        result: userLayout.$.resultTexture,
+      };
+    },
+    get userGroup() {
+      return resources.userBindGroup;
+    },
+    get width() {
+      return width;
+    },
+    get height() {
+      return height;
+    },
+    resize: (newWidth: number, newHeight: number) => {
+      if (newWidth !== width || newHeight !== height) {
+        width = newWidth;
+        height = newHeight;
+        resources = createResolutionDependantResources();
+      }
+    },
     runTaa: () => {
-      taaResolve.with(taaBindGroup).dispatchThreads(width, height);
-      copyToHistory.with(copyBindGroup).dispatchThreads(width, height);
+      taaResolve.with(resources.taaBindGroup).dispatchThreads(width, height);
+      copyToHistory.with(resources.copyBindGroup).dispatchThreads(width, height);
     },
     runBloom: () => {
-      extractBright.with(extractBindGroup).dispatchThreads(bloomWidth, bloomHeight);
-      blurHorizontal.with(blurHorizontalBindGroup).dispatchThreads(bloomWidth, bloomHeight);
-      blurVertical.with(blurVerticalBindGroup).dispatchThreads(bloomWidth, bloomHeight);
+      extractBright
+        .with(resources.extractBindGroup)
+        .dispatchThreads(resources.bloomWidth, resources.bloomHeight);
+      blurHorizontal
+        .with(resources.blurHorizontalBindGroup)
+        .dispatchThreads(resources.bloomWidth, resources.bloomHeight);
+      blurVertical
+        .with(resources.blurVerticalBindGroup)
+        .dispatchThreads(resources.bloomWidth, resources.bloomHeight);
     },
     render: (targetView: ColorAttachment['view']) => {
-      renderPipeline.with(compositeBindGroup).withColorAttachment({ view: targetView }).draw(3);
+      renderPipeline
+        .with(resources.compositeBindGroup)
+        .withColorAttachment({ view: targetView })
+        .draw(3);
     },
   };
 }
diff --git a/apps/typegpu-docs/src/examples/simple/square/index.html b/apps/typegpu-docs/src/examples/simple/square/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simple/square/index.html
+++ b/apps/typegpu-docs/src/examples/simple/square/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simple/square/index.ts b/apps/typegpu-docs/src/examples/simple/square/index.ts
index 4d94260076..91598b6b75 100644
--- a/apps/typegpu-docs/src/examples/simple/square/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/square/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 const root = await tgpu.init();
@@ -61,7 +61,18 @@ const pipeline = root
 function render() {
   pipeline.with(vertexLayout, colorBuffer).withColorAttachment({ view: context }).drawIndexed(6);
 }
-render();
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 // #region Example controls & Cleanup
 
@@ -92,6 +103,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 // #endregion
diff --git a/apps/typegpu-docs/src/examples/simple/stencil/index.html b/apps/typegpu-docs/src/examples/simple/stencil/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simple/stencil/index.html
+++ b/apps/typegpu-docs/src/examples/simple/stencil/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simple/stencil/index.ts b/apps/typegpu-docs/src/examples/simple/stencil/index.ts
index 7860359473..02f65c589a 100644
--- a/apps/typegpu-docs/src/examples/simple/stencil/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/stencil/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d } from 'typegpu';
+import { tgpu, common, d } from 'typegpu';
 
 const root = await tgpu.init();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -103,30 +103,39 @@ function frame(timestamp: number) {
 }
 frameId = requestAnimationFrame(frame);
 
-const resizeObserver = new ResizeObserver(() => {
-  stencilTexture = root
-    .createTexture({
-      size: [canvas.width, canvas.height],
-      format: 'stencil8',
-    })
-    .$usage('render');
-
-  rotationUniform.write(d.mat2x2f.identity());
-
-  writeStencilPipeline
-    .withDepthStencilAttachment({
-      view: stencilTexture,
-      stencilClearValue: 0,
-      stencilLoadOp: 'clear',
-      stencilStoreOp: 'store',
-    })
-    .draw(3);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    stencilTexture = root
+      .createTexture({
+        size: [canvas.width, canvas.height],
+        format: 'stencil8',
+      })
+      .$usage('render');
+
+    rotationUniform.write(d.mat2x2f.identity());
+
+    writeStencilPipeline
+      .withDepthStencilAttachment({
+        view: stencilTexture,
+        stencilClearValue: 0,
+        stencilLoadOp: 'clear',
+        stencilStoreOp: 'store',
+      })
+      .draw(3);
+  },
 });
-resizeObserver.observe(canvas);
 
 export function onCleanup() {
   if (frameId) {
     cancelAnimationFrame(frameId);
   }
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/triangle/index.html b/apps/typegpu-docs/src/examples/simple/triangle/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle/index.html
+++ b/apps/typegpu-docs/src/examples/simple/triangle/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simple/triangle/index.ts b/apps/typegpu-docs/src/examples/simple/triangle/index.ts
index f785d16d01..b989c4a89a 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/triangle/index.ts
@@ -1,22 +1,22 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 
 // Constants and helper functions
 
 const purple = d.vec4f(0.769, 0.392, 1, 1);
 const blue = d.vec4f(0.114, 0.447, 0.941, 1);
 
-const getGradientColor = (ratio: number) => {
+function getGradientColor(ratio: number) {
   'use gpu';
   return std.mix(purple, blue, ratio);
-};
+}
 
-const pos = tgpu.const(d.arrayOf(d.vec2f, 3), [
+const pos = tgpu.const(d.arrayOf(d.vec2f), [
   d.vec2f(0.0, 0.5),
   d.vec2f(-0.5, -0.5),
   d.vec2f(0.5, -0.5),
 ]);
 
-const uv = tgpu.const(d.arrayOf(d.vec2f, 3), [
+const uv = tgpu.const(d.arrayOf(d.vec2f), [
   d.vec2f(0.5, 1.0),
   d.vec2f(0.0, 0.0),
   d.vec2f(1.0, 0.0),
@@ -39,18 +39,32 @@ const pipeline = root.createRenderPipeline({
   },
 });
 
-// Setting up the canvas and drawing to it
+// Setting up the canvas
 
+const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({
-  canvas: document.querySelector('canvas') as HTMLCanvasElement,
+  canvas,
   alphaMode: 'premultiplied',
 });
 
-pipeline.withColorAttachment({ view: context }).draw(3);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    // Drawing once, and then each time the canvas resizes
+    pipeline.withColorAttachment({ view: context }).draw(3);
+  },
+});
 
 // #region Cleanup
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simple/vaporrave/index.html b/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
+++ b/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/simple/vaporrave/index.ts b/apps/typegpu-docs/src/examples/simple/vaporrave/index.ts
index ecd73f235b..8639005c14 100644
--- a/apps/typegpu-docs/src/examples/simple/vaporrave/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/vaporrave/index.ts
@@ -1,4 +1,4 @@
-import { tgpu } from 'typegpu';
+import { tgpu, common } from 'typegpu';
 
 import * as c from './constants.ts';
 import { defineControls } from '../../common/defineControls.ts';
@@ -9,10 +9,19 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const scene = await setupScene(root, context);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    scene.onResize();
+  },
+});
+
 // #region Example controls and cleanup
 
 export function onCleanup() {
   scene.onCleanup();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simple/vaporrave/scene.ts b/apps/typegpu-docs/src/examples/simple/vaporrave/scene.ts
index 034966f9d5..53e78fbb6d 100644
--- a/apps/typegpu-docs/src/examples/simple/vaporrave/scene.ts
+++ b/apps/typegpu-docs/src/examples/simple/vaporrave/scene.ts
@@ -138,6 +138,14 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
       fragment: fragmentMain,
     });
 
+  function render() {
+    floorAngleUniform.write(floorAngle);
+    sphereAngleUniform.write(sphereAngle);
+    resolutionUniform.write(d.vec2f(canvas.width, canvas.height));
+
+    renderPipeline.withColorAttachment({ view: context }).draw(3);
+  }
+
   let animationFrame: number;
   let floorAngle = 0;
   let sphereAngle = 0;
@@ -152,11 +160,7 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
     sphereAngle += delta * sphereSpeed;
     sphereAngle %= c.NUM_CYCLES * Math.PI * 2;
 
-    floorAngleUniform.write(floorAngle);
-    sphereAngleUniform.write(sphereAngle);
-    resolutionUniform.write(d.vec2f(canvas.width, canvas.height));
-
-    renderPipeline.withColorAttachment({ view: context }).draw(3);
+    render();
 
     animationFrame = requestAnimationFrame(run);
   }
@@ -185,6 +189,9 @@ export async function setupScene(root: TgpuRoot, context: GPUCanvasContext) {
           fragment: fragmentMain,
         });
     },
+    onResize() {
+      render();
+    },
     onCleanup() {
       cancelAnimationFrame(animationFrame);
     },
diff --git a/apps/typegpu-docs/src/examples/simulation/boids/index.html b/apps/typegpu-docs/src/examples/simulation/boids/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/boids/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/boids/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/boids/index.ts b/apps/typegpu-docs/src/examples/simulation/boids/index.ts
index 996198b0ce..af2ca422d2 100644
--- a/apps/typegpu-docs/src/examples/simulation/boids/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/boids/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 const triangleAmount = 1000;
@@ -222,13 +222,8 @@ const computeBindGroups = [0, 1].map((idx) =>
 );
 
 let even = false;
-let animationFrameId: number;
-
-function frame() {
-  even = !even;
-
-  simulatePipeline.with(computeBindGroups[even ? 0 : 1]).dispatchThreads(triangleAmount);
 
+function render() {
   renderPipeline
     .withColorAttachment({
       view: context,
@@ -236,12 +231,34 @@ function frame() {
     })
     .with(instanceLayout, trianglePosBuffers[even ? 1 : 0])
     .draw(3, triangleAmount);
+}
+
+let animationFrameId: number;
+
+function frame() {
+  even = !even;
+
+  simulatePipeline.with(computeBindGroups[even ? 0 : 1]).dispatchThreads(triangleAmount);
+
+  render();
 
   animationFrameId = requestAnimationFrame(frame);
 }
 
 animationFrameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -288,6 +305,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/confetti/index.html b/apps/typegpu-docs/src/examples/simulation/confetti/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/simulation/confetti/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/confetti/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/simulation/confetti/index.ts b/apps/typegpu-docs/src/examples/simulation/confetti/index.ts
index 6655c8690e..919f837274 100644
--- a/apps/typegpu-docs/src/examples/simulation/confetti/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/confetti/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 // constants
@@ -151,6 +151,8 @@ const runner = (timestamp: number) => {
 
 animationFrameId = requestAnimationFrame(runner);
 
+const autoResizer = common.attachAutoResizer({ root, canvas });
+
 // example controls and cleanup
 
 export const controls = defineControls({
@@ -161,5 +163,6 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.ts b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.ts
index 0f2651ac91..cbc22fdd32 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.ts
@@ -1,5 +1,5 @@
 import { randf } from '@typegpu/noise';
-import { tgpu, d, std, type TgpuMutable, type TgpuReadonly } from 'typegpu';
+import { tgpu, common, d, std, type TgpuMutable, type TgpuReadonly } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 const MAX_GRID_SIZE = 1024;
@@ -537,6 +537,18 @@ const runner = (timestamp: number) => {
 
 animationFrameId = requestAnimationFrame(runner);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    primary.render();
+  },
+});
+
 export const controls = defineControls({
   'source intensity': {
     initial: sourceIntensity,
@@ -598,5 +610,6 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
index 45add979d1..e17e6667ca 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
@@ -625,6 +625,18 @@ function run(timestamp: number) {
 }
 animationFrame = requestAnimationFrame(run);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    drawFrame();
+  },
+});
+
 export const controls = defineControls({
   size: {
     initial: 32,
@@ -694,6 +706,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(animationFrame);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.ts b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.ts
index 096fd5a21c..7fa7a883a5 100644
--- a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.ts
@@ -345,6 +345,16 @@ const stepOnce = (timestamp: number) => {
     );
 };
 
+function render() {
+  const chosenDisplayPipeline =
+    chosenPipeline === 'bitpacked' ? bitpackedDisplayPipeline : displayPipeline;
+
+  chosenDisplayPipeline
+    .withColorAttachment({ view: context })
+    .with(displayBindGroups[1 - even])
+    .draw(3);
+}
+
 let frameId: number;
 
 function frame(timestamp: number) {
@@ -390,18 +400,24 @@ function frame(timestamp: number) {
     }
   }
 
-  const chosenDisplayPipeline =
-    chosenPipeline === 'bitpacked' ? bitpackedDisplayPipeline : displayPipeline;
-
-  chosenDisplayPipeline
-    .withColorAttachment({ view: context })
-    .with(displayBindGroups[1 - even])
-    .draw(3);
+  render();
 
   frameId = requestAnimationFrame(frame);
 }
 frameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -506,6 +522,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/game-of-life/input.ts b/apps/typegpu-docs/src/examples/simulation/game-of-life/input.ts
index bc803b4395..a7d92b175f 100644
--- a/apps/typegpu-docs/src/examples/simulation/game-of-life/input.ts
+++ b/apps/typegpu-docs/src/examples/simulation/game-of-life/input.ts
@@ -1,3 +1,5 @@
+import { std } from 'typegpu';
+
 export interface InputState {
   drawPos: { x: number; y: number } | null;
   lastDrawPos: { x: number; y: number } | null;
@@ -23,10 +25,17 @@ export function setupInput(canvas: HTMLCanvasElement): InputState {
     y: (sy - 0.5) / state.zoomLevel + state.zoomCenter.y,
   });
   const toScreen = (clientX: number, clientY: number) => {
-    const r = canvas.getBoundingClientRect();
+    const rect = canvas.getBoundingClientRect();
+
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
+    const size = Math.min(rect.width, rect.height);
+    const squareLeft = centerX - size / 2;
+    const squareTop = centerY - size / 2;
+
     return {
-      x: Math.min(1, Math.max(0, (clientX - r.left) / r.width)),
-      y: Math.min(1, Math.max(0, (clientY - r.top) / r.height)),
+      x: std.saturate((clientX - squareLeft) / size),
+      y: std.saturate((clientY - squareTop) / size),
     };
   };
 
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/index.html b/apps/typegpu-docs/src/examples/simulation/gravity/index.html
index c83e0d8622..9f7e2b8386 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/index.html
@@ -38,4 +38,4 @@ <h3 class="controls-header">Controls (click to dismiss)</h3>
     under CC BY 4.0
   </p>
 </div>
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/index.ts b/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
index 7b856893fb..561e99ec52 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, type StorageFlag, type TgpuBindGroup, type TgpuBuffer } from 'typegpu';
+import { tgpu, common, d, type StorageFlag, type TgpuBindGroup, type TgpuBuffer } from 'typegpu';
 import { computeCollisionsShader, computeGravityShader } from './compute.ts';
 import {
   collisionBehaviors,
@@ -251,15 +251,18 @@ export const controls = defineControls({
   },
 });
 
-const resizeObserver = new ResizeObserver(() => {
-  depthTexture.destroy();
-  depthTexture = root.device.createTexture({
-    size: [canvas.width, canvas.height, 1],
-    format: 'depth24plus',
-    usage: GPUTextureUsage.RENDER_ATTACHMENT,
-  });
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    depthTexture.destroy();
+    depthTexture = root.device.createTexture({
+      size: [canvas.width, canvas.height, 1],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+  },
 });
-resizeObserver.observe(canvas);
 
 function hideHelp() {
   const helpElem = document.getElementById('help');
@@ -274,7 +277,7 @@ for (const eventName of ['click', 'keydown', 'wheel', 'touchstart']) {
 export function onCleanup() {
   destroyed = true;
   cleanupCamera();
-  resizeObserver.unobserve(canvas);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts
index 7d821abc59..9e7e82a5ec 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.ts
@@ -43,7 +43,7 @@ const Camera = d.struct({
 const cameraTarget = resolution.div(2);
 const cameraUp = d.vec3f(0, 1, 0);
 const fov = (CAMERA_FOV_DEGREES * Math.PI) / 180;
-const aspect = canvas.width / canvas.height;
+const aspect = 1;
 const near = 0.1;
 const far = 1000.0;
 
@@ -439,9 +439,16 @@ const renderBindGroups = [0, 1].map((i) =>
   }),
 );
 
-let lastTime: number | null = null;
 let currentTexture = 0;
 
+function render() {
+  renderPipeline
+    .withColorAttachment({ view: context })
+    .with(renderBindGroups[1 - currentTexture])
+    .draw(3);
+}
+
+let lastTime: number | null = null;
 function frame(timestamp: number) {
   const deltaTime = Math.min(lastTime !== null ? (timestamp - lastTime) / 1000 : 0, 0.1);
   lastTime = timestamp;
@@ -460,10 +467,7 @@ function frame(timestamp: number) {
     .with(bindGroups[currentTexture])
     .dispatchWorkgroups(Math.ceil(NUM_AGENTS / AGENT_WORKGROUP_SIZE));
 
-  renderPipeline
-    .withColorAttachment({ view: context })
-    .with(renderBindGroups[1 - currentTexture])
-    .draw(3);
+  render();
 
   currentTexture = 1 - currentTexture;
 
@@ -471,6 +475,18 @@ function frame(timestamp: number) {
 }
 requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 let isDragging = false;
@@ -620,6 +636,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.ts b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.ts
index 46a53589d0..b386be3094 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.ts
@@ -1,5 +1,5 @@
 import { randf } from '@typegpu/noise';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { defineControls } from '../../common/defineControls.ts';
 
 const root = await tgpu.init();
@@ -7,7 +7,7 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas, alphaMode: 'premultiplied' });
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 
-const resolution = d.vec2f(canvas.width, canvas.height);
+const resolution = d.vec2f(1024, 1024);
 
 const Agent = d.struct({
   position: d.vec2f,
@@ -217,9 +217,16 @@ const renderBindGroups = [0, 1].map((i) =>
   }),
 );
 
-let lastTime: number | null = null;
 let currentTexture = 0;
 
+function render() {
+  renderPipeline
+    .withColorAttachment({ view: context })
+    .with(renderBindGroups[1 - currentTexture])
+    .draw(3);
+}
+
+let lastTime: number | null = null;
 function frame(now: number) {
   const deltaTimeValue = Math.min(lastTime !== null ? (now - lastTime) / 1000 : 0, 0.1);
   lastTime = now;
@@ -232,10 +239,7 @@ function frame(now: number) {
 
   computePipeline.with(bindGroups[currentTexture]).dispatchWorkgroups(Math.ceil(NUM_AGENTS / 64));
 
-  renderPipeline
-    .withColorAttachment({ view: context })
-    .with(renderBindGroups[1 - currentTexture])
-    .draw(3);
+  render();
 
   currentTexture = 1 - currentTexture;
 
@@ -243,6 +247,18 @@ function frame(now: number) {
 }
 requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 // #region Example controls and cleanup
 
 export const controls = defineControls({
@@ -294,6 +310,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
index de6d9fbb40..9670960a81 100644
--- a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
@@ -27,4 +27,4 @@
   <h3 class="controls-header">Controls (click to dismiss)</h3>
   <p class="controls">Drag to stir the fluid.</p>
 </div>
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts
index 165fac62ee..211d90dd06 100644
--- a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.ts
@@ -1,5 +1,6 @@
 import {
   tgpu,
+  common,
   d,
   type TgpuBindGroup,
   type TgpuComputeFn,
@@ -31,9 +32,18 @@ function createComputePipeline(fn: TgpuComputeFn) {
   return root.createComputePipeline({ compute: fn });
 }
 
-function toGrid(x: number, y: number): [number, number] {
-  const gx = Math.floor((x / canvas.width) * p.SIM_N);
-  const gy = Math.floor(((canvas.height - y) / canvas.height) * p.SIM_N);
+function toGrid(clientX: number, clientY: number): [number, number] {
+  const rect = canvas.getBoundingClientRect();
+
+  // Taking into account the square aspect ratio
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const size = Math.min(rect.width, rect.height);
+  const squareLeft = centerX - size / 2;
+  const squareTop = centerY - size / 2;
+
+  const gx = Math.floor(((clientX - squareLeft) / size) * p.SIM_N);
+  const gy = Math.floor((1 - (clientY - squareTop) / size) * p.SIM_N);
   return [gx, gy];
 }
 
@@ -264,10 +274,39 @@ const renderBindGroups = {
   ],
 };
 
+function render() {
+  let renderBG: TgpuBindGroup<{
+    result: { texture: d.WgslTexture2d<d.F32> };
+    background: { texture: d.WgslTexture2d<d.F32> };
+  }>;
+  let pipeline: TgpuRenderPipeline<d.Vec4f>;
+
+  switch (p.params.displayMode) {
+    case 'ink':
+      renderBG = renderBindGroups.ink[inkBuffer.currentIndex];
+      pipeline = renderPipelineInk;
+      break;
+    case 'image':
+      renderBG = renderBindGroups.ink[inkBuffer.currentIndex];
+      pipeline = renderPipelineImage;
+      break;
+    case 'velocity':
+      renderBG = renderBindGroups.velocity[velBuffer.currentIndex];
+      pipeline = renderPipelineVel;
+      break;
+    default:
+      throw new Error('Invalid display mode');
+  }
+
+  pipeline.withColorAttachment({ view: context }).with(renderBG).draw(3);
+}
+
 // Main rendering loop
+let handle: number;
 function loop() {
+  handle = requestAnimationFrame(loop);
+
   if (p.params.paused) {
-    requestAnimationFrame(loop);
     return;
   }
 
@@ -324,43 +363,28 @@ function loop() {
     .dispatchWorkgroups(dispatchX, dispatchY);
   inkBuffer.swap();
 
-  let renderBG: TgpuBindGroup<{
-    result: { texture: d.WgslTexture2d<d.F32> };
-    background: { texture: d.WgslTexture2d<d.F32> };
-  }>;
-  let pipeline: TgpuRenderPipeline<d.Vec4f>;
-
-  switch (p.params.displayMode) {
-    case 'ink':
-      renderBG = renderBindGroups.ink[inkBuffer.currentIndex];
-      pipeline = renderPipelineInk;
-      break;
-    case 'image':
-      renderBG = renderBindGroups.ink[inkBuffer.currentIndex];
-      pipeline = renderPipelineImage;
-      break;
-    case 'velocity':
-      renderBG = renderBindGroups.velocity[velBuffer.currentIndex];
-      pipeline = renderPipelineVel;
-      break;
-    default:
-      throw new Error('Invalid display mode');
-  }
-
-  pipeline.withColorAttachment({ view: context }).with(renderBG).draw(3);
-
-  requestAnimationFrame(loop);
+  render();
 }
 
-loop();
+handle = requestAnimationFrame(loop);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 // #region Example controls and cleanup
 
 canvas.addEventListener('mousedown', (e) => {
-  const x = e.offsetX * devicePixelRatio;
-  const y = e.offsetY * devicePixelRatio;
   brushState = {
-    pos: toGrid(x, y),
+    pos: toGrid(e.clientX, e.clientY),
     delta: [0, 0],
     isDown: true,
   };
@@ -370,11 +394,8 @@ canvas.addEventListener(
   (e) => {
     e.preventDefault();
     const touch = e.touches[0];
-    const rect = canvas.getBoundingClientRect();
-    const x = (touch.clientX - rect.left) * devicePixelRatio;
-    const y = (touch.clientY - rect.top) * devicePixelRatio;
     brushState = {
-      pos: toGrid(x, y),
+      pos: toGrid(touch.clientX, touch.clientY),
       delta: [0, 0],
       isDown: true,
     };
@@ -393,9 +414,7 @@ const touchEndEventListener = () => {
 window.addEventListener('touchend', touchEndEventListener);
 
 canvas.addEventListener('mousemove', (e) => {
-  const x = e.offsetX * devicePixelRatio;
-  const y = e.offsetY * devicePixelRatio;
-  const [newX, newY] = toGrid(x, y);
+  const [newX, newY] = toGrid(e.clientX, e.clientY);
   brushState.delta = [newX - brushState.pos[0], newY - brushState.pos[1]];
   brushState.pos = [newX, newY];
 });
@@ -404,10 +423,7 @@ canvas.addEventListener(
   (e) => {
     e.preventDefault();
     const touch = e.touches[0];
-    const rect = canvas.getBoundingClientRect();
-    const x = (touch.clientX - rect.left) * devicePixelRatio;
-    const y = (touch.clientY - rect.top) * devicePixelRatio;
-    const [newX, newY] = toGrid(x, y);
+    const [newX, newY] = toGrid(touch.clientX, touch.clientY);
     brushState.delta = [newX - brushState.pos[0], newY - brushState.pos[1]];
     brushState.pos = [newX, newY];
   },
@@ -476,6 +492,8 @@ export const controls = defineControls({
 export function onCleanup() {
   window.removeEventListener('mouseup', mouseUpEventListener);
   window.removeEventListener('touchend', touchEndEventListener);
+  autoResizer.detach();
+  cancelAnimationFrame(handle);
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/wind-map/index.html b/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/simulation/wind-map/index.ts b/apps/typegpu-docs/src/examples/simulation/wind-map/index.ts
index 8dc74d5f09..866c3b18c4 100644
--- a/apps/typegpu-docs/src/examples/simulation/wind-map/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/wind-map/index.ts
@@ -6,7 +6,7 @@ import {
   polylineVariableWidth,
   startCapSlot,
 } from '@typegpu/geometry';
-import { tgpu } from 'typegpu';
+import { tgpu, common } from 'typegpu';
 import { arrayOf, builtin, f32, i32, struct, u16, u32, vec2f, vec4f } from 'typegpu/data';
 import { clamp, mix, normalize, select } from 'typegpu/std';
 import { defineControls } from '../../common/defineControls.ts';
@@ -267,6 +267,18 @@ const runAnimationFrame = () => {
 };
 runAnimationFrame();
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    draw();
+  },
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -279,6 +291,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
   root.device.destroy();
   cancelAnimationFrame(frameId);
diff --git a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
+++ b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
index 300a021013..8816e4846b 100644
--- a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
@@ -291,6 +291,8 @@ function frame() {
   frameId = requestAnimationFrame(frame);
 }
 
+const autoResizer = common.attachAutoResizer({ root, canvas });
+
 function setSnippet(snippet: SdfSnippet) {
   snippetMode.write(SDF_SNIPPETS.indexOf(snippet));
 }
@@ -304,6 +306,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  autoResizer.detach();
   cancelAnimationFrame(frameId);
   floodRunner.destroy();
   sourceTexture.destroy();
diff --git a/apps/typegpu-docs/src/examples/tests/uniformity/index.html b/apps/typegpu-docs/src/examples/tests/uniformity/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/tests/uniformity/index.html
+++ b/apps/typegpu-docs/src/examples/tests/uniformity/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/tests/uniformity/index.ts b/apps/typegpu-docs/src/examples/tests/uniformity/index.ts
index b0a9e9ca70..7b8edc9346 100644
--- a/apps/typegpu-docs/src/examples/tests/uniformity/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/uniformity/index.ts
@@ -295,8 +295,18 @@ export const controls = defineControls({
   },
 });
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    configUniform.patch({ canvasRatio: canvas.width / canvas.height });
+    redraw();
+  },
+});
+
 export function onCleanup() {
   cleanupCamera();
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/threejs/attractors/index.html b/apps/typegpu-docs/src/examples/threejs/attractors/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/attractors/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/attractors/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html b/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html b/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
index 53fabe2eb9..d70252b3e2 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
@@ -1,5 +1,5 @@
 <div class="loading">Model is loading...</div>
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
 <style>
   .loading {
     position: absolute;
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html b/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
index 581d6789f8..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/simple/index.html b/apps/typegpu-docs/src/examples/threejs/simple/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/simple/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/simple/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/apps/typegpu-docs/src/examples/threejs/varyings/index.html b/apps/typegpu-docs/src/examples/threejs/varyings/index.html
index aa8cc321b3..367ab17706 100644
--- a/apps/typegpu-docs/src/examples/threejs/varyings/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/varyings/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full" />
diff --git a/packages/typegpu-cli/templates/template-vite-bare/src/main.ts b/packages/typegpu-cli/templates/template-vite-bare/src/main.ts
index 902d86678e..61eb452138 100644
--- a/packages/typegpu-cli/templates/template-vite-bare/src/main.ts
+++ b/packages/typegpu-cli/templates/template-vite-bare/src/main.ts
@@ -16,22 +16,13 @@ const pipeline = root.createRenderPipeline({
 function render() {
   pipeline.withColorAttachment({ view: context }).draw(3);
 }
-const observer = new ResizeObserver(([entry]) => {
-  if (!entry) {
-    return;
-  }
-  const width =
-    entry.devicePixelContentBoxSize?.[0].inlineSize ||
-    entry.contentBoxSize[0].inlineSize * window.devicePixelRatio;
-  const height =
-    entry.devicePixelContentBoxSize?.[0].blockSize ||
-    entry.contentBoxSize[0].blockSize * window.devicePixelRatio;
-  canvas.width = Math.max(1, Math.min(width, root.device.limits.maxTextureDimension2D));
-  canvas.height = Math.max(1, Math.min(height, root.device.limits.maxTextureDimension2D));
-  render();
+
+// Adjusting the resolution when the physical size of the canvas changes,
+// and re-rendering the content.
+common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
 });
-try {
-  observer.observe(canvas, { box: 'device-pixel-content-box' });
-} catch {
-  observer.observe(canvas, { box: 'content-box' });
-}
diff --git a/packages/typegpu-cli/templates/template-vite-complex/src/main.ts b/packages/typegpu-cli/templates/template-vite-complex/src/main.ts
index dc715557a8..6fd5d427b2 100644
--- a/packages/typegpu-cli/templates/template-vite-complex/src/main.ts
+++ b/packages/typegpu-cli/templates/template-vite-complex/src/main.ts
@@ -17,6 +17,9 @@ const time = root.createUniform(d.f32);
 const canvas = document.querySelector<HTMLCanvasElement>('#canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 
+// Adjusting the resolution when the physical size of the canvas changes
+common.attachAutoResizer({ root, canvas });
+
 function noise(v: d.v2f) {
   'use gpu';
   return perlin2d.sample(v);
@@ -114,7 +117,7 @@ const pipeline = root.createRenderPipeline({
 let elapsed = 0;
 let lastTimestamp: number | null = null;
 
-function render(timestamp: number) {
+function frame(timestamp: number) {
   if (lastTimestamp !== null) {
     elapsed += ((timestamp - lastTimestamp) / 1000.0) * speed;
   }
@@ -123,26 +126,7 @@ function render(timestamp: number) {
   time.write(elapsed);
   pipeline.withColorAttachment({ view: context }).draw(3);
 
-  requestAnimationFrame(render);
-}
-
-const observer = new ResizeObserver(([entry]) => {
-  if (!entry) {
-    return;
-  }
-  const width =
-    entry.devicePixelContentBoxSize?.[0].inlineSize ||
-    entry.contentBoxSize[0].inlineSize * window.devicePixelRatio;
-  const height =
-    entry.devicePixelContentBoxSize?.[0].blockSize ||
-    entry.contentBoxSize[0].blockSize * window.devicePixelRatio;
-  canvas.width = Math.max(1, Math.min(width, root.device.limits.maxTextureDimension2D));
-  canvas.height = Math.max(1, Math.min(height, root.device.limits.maxTextureDimension2D));
-});
-try {
-  observer.observe(canvas, { box: 'device-pixel-content-box' });
-} catch {
-  observer.observe(canvas, { box: 'content-box' });
+  requestAnimationFrame(frame);
 }
 
-requestAnimationFrame(render);
+requestAnimationFrame(frame);
diff --git a/packages/typegpu/src/common/attachAutoResizer.ts b/packages/typegpu/src/common/attachAutoResizer.ts
new file mode 100644
index 0000000000..0cdd224e76
--- /dev/null
+++ b/packages/typegpu/src/common/attachAutoResizer.ts
@@ -0,0 +1,48 @@
+import type { TgpuRoot } from '../core/root/rootTypes.ts';
+
+export interface AttachAutoResizerOptions {
+  root: TgpuRoot;
+  canvas: HTMLCanvasElement;
+  onResize?: (() => void) | undefined;
+}
+
+export interface AutoResizer {
+  detach: () => void;
+}
+
+export function attachAutoResizer({
+  root,
+  canvas,
+  onResize,
+}: AttachAutoResizerOptions): AutoResizer {
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry) {
+        return;
+      }
+      const width =
+        entry.devicePixelContentBoxSize?.[0]?.inlineSize ||
+        (entry.contentBoxSize[0]?.inlineSize ?? 0) * window.devicePixelRatio;
+      const height =
+        entry.devicePixelContentBoxSize?.[0]?.blockSize ||
+        (entry.contentBoxSize[0]?.blockSize ?? 0) * window.devicePixelRatio;
+      const canvas = entry.target as HTMLCanvasElement;
+      canvas.width = Math.max(1, Math.min(width, root.device.limits.maxTextureDimension2D));
+      canvas.height = Math.max(1, Math.min(height, root.device.limits.maxTextureDimension2D));
+
+      onResize?.();
+    }
+  });
+
+  try {
+    observer.observe(canvas, { box: 'device-pixel-content-box' });
+  } catch {
+    observer.observe(canvas, { box: 'content-box' });
+  }
+
+  return {
+    detach: () => {
+      observer.disconnect();
+    },
+  };
+}
diff --git a/packages/typegpu/src/common/index.ts b/packages/typegpu/src/common/index.ts
index bc49e476f9..249b2b3b72 100644
--- a/packages/typegpu/src/common/index.ts
+++ b/packages/typegpu/src/common/index.ts
@@ -2,4 +2,9 @@
 
 export { fullScreenTriangle } from './fullScreenTriangle.ts';
 export { writeChannels } from './writeChannels.ts';
+export {
+  attachAutoResizer,
+  type AutoResizer,
+  type AttachAutoResizerOptions,
+} from './attachAutoResizer.ts';
 export { writeSoA } from './writeSoA.ts';

From c1a095b9aa8cbe508df4834abfafb43dfb79b37e Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 2 Oct 2026 14:01:41 +0200
Subject: [PATCH 02/12] Address review comments

- Make attachAutoResizer more robust (rounding, contentBoxSize shapes,
  observe() without options, roots without a WebGPU device)
- Use explicit closing tags for <canvas> and <video>
- Keep the 1:1 aspect ratio in bitonic-sort and sdf-docs-examples
- Remove the resizer from log-test
- Use integer sizes and destroy stale textures in ripple-cube
---
 .../algorithms/genetic-racing/index.html      |  2 +-
 .../algorithms/jump-flood-distance/index.html |  2 +-
 .../algorithms/jump-flood-voronoi/index.html  |  2 +-
 .../algorithms/mnist-inference/index.html     |  2 +-
 .../src/examples/algorithms/sort/index.html   |  2 +-
 .../src/examples/algorithms/sort/index.ts     |  4 +
 .../src/examples/geometry/circles/index.html  |  2 +-
 .../geometry/lines-combinations/index.html    |  2 +-
 .../image-processing/ascii-filter/index.html  |  2 +-
 .../background-segmentation/index.html        |  2 +-
 .../examples/image-processing/blur/index.html |  2 +-
 .../camera-thresholding/index.html            |  2 +-
 .../image-processing/chroma-keying/index.html |  2 +-
 .../image-processing/image-tuning/index.html  |  2 +-
 .../selfie-segmentation/index.html            |  4 +-
 .../src/examples/rendering/3d-fish/index.html |  2 +-
 .../rendering/box-raytracing/index.html       |  2 +-
 .../examples/rendering/caustics/index.html    |  2 +-
 .../src/examples/rendering/clouds/index.html  |  2 +-
 .../rendering/cubemap-reflection/index.html   |  2 +-
 .../src/examples/rendering/disco/index.html   |  2 +-
 .../rendering/function-visualizer/index.html  |  2 +-
 .../rendering/jelly-slider/index.html         |  2 +-
 .../rendering/jelly-switch/index.html         |  2 +-
 .../examples/rendering/os-awards/index.html   |  2 +-
 .../rendering/perlin-noise/index.html         |  2 +-
 .../rendering/phong-reflection/index.html     |  2 +-
 .../rendering/point-light-shadow/index.html   |  2 +-
 .../src/examples/rendering/pom/index.html     |  2 +-
 .../radiance-cascades-drawing/index.html      |  2 +-
 .../rendering/radiance-cascades/index.html    |  2 +-
 .../rendering/ray-marching/index.html         |  2 +-
 .../rendering/render-bundles-with/index.html  |  2 +-
 .../rendering/render-bundles/index.html       |  2 +-
 .../rendering/simple-shadow/index.html        |  2 +-
 .../rendering/smoky-triangle/index.html       |  2 +-
 .../examples/rendering/suika-sdf/index.html   |  2 +-
 .../examples/rendering/two-boxes/index.html   |  2 +-
 .../rendering/xor-dev-centrifuge-2/index.html |  2 +-
 .../rendering/xor-dev-runner/index.html       |  2 +-
 .../examples/simple/gradient-tiles/index.html |  2 +-
 .../examples/simple/liquid-glass/index.html   |  2 +-
 .../examples/simple/mesh-skinning/index.html  |  2 +-
 .../src/examples/simple/oklab/index.html      |  2 +-
 .../examples/simple/ripple-cube/index.html    |  2 +-
 .../simple/ripple-cube/post-processing.ts     | 11 ++-
 .../src/examples/simple/square/index.html     |  2 +-
 .../src/examples/simple/stencil/index.html    |  2 +-
 .../src/examples/simple/triangle/index.html   |  2 +-
 .../src/examples/simple/vaporrave/index.html  |  2 +-
 .../src/examples/simulation/boids/index.html  |  2 +-
 .../examples/simulation/confetti/index.html   |  2 +-
 .../fluid-double-buffering/index.html         |  2 +-
 .../simulation/fluid-with-atomics/index.html  |  2 +-
 .../simulation/game-of-life/index.html        |  2 +-
 .../examples/simulation/gravity/index.html    |  2 +-
 .../simulation/slime-mold-3d/index.html       |  2 +-
 .../examples/simulation/slime-mold/index.html |  2 +-
 .../simulation/stable-fluid/index.html        |  2 +-
 .../examples/simulation/wind-map/index.html   |  2 +-
 .../tests/sdf-docs-examples/index.html        |  2 +-
 .../examples/tests/sdf-docs-examples/index.ts | 18 +++-
 .../src/examples/tests/uniformity/index.html  |  2 +-
 .../examples/threejs/attractors/index.html    |  2 +-
 .../examples/threejs/compute-cloth/index.html |  2 +-
 .../threejs/compute-geometry/index.html       |  2 +-
 .../threejs/compute-particles-snow/index.html |  2 +-
 .../threejs/compute-particles/index.html      |  2 +-
 .../src/examples/threejs/simple/index.html    |  2 +-
 .../threejs/test-reused-functions/index.html  |  2 +-
 .../src/examples/threejs/varyings/index.html  |  2 +-
 .../typegpu/src/common/attachAutoResizer.ts   | 85 ++++++++++++++++---
 72 files changed, 170 insertions(+), 86 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
index 60b1adde94..da0a446e19 100644
--- a/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 <div class="stats"></div>
 <style>
   .stats {
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
index 92f10d8661..d10939241b 100644
--- a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/index.html
@@ -1,6 +1,6 @@
 <div class="loading">🤖 Downloading the model...</div>
 <div class="example gap-4 flex-col md:flex-row">
-  <canvas class="w-80 h-80" />
+  <canvas class="w-80 h-80"></canvas>
   <div class="predictions-container">
     <div class="bars-container">
       <div class="bar">O</div>
diff --git a/apps/typegpu-docs/src/examples/algorithms/sort/index.html b/apps/typegpu-docs/src/examples/algorithms/sort/index.html
index b3805f0cfc..77558031d9 100644
--- a/apps/typegpu-docs/src/examples/algorithms/sort/index.html
+++ b/apps/typegpu-docs/src/examples/algorithms/sort/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full object-contain"></canvas>
 <div id="sort-overlay" hidden>
   <div id="sort-spinner"></div>
   <span id="sort-status"></span>
diff --git a/apps/typegpu-docs/src/examples/algorithms/sort/index.ts b/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
index 55e9408cbf..7deb2b8f8e 100644
--- a/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/sort/index.ts
@@ -194,6 +194,10 @@ const autoResizer = common.attachAutoResizer({
   root,
   canvas,
   onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
     const encoder = root['~unstable'].createCommandEncoder();
     render(encoder);
     encoder.submit();
diff --git a/apps/typegpu-docs/src/examples/geometry/circles/index.html b/apps/typegpu-docs/src/examples/geometry/circles/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/geometry/circles/index.html
+++ b/apps/typegpu-docs/src/examples/geometry/circles/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
+++ b/apps/typegpu-docs/src/examples/geometry/lines-combinations/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
index 616ed0b443..87f2fc5ad9 100644
--- a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
@@ -2,7 +2,7 @@
   <div class="spinner">Loading...</div>
 </div>
 
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
index d73c36d09b..9d5e5b7934 100644
--- a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
 <video
   autoplay
   playsinline
diff --git a/apps/typegpu-docs/src/examples/image-processing/blur/index.html b/apps/typegpu-docs/src/examples/image-processing/blur/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/image-processing/blur/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/blur/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
index 616ed0b443..87f2fc5ad9 100644
--- a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
@@ -2,7 +2,7 @@
   <div class="spinner">Loading...</div>
 </div>
 
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
index a1b839d1b7..fcf0e6ec11 100644
--- a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
 <video autoplay playsinline></video>
 
 <style>
diff --git a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/image-tuning/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
index b8a6402627..626b78b063 100644
--- a/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.html
@@ -1,7 +1,7 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
 <!-- Keep the video "painted" so Safari continues decoding frames. -->
 <video
   autoplay
   playsinline
   class="absolute top-0 left-0 w-[1px] h-[1px] opacity-0 pointer-events-none"
-/>
+></video>
diff --git a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
index 236e1fb54c..71d079f678 100644
--- a/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/3d-fish/index.html
@@ -44,4 +44,4 @@ <h3 class="attribution-header">Attribution (click to dismiss)</h3>
     from original
   </p>
 </div>
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/box-raytracing/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics/index.html b/apps/typegpu-docs/src/examples/rendering/caustics/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/caustics/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/clouds/index.html b/apps/typegpu-docs/src/examples/rendering/clouds/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/clouds/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/clouds/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
index a2d13746bb..a1af48814e 100644
--- a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/index.html
@@ -38,4 +38,4 @@ <h3 class="controls-header">Controls (click to dismiss)</h3>
     under CC BY 4.0 / Modified from original
   </p>
 </div>
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/disco/index.html b/apps/typegpu-docs/src/examples/rendering/disco/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/disco/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/disco/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/function-visualizer/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
index 0942059962..9827fbc16a 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/index.html
@@ -33,4 +33,4 @@
   Inspired by work of
   <a href="https://x.com/cerpow/status/1964953851603358112" target="_blank">Voicu Apostol</a>
 </div>
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-switch/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/os-awards/index.html b/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
index 86a6e42572..657dddb648 100644
--- a/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/os-awards/index.html
@@ -12,4 +12,4 @@
 <div class="spinner-background">
   <div class="spinner">Loading...</div>
 </div>
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/perlin-noise/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/phong-reflection/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/pom/index.html b/apps/typegpu-docs/src/examples/rendering/pom/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/pom/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/pom/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades-drawing/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/ray-marching/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles-with/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/render-bundles/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/simple-shadow/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
index 3eda9a7c1e..02e77097f2 100644
--- a/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/suika-sdf/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" />
 
diff --git a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
index 14e7a57baf..67aad1c073 100644
--- a/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/two-boxes/index.html
@@ -27,4 +27,4 @@ <h3 class="controls-header">Controls</h3>
   <p class="controls"><b>Right Mouse Button:</b> Rotate cubes</p>
   <p class="controls"><b>Scroll / Two-Finger Drag:</b> Zoom</p>
 </div>
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
index 57ee4dca06..56c069588f 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 <p class="absolute px-2 py-1 rounded-xl top-2 mx-auto text-lg text-center text-white bg-black/50">
   Port of "Centrifuge 2" by XorDev (<a
     class="text-purple-300"
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
index d10c07071d..7043302f20 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 <p class="absolute px-2 py-1 rounded-xl top-2 mx-auto text-lg text-center text-white bg-black/50">
   Port of "Runner" by XorDev (<a
     class="text-purple-300"
diff --git a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
+++ b/apps/typegpu-docs/src/examples/simple/gradient-tiles/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
+++ b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
index dc3b398f45..2d3d24ab03 100644
--- a/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
+++ b/apps/typegpu-docs/src/examples/simple/mesh-skinning/index.html
@@ -1,4 +1,4 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 
 <style>
   #attribution {
diff --git a/apps/typegpu-docs/src/examples/simple/oklab/index.html b/apps/typegpu-docs/src/examples/simple/oklab/index.html
index e4aea34104..cda503ca25 100644
--- a/apps/typegpu-docs/src/examples/simple/oklab/index.html
+++ b/apps/typegpu-docs/src/examples/simple/oklab/index.html
@@ -27,7 +27,7 @@
   }
 </style>
 <div class="relative w-full h-full">
-  <canvas class="w-full h-full object-contain" />
+  <canvas class="w-full h-full object-contain"></canvas>
   <div id="css-probe"></div>
 </div>
 <div id="probe-position"></div>
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts b/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
index 3f975f20ec..2f420974c3 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/post-processing.ts
@@ -141,8 +141,9 @@ export function createPostProcessingPipelines(
     fragment: fragmentMain,
   });
 
-  let width = initialWidth;
-  let height = initialHeight;
+  // Textures and dispatches require whole, non-zero sizes
+  let width = Math.max(1, Math.floor(initialWidth));
+  let height = Math.max(1, Math.floor(initialHeight));
   function createResolutionDependantResources() {
     const bloomWidth = Math.max(1, Math.floor(width / 2));
     const bloomHeight = Math.max(1, Math.floor(height / 2));
@@ -156,6 +157,7 @@ export function createPostProcessingPipelines(
     return {
       bloomWidth,
       bloomHeight,
+      textures: [result, bloom, blurTemp, history, taaOutput].map((t) => t.texture),
 
       taaBindGroup: root.createBindGroup(taaResolveLayout, {
         currentTexture: result.sampleView,
@@ -218,9 +220,14 @@ export function createPostProcessingPipelines(
       return height;
     },
     resize: (newWidth: number, newHeight: number) => {
+      newWidth = Math.max(1, Math.floor(newWidth));
+      newHeight = Math.max(1, Math.floor(newHeight));
       if (newWidth !== width || newHeight !== height) {
         width = newWidth;
         height = newHeight;
+        for (const texture of resources.textures) {
+          texture.destroy();
+        }
         resources = createResolutionDependantResources();
       }
     },
diff --git a/apps/typegpu-docs/src/examples/simple/square/index.html b/apps/typegpu-docs/src/examples/simple/square/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/square/index.html
+++ b/apps/typegpu-docs/src/examples/simple/square/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/stencil/index.html b/apps/typegpu-docs/src/examples/simple/stencil/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/stencil/index.html
+++ b/apps/typegpu-docs/src/examples/simple/stencil/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/triangle/index.html b/apps/typegpu-docs/src/examples/simple/triangle/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle/index.html
+++ b/apps/typegpu-docs/src/examples/simple/triangle/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/vaporrave/index.html b/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
+++ b/apps/typegpu-docs/src/examples/simple/vaporrave/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/boids/index.html b/apps/typegpu-docs/src/examples/simulation/boids/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/boids/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/boids/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/confetti/index.html b/apps/typegpu-docs/src/examples/simulation/confetti/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/simulation/confetti/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/confetti/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/game-of-life/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/index.html b/apps/typegpu-docs/src/examples/simulation/gravity/index.html
index 9f7e2b8386..c0cc697748 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/index.html
@@ -38,4 +38,4 @@ <h3 class="controls-header">Controls (click to dismiss)</h3>
     under CC BY 4.0
   </p>
 </div>
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
index 9670960a81..64acde394f 100644
--- a/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/stable-fluid/index.html
@@ -27,4 +27,4 @@
   <h3 class="controls-header">Controls (click to dismiss)</h3>
   <p class="controls">Drag to stir the fluid.</p>
 </div>
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simulation/wind-map/index.html b/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
+++ b/apps/typegpu-docs/src/examples/simulation/wind-map/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
index 367ab17706..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
+++ b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
index 8816e4846b..02a826861d 100644
--- a/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/sdf-docs-examples/index.ts
@@ -285,13 +285,27 @@ const pipeline = root.createRenderPipeline({
   targets: { format: presentationFormat },
 });
 
+function render() {
+  pipeline.withColorAttachment({ view: context }).draw(3);
+}
+
 let frameId = requestAnimationFrame(frame);
 function frame() {
-  pipeline.withColorAttachment({ view: context }).draw(3);
+  render();
   frameId = requestAnimationFrame(frame);
 }
 
-const autoResizer = common.attachAutoResizer({ root, canvas });
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 function setSnippet(snippet: SdfSnippet) {
   snippetMode.write(SDF_SNIPPETS.indexOf(snippet));
diff --git a/apps/typegpu-docs/src/examples/tests/uniformity/index.html b/apps/typegpu-docs/src/examples/tests/uniformity/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/tests/uniformity/index.html
+++ b/apps/typegpu-docs/src/examples/tests/uniformity/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/attractors/index.html b/apps/typegpu-docs/src/examples/threejs/attractors/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/attractors/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/attractors/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html b/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-cloth/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html b/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
index d70252b3e2..037ff50a4a 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-geometry/index.html
@@ -1,5 +1,5 @@
 <div class="loading">Model is loading...</div>
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
 <style>
   .loading {
     position: absolute;
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html b/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/simple/index.html b/apps/typegpu-docs/src/examples/threejs/simple/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/simple/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/simple/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/threejs/varyings/index.html b/apps/typegpu-docs/src/examples/threejs/varyings/index.html
index 367ab17706..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/varyings/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/varyings/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full" />
+<canvas class="w-full h-full"></canvas>
diff --git a/packages/typegpu/src/common/attachAutoResizer.ts b/packages/typegpu/src/common/attachAutoResizer.ts
index 0cdd224e76..4ae96545d8 100644
--- a/packages/typegpu/src/common/attachAutoResizer.ts
+++ b/packages/typegpu/src/common/attachAutoResizer.ts
@@ -10,25 +10,79 @@ export interface AutoResizer {
   detach: () => void;
 }
 
+/**
+ * Returns the physical (device pixel) size of the observed element, falling back to
+ * the CSS size multiplied by the device pixel ratio when the browser does not report it.
+ */
+function getPhysicalSize(entry: ResizeObserverEntry): [width: number, height: number] {
+  // Not every browser supports `devicePixelContentBoxSize` (e.g. Safari), despite what the types say.
+  const dpcb = entry.devicePixelContentBoxSize?.[0];
+  if (dpcb) {
+    return [dpcb.inlineSize, dpcb.blockSize];
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+  // Older browsers expose `contentBoxSize` as a single object instead of an array.
+  const contentBoxSize = entry.contentBoxSize as
+    | readonly ResizeObserverSize[]
+    | ResizeObserverSize
+    | undefined;
+  const cb = Array.isArray(contentBoxSize)
+    ? (contentBoxSize[0] as ResizeObserverSize | undefined)
+    : (contentBoxSize as ResizeObserverSize | undefined);
+
+  if (cb) {
+    return [cb.inlineSize * dpr, cb.blockSize * dpr];
+  }
+
+  return [entry.contentRect.width * dpr, entry.contentRect.height * dpr];
+}
+
+function getMaxCanvasSize(root: TgpuRoot): number {
+  try {
+    return root.device.limits.maxTextureDimension2D;
+  } catch {
+    // Roots that are not backed by a WebGPU device (e.g. the WebGL fallback) don't expose
+    // device limits. Falling back to the minimum value guaranteed by WebGPU.
+    return 8192;
+  }
+}
+
+/**
+ * Keeps the canvas' internal resolution (`canvas.width` and `canvas.height`) in sync with
+ * the physical size it takes up on the screen. The resolution is clamped to what the
+ * device supports.
+ *
+ * @param options.onResize Called right after the canvas has been resized. Changing the canvas
+ *   resolution clears its contents, so this is a good place to re-render the frame, and to
+ *   resize any resolution-dependent resources.
+ *
+ * @example
+ * ```ts
+ * const autoResizer = common.attachAutoResizer({
+ *   root,
+ *   canvas,
+ *   onResize() {
+ *     render();
+ *   },
+ * });
+ *
+ * // Later, when the canvas is no longer used
+ * autoResizer.detach();
+ * ```
+ */
 export function attachAutoResizer({
   root,
   canvas,
   onResize,
 }: AttachAutoResizerOptions): AutoResizer {
+  const maxSize = getMaxCanvasSize(root);
   const observer = new ResizeObserver((entries) => {
     for (const entry of entries) {
-      if (!entry) {
-        return;
-      }
-      const width =
-        entry.devicePixelContentBoxSize?.[0]?.inlineSize ||
-        (entry.contentBoxSize[0]?.inlineSize ?? 0) * window.devicePixelRatio;
-      const height =
-        entry.devicePixelContentBoxSize?.[0]?.blockSize ||
-        (entry.contentBoxSize[0]?.blockSize ?? 0) * window.devicePixelRatio;
-      const canvas = entry.target as HTMLCanvasElement;
-      canvas.width = Math.max(1, Math.min(width, root.device.limits.maxTextureDimension2D));
-      canvas.height = Math.max(1, Math.min(height, root.device.limits.maxTextureDimension2D));
+      const [width, height] = getPhysicalSize(entry);
+      const target = entry.target as HTMLCanvasElement;
+      target.width = Math.max(1, Math.min(Math.round(width), maxSize));
+      target.height = Math.max(1, Math.min(Math.round(height), maxSize));
 
       onResize?.();
     }
@@ -37,7 +91,12 @@ export function attachAutoResizer({
   try {
     observer.observe(canvas, { box: 'device-pixel-content-box' });
   } catch {
-    observer.observe(canvas, { box: 'content-box' });
+    try {
+      observer.observe(canvas, { box: 'content-box' });
+    } catch {
+      // The `box` option is not supported at all
+      observer.observe(canvas);
+    }
   }
 
   return {

From 5e96dee1bc5d4172174341217e39778876603864 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 2 Oct 2026 14:01:41 +0200
Subject: [PATCH 03/12] Mock ResizeObserver in all example tests

---
 .../individual-example-tests/3d-fish.test.ts  | 298 ++++++++--------
 .../individual-example-tests/boids.test.ts    |  68 ++--
 .../individual-example-tests/disco.test.ts    | 122 +++----
 .../fluid-double-buffering.test.ts            | 156 ++++-----
 .../game-of-life.test.ts                      | 158 ++++-----
 .../ripple-cube.test.ts                       |  43 +--
 .../slime-mold-3d.test.ts                     | 318 +++++++++---------
 .../slime-mold.test.ts                        |  50 +--
 .../stable-fluid.test.ts                      |  74 ++--
 .../utils/commonMocks.ts                      |  31 +-
 10 files changed, 671 insertions(+), 647 deletions(-)

diff --git a/apps/typegpu-docs/tests/individual-example-tests/3d-fish.test.ts b/apps/typegpu-docs/tests/individual-example-tests/3d-fish.test.ts
index 972ac40149..ab65a66036 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/3d-fish.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/3d-fish.test.ts
@@ -123,155 +123,6 @@ describe('3d fish example', () => {
         wrappedCallback(id.x, id.y, id.z);
       }
 
-      @group(0) @binding(0) var<uniform> sizeUniform: vec3u;
-
-      struct ModelData {
-        position: vec3f,
-        direction: vec3f,
-        scale: f32,
-        variant: f32,
-        applySinWave: u32,
-        applySeaFog: u32,
-        applySeaDesaturation: u32,
-      }
-
-      @group(1) @binding(0) var<storage, read> currentFishData: array<ModelData>;
-
-      struct FishBehaviorParams {
-        separationDist: f32,
-        separationStr: f32,
-        alignmentDist: f32,
-        alignmentStr: f32,
-        cohesionDist: f32,
-        cohesionStr: f32,
-      }
-
-      @group(1) @binding(4) var<uniform> fishBehavior: FishBehaviorParams;
-
-      struct Line3 {
-        origin: vec3f,
-        dir: vec3f,
-      }
-
-      fn projectPointOnLine(point: vec3f, line: Line3) -> vec3f {
-        let pointVector = (point - line.origin);
-        let projection = dot(pointVector, line.dir);
-        return (line.origin + (line.dir * projection));
-      }
-
-      @group(1) @binding(2) var<uniform> mouseRay: Line3;
-
-      @group(1) @binding(3) var<uniform> timePassed: f32;
-
-      @group(1) @binding(1) var<storage, read_write> nextFishData: array<ModelData>;
-
-      fn simulate(fishIndex: u32, _arg_1: u32, _arg_2: u32) {
-        let fishData = (&currentFishData[fishIndex]);
-        var separation = vec3f();
-        var alignment = vec3f();
-        var alignmentCount = 0;
-        var cohesion = vec3f();
-        var cohesionCount = 0;
-        var wallRepulsion = vec3f();
-        var rayRepulsion = vec3f();
-        for (var i = 0; (i < 8192i); i += 1i) {
-          if ((u32(i) == fishIndex)) {
-            continue;
-          }
-          let other = (&currentFishData[i]);
-          let dist = distance((*fishData).position, (*other).position);
-          if ((dist < fishBehavior.separationDist)) {
-            separation += ((*fishData).position - (*other).position);
-          }
-          if ((dist < fishBehavior.alignmentDist)) {
-            alignment = (alignment + (*other).direction);
-            alignmentCount = (alignmentCount + 1i);
-          }
-          if ((dist < fishBehavior.cohesionDist)) {
-            cohesion = (cohesion + (*other).position);
-            cohesionCount = (cohesionCount + 1i);
-          }
-        }
-        if ((alignmentCount > 0i)) {
-          alignment = (alignment / f32(alignmentCount));
-        }
-        if ((cohesionCount > 0i)) {
-          cohesion = ((cohesion / f32(cohesionCount)) - (*fishData).position);
-        }
-        // unrolled iteration #0
-        {
-          var repulsion = vec3f();
-          repulsion[0i] = 1f;
-          const axisAquariumSize = 5f;
-          let axisPosition = (*fishData).position[0i];
-          const distance_1 = 0.1;
-          if ((axisPosition > (axisAquariumSize - distance_1))) {
-            let str = (axisPosition - (axisAquariumSize - distance_1));
-            wallRepulsion = (wallRepulsion - (repulsion * str));
-          }
-          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
-            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
-            wallRepulsion = (wallRepulsion + (repulsion * str));
-          }
-        }
-        // unrolled iteration #1
-        {
-          var repulsion = vec3f();
-          repulsion[1i] = 1f;
-          const axisAquariumSize = 2f;
-          let axisPosition = (*fishData).position[1i];
-          const distance_1 = 0.1;
-          if ((axisPosition > (axisAquariumSize - distance_1))) {
-            let str = (axisPosition - (axisAquariumSize - distance_1));
-            wallRepulsion = (wallRepulsion - (repulsion * str));
-          }
-          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
-            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
-            wallRepulsion = (wallRepulsion + (repulsion * str));
-          }
-        }
-        // unrolled iteration #2
-        {
-          var repulsion = vec3f();
-          repulsion[2i] = 1f;
-          const axisAquariumSize = 5f;
-          let axisPosition = (*fishData).position[2i];
-          const distance_1 = 0.1;
-          if ((axisPosition > (axisAquariumSize - distance_1))) {
-            let str = (axisPosition - (axisAquariumSize - distance_1));
-            wallRepulsion = (wallRepulsion - (repulsion * str));
-          }
-          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
-            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
-            wallRepulsion = (wallRepulsion + (repulsion * str));
-          }
-        }
-        // ---
-        let proj = projectPointOnLine((*fishData).position, mouseRay);
-        let diff = ((*fishData).position - proj);
-        const limit = 1.2;
-        let str = (pow(2f, clamp((limit - length(diff)), 0f, limit)) - 1f);
-        rayRepulsion = (normalize(diff) * str);
-        var direction = (*fishData).direction;
-        direction += (separation * fishBehavior.separationStr);
-        direction += (alignment * fishBehavior.alignmentStr);
-        direction += (cohesion * fishBehavior.cohesionStr);
-        direction += (wallRepulsion * 1e-4f);
-        direction += (rayRepulsion * 0.0015f);
-        direction = (normalize(direction) * clamp(length((*fishData).direction), 0f, 0.01f));
-        let translation = (direction * (min(999f, timePassed) / 8f));
-        let nextFishData_1 = (&nextFishData[fishIndex]);
-        (*nextFishData_1).position = ((*fishData).position + translation);
-        (*nextFishData_1).direction = direction;
-      }
-
-      @compute @workgroup_size(256, 1, 1) fn mainCompute(@builtin(global_invocation_id) id: vec3u) {
-        if (any(id >= sizeUniform)) {
-          return;
-        }
-        simulate(id.x, id.y, id.z);
-      }
-
       struct ModelData {
         position: vec3f,
         direction: vec3f,
@@ -483,6 +334,155 @@ describe('3d fish example', () => {
           foggedColor = mix(foggedColor, vec3f(0, 0.47843137383461, 0.800000011920929), fogFactor);
         }
         return vec4f(foggedColor, 1f);
+      }
+
+      @group(0) @binding(0) var<uniform> sizeUniform: vec3u;
+
+      struct ModelData {
+        position: vec3f,
+        direction: vec3f,
+        scale: f32,
+        variant: f32,
+        applySinWave: u32,
+        applySeaFog: u32,
+        applySeaDesaturation: u32,
+      }
+
+      @group(1) @binding(0) var<storage, read> currentFishData: array<ModelData>;
+
+      struct FishBehaviorParams {
+        separationDist: f32,
+        separationStr: f32,
+        alignmentDist: f32,
+        alignmentStr: f32,
+        cohesionDist: f32,
+        cohesionStr: f32,
+      }
+
+      @group(1) @binding(4) var<uniform> fishBehavior: FishBehaviorParams;
+
+      struct Line3 {
+        origin: vec3f,
+        dir: vec3f,
+      }
+
+      fn projectPointOnLine(point: vec3f, line: Line3) -> vec3f {
+        let pointVector = (point - line.origin);
+        let projection = dot(pointVector, line.dir);
+        return (line.origin + (line.dir * projection));
+      }
+
+      @group(1) @binding(2) var<uniform> mouseRay: Line3;
+
+      @group(1) @binding(3) var<uniform> timePassed: f32;
+
+      @group(1) @binding(1) var<storage, read_write> nextFishData: array<ModelData>;
+
+      fn simulate(fishIndex: u32, _arg_1: u32, _arg_2: u32) {
+        let fishData = (&currentFishData[fishIndex]);
+        var separation = vec3f();
+        var alignment = vec3f();
+        var alignmentCount = 0;
+        var cohesion = vec3f();
+        var cohesionCount = 0;
+        var wallRepulsion = vec3f();
+        var rayRepulsion = vec3f();
+        for (var i = 0; (i < 8192i); i += 1i) {
+          if ((u32(i) == fishIndex)) {
+            continue;
+          }
+          let other = (&currentFishData[i]);
+          let dist = distance((*fishData).position, (*other).position);
+          if ((dist < fishBehavior.separationDist)) {
+            separation += ((*fishData).position - (*other).position);
+          }
+          if ((dist < fishBehavior.alignmentDist)) {
+            alignment = (alignment + (*other).direction);
+            alignmentCount = (alignmentCount + 1i);
+          }
+          if ((dist < fishBehavior.cohesionDist)) {
+            cohesion = (cohesion + (*other).position);
+            cohesionCount = (cohesionCount + 1i);
+          }
+        }
+        if ((alignmentCount > 0i)) {
+          alignment = (alignment / f32(alignmentCount));
+        }
+        if ((cohesionCount > 0i)) {
+          cohesion = ((cohesion / f32(cohesionCount)) - (*fishData).position);
+        }
+        // unrolled iteration #0
+        {
+          var repulsion = vec3f();
+          repulsion[0i] = 1f;
+          const axisAquariumSize = 5f;
+          let axisPosition = (*fishData).position[0i];
+          const distance_1 = 0.1;
+          if ((axisPosition > (axisAquariumSize - distance_1))) {
+            let str = (axisPosition - (axisAquariumSize - distance_1));
+            wallRepulsion = (wallRepulsion - (repulsion * str));
+          }
+          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
+            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
+            wallRepulsion = (wallRepulsion + (repulsion * str));
+          }
+        }
+        // unrolled iteration #1
+        {
+          var repulsion = vec3f();
+          repulsion[1i] = 1f;
+          const axisAquariumSize = 2f;
+          let axisPosition = (*fishData).position[1i];
+          const distance_1 = 0.1;
+          if ((axisPosition > (axisAquariumSize - distance_1))) {
+            let str = (axisPosition - (axisAquariumSize - distance_1));
+            wallRepulsion = (wallRepulsion - (repulsion * str));
+          }
+          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
+            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
+            wallRepulsion = (wallRepulsion + (repulsion * str));
+          }
+        }
+        // unrolled iteration #2
+        {
+          var repulsion = vec3f();
+          repulsion[2i] = 1f;
+          const axisAquariumSize = 5f;
+          let axisPosition = (*fishData).position[2i];
+          const distance_1 = 0.1;
+          if ((axisPosition > (axisAquariumSize - distance_1))) {
+            let str = (axisPosition - (axisAquariumSize - distance_1));
+            wallRepulsion = (wallRepulsion - (repulsion * str));
+          }
+          if ((axisPosition < (-(axisAquariumSize) + distance_1))) {
+            let str = ((-(axisAquariumSize) + distance_1) - axisPosition);
+            wallRepulsion = (wallRepulsion + (repulsion * str));
+          }
+        }
+        // ---
+        let proj = projectPointOnLine((*fishData).position, mouseRay);
+        let diff = ((*fishData).position - proj);
+        const limit = 1.2;
+        let str = (pow(2f, clamp((limit - length(diff)), 0f, limit)) - 1f);
+        rayRepulsion = (normalize(diff) * str);
+        var direction = (*fishData).direction;
+        direction += (separation * fishBehavior.separationStr);
+        direction += (alignment * fishBehavior.alignmentStr);
+        direction += (cohesion * fishBehavior.cohesionStr);
+        direction += (wallRepulsion * 1e-4f);
+        direction += (rayRepulsion * 0.0015f);
+        direction = (normalize(direction) * clamp(length((*fishData).direction), 0f, 0.01f));
+        let translation = (direction * (min(999f, timePassed) / 8f));
+        let nextFishData_1 = (&nextFishData[fishIndex]);
+        (*nextFishData_1).position = ((*fishData).position + translation);
+        (*nextFishData_1).direction = direction;
+      }
+
+      @compute @workgroup_size(256, 1, 1) fn mainCompute(@builtin(global_invocation_id) id: vec3u) {
+        if (any(id >= sizeUniform)) {
+          return;
+        }
+        simulate(id.x, id.y, id.z);
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/boids.test.ts b/apps/typegpu-docs/tests/individual-example-tests/boids.test.ts
index 55217cad12..57455cd79a 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/boids.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/boids.test.ts
@@ -20,7 +20,40 @@ describe('boids example', () => {
     );
 
     expect(shaderCodes).toMatchInlineSnapshot(`
-      "@group(0) @binding(0) var<uniform> sizeUniform: vec3u;
+      "fn getRotationFromVelocity(velocity: vec2f) -> f32 {
+        return -(atan2(velocity.x, velocity.y));
+      }
+
+      fn rotate(v: vec2f, angle: f32) -> vec2f {
+        let cos_1 = cos(angle);
+        let sin_1 = sin(angle);
+        return vec2f(((v.x * cos_1) - (v.y * sin_1)), ((v.x * sin_1) + (v.y * cos_1)));
+      }
+
+      @group(0) @binding(0) var<uniform> colorPalette: vec3f;
+
+      struct mainVert_Output {
+        @builtin(position) position: vec4f,
+        @location(0) color: vec4f,
+      }
+
+      @vertex fn mainVert(@location(0) v: vec2f, @location(1) center: vec2f, @location(2) velocity: vec2f) -> mainVert_Output {
+        let angle = getRotationFromVelocity(velocity);
+        let rotated = rotate(v, angle);
+        let pos = vec4f((rotated + center), 0f, 1f);
+        let color = vec4f(((sin((colorPalette + angle)) * 0.45f) + 0.45f), 1f);
+        return mainVert_Output(pos, color);
+      }
+
+      struct mainFrag_Input {
+        @location(0) color: vec4f,
+      }
+
+      @fragment fn mainFrag(_arg_0: mainFrag_Input) -> @location(0) vec4f {
+        return _arg_0.color;
+      }
+
+      @group(0) @binding(0) var<uniform> sizeUniform: vec3u;
 
       struct TriangleData {
         position: vec2f,
@@ -87,39 +120,6 @@ describe('boids example', () => {
           return;
         }
         simulate(id.x, id.y, id.z);
-      }
-
-      fn getRotationFromVelocity(velocity: vec2f) -> f32 {
-        return -(atan2(velocity.x, velocity.y));
-      }
-
-      fn rotate(v: vec2f, angle: f32) -> vec2f {
-        let cos_1 = cos(angle);
-        let sin_1 = sin(angle);
-        return vec2f(((v.x * cos_1) - (v.y * sin_1)), ((v.x * sin_1) + (v.y * cos_1)));
-      }
-
-      @group(0) @binding(0) var<uniform> colorPalette: vec3f;
-
-      struct mainVert_Output {
-        @builtin(position) position: vec4f,
-        @location(0) color: vec4f,
-      }
-
-      @vertex fn mainVert(@location(0) v: vec2f, @location(1) center: vec2f, @location(2) velocity: vec2f) -> mainVert_Output {
-        let angle = getRotationFromVelocity(velocity);
-        let rotated = rotate(v, angle);
-        let pos = vec4f((rotated + center), 0f, 1f);
-        let color = vec4f(((sin((colorPalette + angle)) * 0.45f) + 0.45f), 1f);
-        return mainVert_Output(pos, color);
-      }
-
-      struct mainFrag_Input {
-        @location(0) color: vec4f,
-      }
-
-      @fragment fn mainFrag(_arg_0: mainFrag_Input) -> @location(0) vec4f {
-        return _arg_0.color;
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/disco.test.ts b/apps/typegpu-docs/tests/individual-example-tests/disco.test.ts
index a6a8f7f785..d800dacb35 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/disco.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/disco.test.ts
@@ -61,6 +61,67 @@ describe('disco example', () => {
         return (acc + (col * weight));
       }
 
+      struct mainFragment1_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn mainFragment1(_arg_0: mainFragment1_Input) -> @location(0) vec4f {
+        let originalUv = aspectCorrected(_arg_0.uv);
+        var aspectUv = originalUv;
+        var accumulatedColor = vec3f();
+        for (var iteration = 0; (iteration < 5i); iteration++) {
+          aspectUv = (fract((aspectUv * (1.3f * sin(time)))) - 0.5f);
+          var radialLength = (length(aspectUv) * exp((-(length(originalUv)) * 2f)));
+          radialLength = (sin(((radialLength * 8f) + time)) / 8f);
+          radialLength = abs(radialLength);
+          radialLength = smoothstep(0f, 0.1f, radialLength);
+          radialLength = (0.06f / radialLength);
+          let paletteColor = palette((length(originalUv) + (time * 0.9f)));
+          accumulatedColor = accumulate(accumulatedColor, paletteColor, radialLength);
+        }
+        return vec4f(accumulatedColor, 1f);
+      }
+
+      struct mainVertex_Output {
+        @builtin(position) outPos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn mainVertex(@builtin(vertex_index) vertexIndex: u32) -> mainVertex_Output {
+        let pos = array<vec2f, 6>(vec2f(-1, 1), vec2f(-1), vec2f(1, -1), vec2f(-1, 1), vec2f(1, -1), vec2f(1));
+        let uv = array<vec2f, 6>(vec2f(0, 1), vec2f(), vec2f(1, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1));
+        return mainVertex_Output(vec4f(pos[vertexIndex], 0f, 1f), uv[vertexIndex]);
+      }
+
+      @group(0) @binding(0) var<uniform> resolutionUniform: vec2f;
+
+      fn aspectCorrected(uv: vec2f) -> vec2f {
+        var v = ((uv - 0.5f) * 2f);
+        let aspect = (resolutionUniform.x / resolutionUniform.y);
+        if ((aspect > 1f)) {
+          v.x *= aspect;
+        }
+        else {
+          v.y /= aspect;
+        }
+        return v;
+      }
+
+      @group(0) @binding(1) var<uniform> time: f32;
+
+      fn palette(t: f32) -> vec3f {
+        let a = vec3f(0.5, 0.5899999737739563, 0.8500000238418579);
+        let b = vec3f(0.18000000715255737, 0.41999998688697815, 0.4000000059604645);
+        let c = vec3f(0.18000000715255737, 0.47999998927116394, 0.4099999964237213);
+        let e = vec3f(0.3499999940395355, 0.12999999523162842, 0.3199999928474426);
+        let expr = cos((6.28318f * ((c * t) + e)));
+        return (a + (b * expr));
+      }
+
+      fn accumulate(acc: vec3f, col: vec3f, weight: f32) -> vec3f {
+        return (acc + (col * weight));
+      }
+
       struct mainFragment2_Input {
         @location(0) uv: vec2f,
       }
@@ -230,67 +291,6 @@ describe('disco example', () => {
           accumulatedColor = accumulate(accumulatedColor, paletteColor, radialLength);
         }
         return vec4f(accumulatedColor, 1f);
-      }
-
-      struct mainVertex_Output {
-        @builtin(position) outPos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn mainVertex(@builtin(vertex_index) vertexIndex: u32) -> mainVertex_Output {
-        let pos = array<vec2f, 6>(vec2f(-1, 1), vec2f(-1), vec2f(1, -1), vec2f(-1, 1), vec2f(1, -1), vec2f(1));
-        let uv = array<vec2f, 6>(vec2f(0, 1), vec2f(), vec2f(1, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1));
-        return mainVertex_Output(vec4f(pos[vertexIndex], 0f, 1f), uv[vertexIndex]);
-      }
-
-      @group(0) @binding(0) var<uniform> resolutionUniform: vec2f;
-
-      fn aspectCorrected(uv: vec2f) -> vec2f {
-        var v = ((uv - 0.5f) * 2f);
-        let aspect = (resolutionUniform.x / resolutionUniform.y);
-        if ((aspect > 1f)) {
-          v.x *= aspect;
-        }
-        else {
-          v.y /= aspect;
-        }
-        return v;
-      }
-
-      @group(0) @binding(1) var<uniform> time: f32;
-
-      fn palette(t: f32) -> vec3f {
-        let a = vec3f(0.5, 0.5899999737739563, 0.8500000238418579);
-        let b = vec3f(0.18000000715255737, 0.41999998688697815, 0.4000000059604645);
-        let c = vec3f(0.18000000715255737, 0.47999998927116394, 0.4099999964237213);
-        let e = vec3f(0.3499999940395355, 0.12999999523162842, 0.3199999928474426);
-        let expr = cos((6.28318f * ((c * t) + e)));
-        return (a + (b * expr));
-      }
-
-      fn accumulate(acc: vec3f, col: vec3f, weight: f32) -> vec3f {
-        return (acc + (col * weight));
-      }
-
-      struct mainFragment1_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn mainFragment1(_arg_0: mainFragment1_Input) -> @location(0) vec4f {
-        let originalUv = aspectCorrected(_arg_0.uv);
-        var aspectUv = originalUv;
-        var accumulatedColor = vec3f();
-        for (var iteration = 0; (iteration < 5i); iteration++) {
-          aspectUv = (fract((aspectUv * (1.3f * sin(time)))) - 0.5f);
-          var radialLength = (length(aspectUv) * exp((-(length(originalUv)) * 2f)));
-          radialLength = (sin(((radialLength * 8f) + time)) / 8f);
-          radialLength = abs(radialLength);
-          radialLength = smoothstep(0f, 0.1f, radialLength);
-          radialLength = (0.06f / radialLength);
-          let paletteColor = palette((length(originalUv) + (time * 0.9f)));
-          accumulatedColor = accumulate(accumulatedColor, paletteColor, radialLength);
-        }
-        return vec4f(accumulatedColor, 1f);
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/fluid-double-buffering.test.ts b/apps/typegpu-docs/tests/individual-example-tests/fluid-double-buffering.test.ts
index c2f1c83bac..4a80ab5195 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/fluid-double-buffering.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/fluid-double-buffering.test.ts
@@ -93,6 +93,84 @@ describe('fluid double buffering example', () => {
         wrappedCallback(id.x, id.y, id.z);
       }
 
+      struct vertexMain_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn vertexMain(@builtin(vertex_index) idx: u32) -> vertexMain_Output {
+        let pos = array<vec2f, 4>(vec2f(1), vec2f(-1, 1), vec2f(1, -1), vec2f(-1));
+        let uv = array<vec2f, 4>(vec2f(1), vec2f(0, 1), vec2f(1, 0), vec2f());
+        return vertexMain_Output(vec4f(pos[idx].x, pos[idx].y, 0f, 1f), uv[idx]);
+      }
+
+      fn coordsToIndex(x: i32, y: i32) -> i32 {
+        return (x + (y * 256i));
+      }
+
+      @group(0) @binding(0) var<storage, read> gridAlphaBuffer: array<vec4f, 1048576>;
+
+      struct BoxObstacle {
+        center: vec2i,
+        size: vec2i,
+        enabled: u32,
+      }
+
+      @group(0) @binding(1) var<storage, read> obstacles: array<BoxObstacle, 4>;
+
+      fn isInsideObstacle(x: i32, y: i32) -> bool {
+        for (var i = 0u; i < 4u; i += 1u) {
+          let obs = (&obstacles[i]);
+          {
+            if (((*obs).enabled == 0u)) {
+              continue;
+            }
+            let minX = max(0i, ((*obs).center.x - i32((f32((*obs).size.x) / 2f))));
+            let maxX = min(256i, ((*obs).center.x + i32((f32((*obs).size.x) / 2f))));
+            let minY = max(0i, ((*obs).center.y - i32((f32((*obs).size.y) / 2f))));
+            let maxY = min(256i, ((*obs).center.y + i32((f32((*obs).size.y) / 2f))));
+            if (((((x >= minX) && (x <= maxX)) && (y >= minY)) && (y <= maxY))) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }
+
+      struct fragmentMain_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn fragmentMain(_arg_0: fragmentMain_Input) -> @location(0) vec4f {
+        let x = i32((_arg_0.uv.x * 256f));
+        let y = i32((_arg_0.uv.y * 256f));
+        let index = coordsToIndex(x, y);
+        let cell = (&gridAlphaBuffer[index]);
+        let density = max(0f, (*cell).z);
+        let obstacleColor = vec4f(0.10000000149011612, 0.10000000149011612, 0.10000000149011612, 1);
+        let background = vec4f(0.8999999761581421, 0.8999999761581421, 0.8999999761581421, 1);
+        let firstColor = vec4f(0.20000000298023224, 0.6000000238418579, 1, 1);
+        let secondColor = vec4f(0.20000000298023224, 0.30000001192092896, 0.6000000238418579, 1);
+        let thirdColor = vec4f(0.10000000149011612, 0.20000000298023224, 0.4000000059604645, 1);
+        const firstThreshold = 2f;
+        const secondThreshold = 10f;
+        const thirdThreshold = 20f;
+        if (isInsideObstacle(x, y)) {
+          return obstacleColor;
+        }
+        if ((density <= 0f)) {
+          return background;
+        }
+        if ((density <= firstThreshold)) {
+          let t = (1f - pow((1f - (density / firstThreshold)), 2f));
+          return mix(background, firstColor, t);
+        }
+        if ((density <= secondThreshold)) {
+          return mix(firstColor, secondColor, ((density - firstThreshold) / (secondThreshold - firstThreshold)));
+        }
+        return mix(secondColor, thirdColor, min(((density - secondThreshold) / thirdThreshold), 1f));
+      }
+
       @group(0) @binding(0) var<uniform> sizeUniform: vec3u;
 
       fn coordsToIndex(x: i32, y: i32) -> i32 {
@@ -625,84 +703,6 @@ describe('fluid double buffering example', () => {
           return;
         }
         simulate(id.x, id.y, id.z);
-      }
-
-      struct vertexMain_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn vertexMain(@builtin(vertex_index) idx: u32) -> vertexMain_Output {
-        let pos = array<vec2f, 4>(vec2f(1), vec2f(-1, 1), vec2f(1, -1), vec2f(-1));
-        let uv = array<vec2f, 4>(vec2f(1), vec2f(0, 1), vec2f(1, 0), vec2f());
-        return vertexMain_Output(vec4f(pos[idx].x, pos[idx].y, 0f, 1f), uv[idx]);
-      }
-
-      fn coordsToIndex(x: i32, y: i32) -> i32 {
-        return (x + (y * 256i));
-      }
-
-      @group(0) @binding(0) var<storage, read> gridAlphaBuffer: array<vec4f, 1048576>;
-
-      struct BoxObstacle {
-        center: vec2i,
-        size: vec2i,
-        enabled: u32,
-      }
-
-      @group(0) @binding(1) var<storage, read> obstacles: array<BoxObstacle, 4>;
-
-      fn isInsideObstacle(x: i32, y: i32) -> bool {
-        for (var i = 0u; i < 4u; i += 1u) {
-          let obs = (&obstacles[i]);
-          {
-            if (((*obs).enabled == 0u)) {
-              continue;
-            }
-            let minX = max(0i, ((*obs).center.x - i32((f32((*obs).size.x) / 2f))));
-            let maxX = min(256i, ((*obs).center.x + i32((f32((*obs).size.x) / 2f))));
-            let minY = max(0i, ((*obs).center.y - i32((f32((*obs).size.y) / 2f))));
-            let maxY = min(256i, ((*obs).center.y + i32((f32((*obs).size.y) / 2f))));
-            if (((((x >= minX) && (x <= maxX)) && (y >= minY)) && (y <= maxY))) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
-      struct fragmentMain_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn fragmentMain(_arg_0: fragmentMain_Input) -> @location(0) vec4f {
-        let x = i32((_arg_0.uv.x * 256f));
-        let y = i32((_arg_0.uv.y * 256f));
-        let index = coordsToIndex(x, y);
-        let cell = (&gridAlphaBuffer[index]);
-        let density = max(0f, (*cell).z);
-        let obstacleColor = vec4f(0.10000000149011612, 0.10000000149011612, 0.10000000149011612, 1);
-        let background = vec4f(0.8999999761581421, 0.8999999761581421, 0.8999999761581421, 1);
-        let firstColor = vec4f(0.20000000298023224, 0.6000000238418579, 1, 1);
-        let secondColor = vec4f(0.20000000298023224, 0.30000001192092896, 0.6000000238418579, 1);
-        let thirdColor = vec4f(0.10000000149011612, 0.20000000298023224, 0.4000000059604645, 1);
-        const firstThreshold = 2f;
-        const secondThreshold = 10f;
-        const thirdThreshold = 20f;
-        if (isInsideObstacle(x, y)) {
-          return obstacleColor;
-        }
-        if ((density <= 0f)) {
-          return background;
-        }
-        if ((density <= firstThreshold)) {
-          let t = (1f - pow((1f - (density / firstThreshold)), 2f));
-          return mix(background, firstColor, t);
-        }
-        if ((density <= secondThreshold)) {
-          return mix(firstColor, secondColor, ((density - firstThreshold) / (secondThreshold - firstThreshold)));
-        }
-        return mix(secondColor, thirdColor, min(((density - secondThreshold) / thirdThreshold), 1f));
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/game-of-life.test.ts b/apps/typegpu-docs/tests/individual-example-tests/game-of-life.test.ts
index fbc952b93b..beeab232d4 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/game-of-life.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/game-of-life.test.ts
@@ -102,6 +102,85 @@ describe('game of life example', () => {
         wrappedCallback(id.x, id.y, id.z);
       }
 
+      struct fullScreenTriangle_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
+        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
+
+        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
+      }
+
+      struct ZoomParams {
+        enabled: u32,
+        level: f32,
+        centerX: f32,
+        centerY: f32,
+      }
+
+      @group(0) @binding(0) var<uniform> zoomUniform: ZoomParams;
+
+      @group(0) @binding(1) var<uniform> gameSizeUniform: u32;
+
+      fn sdRoundedBox2d(point: vec2f, size: vec2f, cornerRadius: f32) -> f32 {
+        let d = ((abs(point) - size) + vec2f(cornerRadius));
+        return ((length(max(d, vec2f())) + min(max(d.x, d.y), 0f)) - cornerRadius);
+      }
+
+      @group(1) @binding(0) var source: texture_storage_2d<r32uint, read>;
+
+      fn sampleRegular(sampleUv: vec2f, gs: f32) -> u32 {
+        return textureLoad(source, vec2u((sampleUv * gs))).x;
+      }
+
+      @group(0) @binding(2) var<uniform> viewModeUniform: u32;
+
+      struct displayFragment_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn displayFragment(_arg_0: displayFragment_Input) -> @location(0) vec4f {
+        let zoom = (&zoomUniform);
+        let gs = f32(gameSizeUniform);
+        let halfView = (0.5f / (*zoom).level);
+        let clampedCenter = clamp(vec2f((*zoom).centerX, (*zoom).centerY), vec2f(halfView), vec2f((1f - halfView)));
+        let minimapMin = vec2f(0.7799999713897705);
+        let minimapMax = vec2f(0.9800000190734863);
+        const minimapSize = 0.2;
+        let inMinimap = ((((((*zoom).enabled == 1u) && (_arg_0.uv.x >= minimapMin.x)) && (_arg_0.uv.x <= minimapMax.x)) && (_arg_0.uv.y >= minimapMin.y)) && (_arg_0.uv.y <= minimapMax.y));
+        if (inMinimap) {
+          let localUv = ((_arg_0.uv - minimapMin) / minimapSize);
+          let edgeDist = sdRoundedBox2d((localUv - 0.5f), vec2f(0.5), 0.02f);
+          if ((edgeDist > -0.02f)) {
+            let alpha = (1f - smoothstep(0f, 0.02f, edgeDist));
+            return vec4f(0.5f, 0.5f, 0.5f, alpha);
+          }
+          let viewSize = (1f / (*zoom).level);
+          let dist = sdRoundedBox2d((localUv - clampedCenter), vec2f((viewSize / 2f)), 0.01f);
+          const borderWidth = 0.015;
+          if (((dist > -(borderWidth)) && (dist < borderWidth))) {
+            let borderColor = mix(vec4f(0.7689999938011169, 0.3919999897480011, 1, 1), vec4f(0.11400000005960464, 0.44699999690055847, 0.9409999847412109, 1), localUv.x);
+            let a = (1f - smoothstep(0f, borderWidth, abs(dist)));
+            return vec4f(borderColor.x, borderColor.y, borderColor.z, a);
+          }
+          let value = sampleRegular(localUv, gs);
+          let alive = select(vec4f((localUv.x / 2.5f), (localUv.y / 2.5f), ((1f - localUv.x) / 2.5f), 0.8f), vec4f(0.6000000238418579, 0.6000000238418579, 0.6000000238418579, 0.800000011920929), (viewModeUniform == 1u));
+          return select(vec4f(0, 0, 0, 0.800000011920929), alive, (value == 1u));
+        }
+        var sampleUv = _arg_0.uv;
+        if (((*zoom).enabled == 1u)) {
+          sampleUv = (((_arg_0.uv - 0.5f) / (*zoom).level) + clampedCenter);
+        }
+        let value = sampleRegular(sampleUv, gs);
+        let isClassic = (viewModeUniform == 1u);
+        let alive = select(normalize(vec4f((sampleUv.x / 1.5f), (sampleUv.y / 1.5f), (1f - (sampleUv.x / 1.5f)), 1f)), vec4f(1), isClassic);
+        let dead = select(vec4f(), vec4f(0, 0, 0, 1), isClassic);
+        return select(dead, alive, (value == 1u));
+      }
+
       @group(0) @binding(0) var<uniform> gameSizeUniform: u32;
 
       @group(1) @binding(0) var current: texture_2d<u32>;
@@ -239,85 +318,6 @@ describe('game of life example', () => {
         let neighbors = countNeighborsInTile(lx, ly);
         let nextAlive = golNextState((current_1 != 0u), neighbors);
         textureStore(next, gid.xy, vec4u(u32(select(0i, 1i, nextAlive)), 0u, 0u, 0u));
-      }
-
-      struct fullScreenTriangle_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
-        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
-        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
-
-        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
-      }
-
-      struct ZoomParams {
-        enabled: u32,
-        level: f32,
-        centerX: f32,
-        centerY: f32,
-      }
-
-      @group(0) @binding(0) var<uniform> zoomUniform: ZoomParams;
-
-      @group(0) @binding(1) var<uniform> gameSizeUniform: u32;
-
-      fn sdRoundedBox2d(point: vec2f, size: vec2f, cornerRadius: f32) -> f32 {
-        let d = ((abs(point) - size) + vec2f(cornerRadius));
-        return ((length(max(d, vec2f())) + min(max(d.x, d.y), 0f)) - cornerRadius);
-      }
-
-      @group(1) @binding(0) var source: texture_storage_2d<r32uint, read>;
-
-      fn sampleRegular(sampleUv: vec2f, gs: f32) -> u32 {
-        return textureLoad(source, vec2u((sampleUv * gs))).x;
-      }
-
-      @group(0) @binding(2) var<uniform> viewModeUniform: u32;
-
-      struct displayFragment_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn displayFragment(_arg_0: displayFragment_Input) -> @location(0) vec4f {
-        let zoom = (&zoomUniform);
-        let gs = f32(gameSizeUniform);
-        let halfView = (0.5f / (*zoom).level);
-        let clampedCenter = clamp(vec2f((*zoom).centerX, (*zoom).centerY), vec2f(halfView), vec2f((1f - halfView)));
-        let minimapMin = vec2f(0.7799999713897705);
-        let minimapMax = vec2f(0.9800000190734863);
-        const minimapSize = 0.2;
-        let inMinimap = ((((((*zoom).enabled == 1u) && (_arg_0.uv.x >= minimapMin.x)) && (_arg_0.uv.x <= minimapMax.x)) && (_arg_0.uv.y >= minimapMin.y)) && (_arg_0.uv.y <= minimapMax.y));
-        if (inMinimap) {
-          let localUv = ((_arg_0.uv - minimapMin) / minimapSize);
-          let edgeDist = sdRoundedBox2d((localUv - 0.5f), vec2f(0.5), 0.02f);
-          if ((edgeDist > -0.02f)) {
-            let alpha = (1f - smoothstep(0f, 0.02f, edgeDist));
-            return vec4f(0.5f, 0.5f, 0.5f, alpha);
-          }
-          let viewSize = (1f / (*zoom).level);
-          let dist = sdRoundedBox2d((localUv - clampedCenter), vec2f((viewSize / 2f)), 0.01f);
-          const borderWidth = 0.015;
-          if (((dist > -(borderWidth)) && (dist < borderWidth))) {
-            let borderColor = mix(vec4f(0.7689999938011169, 0.3919999897480011, 1, 1), vec4f(0.11400000005960464, 0.44699999690055847, 0.9409999847412109, 1), localUv.x);
-            let a = (1f - smoothstep(0f, borderWidth, abs(dist)));
-            return vec4f(borderColor.x, borderColor.y, borderColor.z, a);
-          }
-          let value = sampleRegular(localUv, gs);
-          let alive = select(vec4f((localUv.x / 2.5f), (localUv.y / 2.5f), ((1f - localUv.x) / 2.5f), 0.8f), vec4f(0.6000000238418579, 0.6000000238418579, 0.6000000238418579, 0.800000011920929), (viewModeUniform == 1u));
-          return select(vec4f(0, 0, 0, 0.800000011920929), alive, (value == 1u));
-        }
-        var sampleUv = _arg_0.uv;
-        if (((*zoom).enabled == 1u)) {
-          sampleUv = (((_arg_0.uv - 0.5f) / (*zoom).level) + clampedCenter);
-        }
-        let value = sampleRegular(sampleUv, gs);
-        let isClassic = (viewModeUniform == 1u);
-        let alive = select(normalize(vec4f((sampleUv.x / 1.5f), (sampleUv.y / 1.5f), (1f - (sampleUv.x / 1.5f)), 1f)), vec4f(1), isClassic);
-        let dead = select(vec4f(), vec4f(0, 0, 0, 1), isClassic);
-        return select(dead, alive, (value == 1u));
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/ripple-cube.test.ts b/apps/typegpu-docs/tests/individual-example-tests/ripple-cube.test.ts
index 770d538a06..9824869677 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/ripple-cube.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/ripple-cube.test.ts
@@ -443,16 +443,16 @@ describe('ripple-cube example', () => {
         seed2(seed);
       }
 
-      @group(0) @binding(2) var writeView: texture_storage_2d<rgba16float, write>;
+      @group(1) @binding(0) var resultTexture: texture_storage_2d<rgba16float, write>;
 
       struct Camera {
         position: vec4f,
         viewProjectionInverse: mat4x4f,
       }
 
-      @group(0) @binding(3) var<uniform> cameraUniform: Camera;
+      @group(0) @binding(2) var<uniform> cameraUniform: Camera;
 
-      @group(0) @binding(4) var<uniform> jitterUniform: vec2f;
+      @group(0) @binding(3) var<uniform> jitterUniform: vec2f;
 
       struct Ray {
         origin: vec4f,
@@ -468,9 +468,9 @@ describe('ripple-cube example', () => {
         return Ray((*camera).position, vec4f(direction, 0f));
       }
 
-      @group(1) @binding(0) var sdfTexture: texture_3d<f32>;
+      @group(2) @binding(0) var sdfTexture: texture_3d<f32>;
 
-      @group(1) @binding(1) var sdfSampler: sampler;
+      @group(2) @binding(1) var sdfSampler: sampler;
 
       fn sdBox3d(point: vec3f, size: vec3f) -> f32 {
         let d = (abs(point) - size);
@@ -493,9 +493,9 @@ describe('ripple-cube example', () => {
         return min(sdBoxFrame3d(p, vec3f(0.5), 5e-3f), interior);
       }
 
-      @group(2) @binding(0) var envMap: texture_cube<f32>;
+      @group(3) @binding(0) var envMap: texture_cube<f32>;
 
-      @group(2) @binding(1) var envSampler: sampler;
+      @group(3) @binding(1) var envSampler: sampler;
 
       fn getNormal(p: vec3f) -> vec3f {
         const e = 1e-3;
@@ -510,14 +510,14 @@ describe('ripple-cube example', () => {
         ao: f32,
       }
 
-      @group(0) @binding(5) var<uniform> materialUniform: Material;
+      @group(0) @binding(4) var<uniform> materialUniform: Material;
 
       struct Light {
         position: vec3f,
         color: vec3f,
       }
 
-      @group(0) @binding(6) var<uniform> lightsUniform: array<Light, 2>;
+      @group(0) @binding(5) var<uniform> lightsUniform: array<Light, 2>;
 
       fn distributionGGX(ndoth: f32, roughness: f32) -> f32 {
         let a = pow(roughness, 2f);
@@ -556,7 +556,7 @@ describe('ripple-cube example', () => {
         return (((((kd * material.albedo) / 3.141592653589793f) + specular) * radiance) * ndotl);
       }
 
-      @group(0) @binding(7) var<storage, read> memoryBuffer: array<vec3f, 32768>;
+      @group(0) @binding(6) var<storage, read> memoryBuffer: array<vec3f, 32768>;
 
       fn getJunctionGradient(pos: vec3i) -> vec3f {
         let size_i = vec3i(32);
@@ -623,7 +623,7 @@ describe('ripple-cube example', () => {
 
       fn wrappedCallback(x: u32, y: u32, _arg_2: u32) {
         randSeed2((vec2f(f32(x), f32(y)) + timeUniform));
-        let textureSize = textureDimensions(writeView);
+        let textureSize = textureDimensions(resultTexture);
         let uv = ((vec2f(f32(x), f32(y)) + 0.5f) / vec2f(textureSize));
         let ray = getRayForUV(uv);
         let ro = ray.origin.xyz;
@@ -656,7 +656,7 @@ describe('ripple-cube example', () => {
           let fogColor = vec3f(0.019999999552965164, 0.019999999552965164, 0.03999999910593033);
           finalColor = mix(fogColor, sceneColor, fog);
         }
-        textureStore(writeView, vec2u(x, y), vec4f(finalColor, 1f));
+        textureStore(resultTexture, vec2u(x, y), vec4f(finalColor, 1f));
       }
 
       @compute @workgroup_size(16, 16, 1) fn mainCompute(@builtin(global_invocation_id) id: vec3u) {
@@ -676,6 +676,7 @@ describe('ripple-cube example', () => {
 
       fn wrappedCallback(x: u32, y: u32, _arg_2: u32) {
         let coord = vec2i(i32(x), i32(y));
+        let dims = textureDimensions(currentTexture);
         let current = textureLoad(currentTexture, coord, 0);
         let historyColor = textureLoad(historyTexture, coord, 0);
         var minColor = vec3f(9999);
@@ -684,7 +685,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #0 / #0
         {
           let sampleCoord = (coord + vec2i(-1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -692,7 +693,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #0 / #1
         {
           let sampleCoord = (coord + vec2i(-1, 0));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -700,7 +701,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #0 / #2
         {
           let sampleCoord = (coord + vec2i(-1, 1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -710,7 +711,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #1 / #0
         {
           let sampleCoord = (coord + vec2i(0, -1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -718,7 +719,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #1 / #1
         {
           let sampleCoord = (coord + vec2i());
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -726,7 +727,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #1 / #2
         {
           let sampleCoord = (coord + vec2i(0, 1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -736,7 +737,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #2 / #0
         {
           let sampleCoord = (coord + vec2i(1, -1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -744,7 +745,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #2 / #1
         {
           let sampleCoord = (coord + vec2i(1, 0));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
@@ -752,7 +753,7 @@ describe('ripple-cube example', () => {
         // unrolled iteration #2 / #2
         {
           let sampleCoord = (coord + vec2i(1));
-          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i(181));
+          let clampedCoord = clamp(sampleCoord, vec2i(), vec2i((i32(dims.x) - 1i), (i32(dims.y) - 1i)));
           let neighbor = textureLoad(currentTexture, clampedCoord, 0).rgb;
           minColor = min(minColor, neighbor);
           maxColor = max(maxColor, neighbor);
diff --git a/apps/typegpu-docs/tests/individual-example-tests/slime-mold-3d.test.ts b/apps/typegpu-docs/tests/individual-example-tests/slime-mold-3d.test.ts
index 862d8253cc..aa2298afd8 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/slime-mold-3d.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/slime-mold-3d.test.ts
@@ -120,6 +120,165 @@ describe('slime mold 3d example', () => {
         wrappedCallback(id.x, id.y, id.z);
       }
 
+      struct fullScreenTriangle_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
+        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
+
+        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
+      }
+
+      fn hash(value: u32) -> u32 {
+        {
+          var x = (value ^ (value >> 17u));
+          x *= 3982152891u;
+          x ^= (x >> 11u);
+          x *= 2890668881u;
+          x ^= (x >> 15u);
+          x *= 830770091u;
+          x ^= (x >> 14u);
+          return x;
+        }
+      }
+
+      fn scrambleSeed2(value: vec2f) -> vec2u {
+        let u32Value = bitcast<vec2u>(value);
+        return vec2u(hash((u32Value.x ^ 1253408251u)), hash((u32Value.y ^ 2900286023u)));
+      }
+
+      fn rotl(x: u32, k: u32) -> u32 {
+        return ((x << k) | (x >> (32u - k)));
+      }
+
+      var<private> gpuSeed: vec2u;
+
+      fn seed2(value: vec2f) {
+        let scrambled = scrambleSeed2(value);
+        let newSeed = vec2u(hash((scrambled.x ^ scrambled.y)), hash((rotl(scrambled.x, 16u) ^ scrambled.y)));
+        gpuSeed = newSeed;
+      }
+
+      fn randSeed2(seed: vec2f) {
+        seed2(seed);
+      }
+
+      struct Camera {
+        viewProj: mat4x4f,
+        invViewProj: mat4x4f,
+        position: vec3f,
+      }
+
+      @group(0) @binding(0) var<uniform> cameraData: Camera;
+
+      struct RayBoxResult {
+        tNear: f32,
+        tFar: f32,
+        hit: bool,
+      }
+
+      fn rayBoxIntersection(rayOrigin: vec3f, rayDir: vec3f, boxMin: vec3f, boxMax: vec3f) -> RayBoxResult {
+        let invDir = (1f / rayDir);
+        let t0 = ((boxMin - rayOrigin) * invDir);
+        let t1 = ((boxMax - rayOrigin) * invDir);
+        let tmin = min(t0, t1);
+        let tmax = max(t0, t1);
+        let tNear = max(max(tmin.x, tmin.y), tmin.z);
+        let tFar = min(min(tmax.x, tmax.y), tmax.z);
+        let hit = ((tFar >= tNear) && (tFar >= 0f));
+        return RayBoxResult(tNear, tFar, hit);
+      }
+
+      fn next() -> u32 {
+        {
+          let s0 = gpuSeed[0i];
+          var s1 = gpuSeed[1i];
+          s1 ^= s0;
+          gpuSeed[0i] = ((rotl(s0, 26u) ^ s1) ^ (s1 << 9u));
+          gpuSeed[1i] = rotl(s1, 13u);
+          return (rotl((gpuSeed[0i] * 2654435771u), 5u) * 5u);
+        }
+      }
+
+      fn u32To01F32(value: u32) -> f32 {
+        let mantissa = (value & 8388607u);
+        let bits = (1065353216u | mantissa);
+        let f = bitcast<f32>(bits);
+        return (f - 1f);
+      }
+
+      fn sample() -> f32 {
+        let r = next();
+        return u32To01F32(r);
+      }
+
+      fn randFloat01() -> f32 {
+        return sample();
+      }
+
+      @group(1) @binding(0) var state: texture_3d<f32>;
+
+      @group(0) @binding(1) var sampler_1: sampler;
+
+      struct fragmentShader_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn fragmentShader(_arg_0: fragmentShader_Input) -> @location(0) vec4f {
+        randSeed2(_arg_0.uv);
+        let ndc = vec2f(((_arg_0.uv.x * 2f) - 1f), (1f - (_arg_0.uv.y * 2f)));
+        let ndcNear = vec4f(ndc, -1f, 1f);
+        let ndcFar = vec4f(ndc, 1f, 1f);
+        let worldNear = (cameraData.invViewProj * ndcNear);
+        let worldFar = (cameraData.invViewProj * ndcFar);
+        let rayOrigin = (worldNear.xyz / worldNear.w);
+        let rayEnd = (worldFar.xyz / worldFar.w);
+        let rayDir = normalize((rayEnd - rayOrigin));
+        let boxMin = vec3f();
+        let boxMax = vec3f(256);
+        let isect = rayBoxIntersection(rayOrigin, rayDir, boxMin, boxMax);
+        if (!(isect.hit)) {
+          return vec4f();
+        }
+        let jitter = (randFloat01() * 20f);
+        let tStart = max((isect.tNear + jitter), jitter);
+        let tEnd = isect.tFar;
+        let intersectionLength = (tEnd - tStart);
+        const baseStepsPerUnit = 0.30000001192092896f;
+        const minSteps = 8i;
+        const maxSteps = 48i;
+        let adaptiveSteps = clamp(i32((intersectionLength * baseStepsPerUnit)), minSteps, maxSteps);
+        let numSteps = adaptiveSteps;
+        let stepSize = (intersectionLength / f32(numSteps));
+        const thresholdLo = 0.05999999865889549f;
+        const thresholdHi = 0.25f;
+        const gamma = 1.399999976158142f;
+        const sigmaT = 0.10000000149011612f;
+        let albedo = vec3f(0.5699999928474426, 0.4399999976158142, 0.9599999785423279);
+        var transmittance = 1f;
+        var accum = vec3f();
+        const TMin = 0.0010000000474974513f;
+        var i = 0i;
+        while (((i < numSteps) && (transmittance > TMin))) {
+          let t = (tStart + ((f32(i) + 0.5f) * stepSize));
+          let pos = (rayOrigin + (rayDir * t));
+          let texCoord = (pos / vec3f(256));
+          let sampleValue = textureSampleLevel(state, sampler_1, texCoord, 0).x;
+          let d0 = smoothstep(thresholdLo, thresholdHi, sampleValue);
+          let density = pow(d0, gamma);
+          let alphaSrc = (1f - exp(((-(sigmaT) * density) * stepSize)));
+          let contrib = (albedo * alphaSrc);
+          accum += (contrib * transmittance);
+          transmittance = (transmittance * (1f - alphaSrc));
+          i += 1i;
+        }
+        let alpha = (1f - transmittance);
+        return vec4f(accum, alpha);
+      }
+
       @group(1) @binding(0) var oldState: texture_3d<f32>;
 
       @group(1) @binding(2) var sampler_1: sampler;
@@ -445,165 +604,6 @@ describe('slime mold 3d example', () => {
         let oldState_1 = textureLoad(oldState, vec3u(newPos)).x;
         let newState = (oldState_1 + 1f);
         textureStore(newState_1, vec3u(newPos), vec4f(newState, 0f, 0f, 1f));
-      }
-
-      struct fullScreenTriangle_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
-        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
-        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
-
-        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
-      }
-
-      fn hash(value: u32) -> u32 {
-        {
-          var x = (value ^ (value >> 17u));
-          x *= 3982152891u;
-          x ^= (x >> 11u);
-          x *= 2890668881u;
-          x ^= (x >> 15u);
-          x *= 830770091u;
-          x ^= (x >> 14u);
-          return x;
-        }
-      }
-
-      fn scrambleSeed2(value: vec2f) -> vec2u {
-        let u32Value = bitcast<vec2u>(value);
-        return vec2u(hash((u32Value.x ^ 1253408251u)), hash((u32Value.y ^ 2900286023u)));
-      }
-
-      fn rotl(x: u32, k: u32) -> u32 {
-        return ((x << k) | (x >> (32u - k)));
-      }
-
-      var<private> gpuSeed: vec2u;
-
-      fn seed2(value: vec2f) {
-        let scrambled = scrambleSeed2(value);
-        let newSeed = vec2u(hash((scrambled.x ^ scrambled.y)), hash((rotl(scrambled.x, 16u) ^ scrambled.y)));
-        gpuSeed = newSeed;
-      }
-
-      fn randSeed2(seed: vec2f) {
-        seed2(seed);
-      }
-
-      struct Camera {
-        viewProj: mat4x4f,
-        invViewProj: mat4x4f,
-        position: vec3f,
-      }
-
-      @group(0) @binding(0) var<uniform> cameraData: Camera;
-
-      struct RayBoxResult {
-        tNear: f32,
-        tFar: f32,
-        hit: bool,
-      }
-
-      fn rayBoxIntersection(rayOrigin: vec3f, rayDir: vec3f, boxMin: vec3f, boxMax: vec3f) -> RayBoxResult {
-        let invDir = (1f / rayDir);
-        let t0 = ((boxMin - rayOrigin) * invDir);
-        let t1 = ((boxMax - rayOrigin) * invDir);
-        let tmin = min(t0, t1);
-        let tmax = max(t0, t1);
-        let tNear = max(max(tmin.x, tmin.y), tmin.z);
-        let tFar = min(min(tmax.x, tmax.y), tmax.z);
-        let hit = ((tFar >= tNear) && (tFar >= 0f));
-        return RayBoxResult(tNear, tFar, hit);
-      }
-
-      fn next() -> u32 {
-        {
-          let s0 = gpuSeed[0i];
-          var s1 = gpuSeed[1i];
-          s1 ^= s0;
-          gpuSeed[0i] = ((rotl(s0, 26u) ^ s1) ^ (s1 << 9u));
-          gpuSeed[1i] = rotl(s1, 13u);
-          return (rotl((gpuSeed[0i] * 2654435771u), 5u) * 5u);
-        }
-      }
-
-      fn u32To01F32(value: u32) -> f32 {
-        let mantissa = (value & 8388607u);
-        let bits = (1065353216u | mantissa);
-        let f = bitcast<f32>(bits);
-        return (f - 1f);
-      }
-
-      fn sample() -> f32 {
-        let r = next();
-        return u32To01F32(r);
-      }
-
-      fn randFloat01() -> f32 {
-        return sample();
-      }
-
-      @group(1) @binding(0) var state: texture_3d<f32>;
-
-      @group(0) @binding(1) var sampler_1: sampler;
-
-      struct fragmentShader_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn fragmentShader(_arg_0: fragmentShader_Input) -> @location(0) vec4f {
-        randSeed2(_arg_0.uv);
-        let ndc = vec2f(((_arg_0.uv.x * 2f) - 1f), (1f - (_arg_0.uv.y * 2f)));
-        let ndcNear = vec4f(ndc, -1f, 1f);
-        let ndcFar = vec4f(ndc, 1f, 1f);
-        let worldNear = (cameraData.invViewProj * ndcNear);
-        let worldFar = (cameraData.invViewProj * ndcFar);
-        let rayOrigin = (worldNear.xyz / worldNear.w);
-        let rayEnd = (worldFar.xyz / worldFar.w);
-        let rayDir = normalize((rayEnd - rayOrigin));
-        let boxMin = vec3f();
-        let boxMax = vec3f(256);
-        let isect = rayBoxIntersection(rayOrigin, rayDir, boxMin, boxMax);
-        if (!(isect.hit)) {
-          return vec4f();
-        }
-        let jitter = (randFloat01() * 20f);
-        let tStart = max((isect.tNear + jitter), jitter);
-        let tEnd = isect.tFar;
-        let intersectionLength = (tEnd - tStart);
-        const baseStepsPerUnit = 0.30000001192092896f;
-        const minSteps = 8i;
-        const maxSteps = 48i;
-        let adaptiveSteps = clamp(i32((intersectionLength * baseStepsPerUnit)), minSteps, maxSteps);
-        let numSteps = adaptiveSteps;
-        let stepSize = (intersectionLength / f32(numSteps));
-        const thresholdLo = 0.05999999865889549f;
-        const thresholdHi = 0.25f;
-        const gamma = 1.399999976158142f;
-        const sigmaT = 0.10000000149011612f;
-        let albedo = vec3f(0.5699999928474426, 0.4399999976158142, 0.9599999785423279);
-        var transmittance = 1f;
-        var accum = vec3f();
-        const TMin = 0.0010000000474974513f;
-        var i = 0i;
-        while (((i < numSteps) && (transmittance > TMin))) {
-          let t = (tStart + ((f32(i) + 0.5f) * stepSize));
-          let pos = (rayOrigin + (rayDir * t));
-          let texCoord = (pos / vec3f(256));
-          let sampleValue = textureSampleLevel(state, sampler_1, texCoord, 0).x;
-          let d0 = smoothstep(thresholdLo, thresholdHi, sampleValue);
-          let density = pow(d0, gamma);
-          let alphaSrc = (1f - exp(((-(sigmaT) * density) * stepSize)));
-          let contrib = (albedo * alphaSrc);
-          accum += (contrib * transmittance);
-          transmittance = (transmittance * (1f - alphaSrc));
-          i += 1i;
-        }
-        let alpha = (1f - transmittance);
-        return vec4f(accum, alpha);
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/slime-mold.test.ts b/apps/typegpu-docs/tests/individual-example-tests/slime-mold.test.ts
index cd79785977..d7bfab0062 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/slime-mold.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/slime-mold.test.ts
@@ -93,8 +93,8 @@ describe('slime mold example', () => {
 
       fn wrappedCallback(x: u32, _arg_1: u32, _arg_2: u32) {
         randSeed(((f32(x) / 2e+5f) + 0.1f));
-        let pos = ((randInUnitCircle() * 118f) + vec2f(128));
-        let angle = atan2((128f - pos.y), (128f - pos.x));
+        let pos = ((randInUnitCircle() * 502f) + vec2f(512));
+        let angle = atan2((512f - pos.y), (512f - pos.x));
         agentsData[x] = Agent(pos, angle);
       }
 
@@ -105,6 +105,29 @@ describe('slime mold example', () => {
         wrappedCallback(id.x, id.y, id.z);
       }
 
+      struct fullScreenTriangle_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
+        let pos = array<vec2f, 3>(vec2f(-1), vec2f(3, -1), vec2f(-1, 3));
+        let uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
+        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0f, 1f), uv[vertexIndex]);
+      }
+
+      @group(1) @binding(0) var state: texture_2d<f32>;
+
+      @group(0) @binding(0) var filteringSampler: sampler;
+
+      struct fragmentShader_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn fragmentShader(_arg_0: fragmentShader_Input) -> @location(0) vec4f {
+        return textureSample(state, filteringSampler, _arg_0.uv);
+      }
+
       @group(1) @binding(0) var oldState: texture_storage_2d<rgba8unorm, read>;
 
       struct Params {
@@ -367,29 +390,6 @@ describe('slime mold example', () => {
         let oldState_1 = textureLoad(oldState, vec2u(newPos)).rgb;
         let newState = (oldState_1 + 1f);
         textureStore(newState_1, vec2u(newPos), vec4f(newState, 1f));
-      }
-
-      struct fullScreenTriangle_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
-        let pos = array<vec2f, 3>(vec2f(-1), vec2f(3, -1), vec2f(-1, 3));
-        let uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
-        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0f, 1f), uv[vertexIndex]);
-      }
-
-      @group(1) @binding(0) var state: texture_2d<f32>;
-
-      @group(0) @binding(0) var filteringSampler: sampler;
-
-      struct fragmentShader_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn fragmentShader(_arg_0: fragmentShader_Input) -> @location(0) vec4f {
-        return textureSample(state, filteringSampler, _arg_0.uv);
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/stable-fluid.test.ts b/apps/typegpu-docs/tests/individual-example-tests/stable-fluid.test.ts
index 483bb3f4c2..d4082a508d 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/stable-fluid.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/stable-fluid.test.ts
@@ -25,7 +25,43 @@ describe('stable-fluid example', () => {
     );
 
     expect(shaderCodes).toMatchInlineSnapshot(`
-      "@group(0) @binding(0) var src: texture_2d<f32>;
+      "struct renderFn_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn renderFn(@builtin(vertex_index) idx: u32) -> renderFn_Output {
+        let vertices = array<vec2f, 3>(vec2f(-1), vec2f(3, -1), vec2f(-1, 3));
+        let texCoords = array<vec2f, 3>(vec2f(), vec2f(2, 0), vec2f(0, 2));
+        return renderFn_Output(vec4f(vertices[idx], 0f, 1f), texCoords[idx]);
+      }
+
+      @group(0) @binding(0) var result: texture_2d<f32>;
+
+      @group(0) @binding(2) var linSampler: sampler;
+
+      @group(0) @binding(1) var background: texture_2d<f32>;
+
+      struct fragmentImageFn_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn fragmentImageFn(_arg_0: fragmentImageFn_Input) -> @location(0) vec4f {
+        const pixelStep = 0.001953125f;
+        let leftSample = textureSample(result, linSampler, vec2f((_arg_0.uv.x - pixelStep), _arg_0.uv.y)).x;
+        let rightSample = textureSample(result, linSampler, vec2f((_arg_0.uv.x + pixelStep), _arg_0.uv.y)).x;
+        let upSample = textureSample(result, linSampler, vec2f(_arg_0.uv.x, (_arg_0.uv.y + pixelStep))).x;
+        let downSample = textureSample(result, linSampler, vec2f(_arg_0.uv.x, (_arg_0.uv.y - pixelStep))).x;
+        let gradientX = (rightSample - leftSample);
+        let gradientY = (upSample - downSample);
+        const distortStrength = 0.8;
+        let distortVector = vec2f(gradientX, gradientY);
+        let distortedUV = (_arg_0.uv + (distortVector * vec2f(distortStrength, -(distortStrength))));
+        let outputColor = textureSample(background, linSampler, vec2f(distortedUV.x, (1f - distortedUV.y)));
+        return vec4f(outputColor.rgb, 1f);
+      }
+
+      @group(0) @binding(0) var src: texture_2d<f32>;
 
       @group(0) @binding(1) var dst: texture_storage_2d<rgba16float, write>;
 
@@ -218,42 +254,6 @@ describe('stable-fluid example', () => {
         let normalizedPos = ((clampedPos + 0.5f) / vec2f(texSize.xy));
         let inkVal = textureSampleLevel(src, linSampler, normalizedPos, 0);
         textureStore(dst, pixelPos, inkVal);
-      }
-
-      struct renderFn_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn renderFn(@builtin(vertex_index) idx: u32) -> renderFn_Output {
-        let vertices = array<vec2f, 3>(vec2f(-1), vec2f(3, -1), vec2f(-1, 3));
-        let texCoords = array<vec2f, 3>(vec2f(), vec2f(2, 0), vec2f(0, 2));
-        return renderFn_Output(vec4f(vertices[idx], 0f, 1f), texCoords[idx]);
-      }
-
-      @group(0) @binding(0) var result: texture_2d<f32>;
-
-      @group(0) @binding(2) var linSampler: sampler;
-
-      @group(0) @binding(1) var background: texture_2d<f32>;
-
-      struct fragmentImageFn_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn fragmentImageFn(_arg_0: fragmentImageFn_Input) -> @location(0) vec4f {
-        const pixelStep = 0.001953125f;
-        let leftSample = textureSample(result, linSampler, vec2f((_arg_0.uv.x - pixelStep), _arg_0.uv.y)).x;
-        let rightSample = textureSample(result, linSampler, vec2f((_arg_0.uv.x + pixelStep), _arg_0.uv.y)).x;
-        let upSample = textureSample(result, linSampler, vec2f(_arg_0.uv.x, (_arg_0.uv.y + pixelStep))).x;
-        let downSample = textureSample(result, linSampler, vec2f(_arg_0.uv.x, (_arg_0.uv.y - pixelStep))).x;
-        let gradientX = (rightSample - leftSample);
-        let gradientY = (upSample - downSample);
-        const distortStrength = 0.8;
-        let distortVector = vec2f(gradientX, gradientY);
-        let distortedUV = (_arg_0.uv + (distortVector * vec2f(distortStrength, -(distortStrength))));
-        let outputColor = textureSample(background, linSampler, vec2f(distortedUV.x, (1f - distortedUV.y)));
-        return vec4f(outputColor.rgb, 1f);
       }"
     `);
   });
diff --git a/apps/typegpu-docs/tests/individual-example-tests/utils/commonMocks.ts b/apps/typegpu-docs/tests/individual-example-tests/utils/commonMocks.ts
index 1ef881c9a0..43b9808fe5 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/utils/commonMocks.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/utils/commonMocks.ts
@@ -81,6 +81,9 @@ export function setupCommonMocks() {
     );
 
     vi.stubGlobal('fetch', mockFetch);
+
+    // Most examples observe the canvas to adapt its resolution
+    mockResizeObserver();
   });
 }
 
@@ -95,12 +98,32 @@ export function mockFonts() {
 export function mockResizeObserver() {
   vi.stubGlobal(
     'ResizeObserver',
-    vi.fn(function () {
-      return {
-        observe: vi.fn(),
+    vi.fn(function (callback: ResizeObserverCallback) {
+      let connected = true;
+      const observer = {
+        observe: vi.fn((target: Element) => {
+          // Like the real thing, notifying about the initial size right after observing
+          queueMicrotask(() => {
+            if (!connected) {
+              return;
+            }
+            const size = { inlineSize: 256, blockSize: 256 };
+            const entry = {
+              target,
+              contentRect: { width: 256, height: 256 },
+              contentBoxSize: [size],
+              borderBoxSize: [size],
+              devicePixelContentBoxSize: [size],
+            } as unknown as ResizeObserverEntry;
+            callback([entry], observer as unknown as ResizeObserver);
+          });
+        }),
         unobserve: vi.fn(),
-        disconnect: vi.fn(),
+        disconnect: vi.fn(() => {
+          connected = false;
+        }),
       };
+      return observer;
     }),
   );
 }

From 0521ebecaac4575c910cef5f5005e15a34b0ba3e Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 2 Oct 2026 14:01:41 +0200
Subject: [PATCH 04/12] Use common.attachAutoResizer in examples added since

---
 .../monocular-light-injection/index.html      |  2 +-
 .../monocular-light-injection/light-input.ts  | 10 +++-
 .../monocular-light-injection/renderer.ts     | 29 ++++------
 .../examples/rendering/area-light/index.html  |  2 +-
 .../examples/rendering/area-light/index.ts    | 38 ++++++++-----
 .../examples/rendering/caustics-gl/index.html |  2 +-
 .../examples/rendering/caustics-gl/index.ts   | 28 +++++++--
 .../rendering/global-illumination/index.html  |  2 +-
 .../rendering/global-illumination/index.ts    | 31 ++++++++--
 .../rendering/triplanar-mapping/index.html    |  2 +-
 .../rendering/triplanar-mapping/index.ts      | 26 ++++++---
 .../rendering/trippy-raymarching/index.html   |  1 +
 .../rendering/trippy-raymarching/index.ts     | 46 ++++++++-------
 .../src/examples/simple/texture-gl/index.html |  2 +-
 .../src/examples/simple/texture-gl/index.ts   | 31 +++++++---
 .../examples/simple/triangle-gl/index.html    |  2 +-
 .../src/examples/simple/triangle-gl/index.ts  | 22 +++++--
 .../examples/tests/texture-compose/index.html |  2 +-
 .../examples/tests/texture-compose/index.ts   | 22 ++++++-
 .../examples/tests/texture-mipmaps/index.html |  2 +-
 .../examples/tests/texture-mipmaps/index.ts   | 22 ++++++-
 .../tests/texture-write-3d/index.html         |  2 +-
 .../examples/tests/texture-write-3d/index.ts  | 24 +++++++-
 .../examples/tests/texture-write/index.html   |  2 +-
 .../src/examples/tests/texture-write/index.ts | 22 ++++++-
 .../tests/triangle-targets/index.html         |  2 +-
 .../examples/tests/triangle-targets/index.ts  | 57 ++++++++++++++-----
 .../threejs/texture-access/index.html         |  2 +-
 28 files changed, 314 insertions(+), 121 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/index.html b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/index.html
index b718096d63..1d4609e410 100644
--- a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/index.html
@@ -1,4 +1,4 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
 <video autoplay muted playsinline></video>
 
 <div class="status">
diff --git a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/light-input.ts b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/light-input.ts
index 65adafa3ed..8917d75d14 100644
--- a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/light-input.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/light-input.ts
@@ -68,9 +68,15 @@ export function setupLightInput(
     if (rect.width <= 0 || rect.height <= 0) {
       return undefined;
     }
+
+    // Taking into account the square aspect ratio
+    const size = Math.min(rect.width, rect.height);
+    const squareLeft = rect.left + (rect.width - size) / 2;
+    const squareTop = rect.top + (rect.height - size) / 2;
+
     return {
-      x: (event.clientX - rect.left) / rect.width,
-      y: (event.clientY - rect.top) / rect.height,
+      x: (event.clientX - squareLeft) / size,
+      y: (event.clientY - squareTop) / size,
     };
   }
 
diff --git a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/renderer.ts b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/renderer.ts
index 2d041ac095..b10b974723 100644
--- a/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/renderer.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/monocular-light-injection/renderer.ts
@@ -33,7 +33,6 @@ import {
 } from './shaders.ts';
 
 const MAX_CANVAS_SIDE = 1024;
-const MAX_PIXEL_RATIO = 2;
 
 const LIGHT_Z_CLEARANCE = 0.04;
 export const LIGHT_Z_MIN = SURFACE_FAR_Z + LIGHT_Z_CLEARANCE;
@@ -89,8 +88,8 @@ export const defaultRelightingSettings: RelightingState = {
 
 export class DepthRelightingRenderer {
   readonly #root: TgpuRoot;
-  readonly #canvas: HTMLCanvasElement;
   readonly #context: GPUCanvasContext;
+  readonly #autoResizer: common.AutoResizer;
   readonly #rangeEstimator: DepthDisparityRangeEstimator;
   readonly #frameRange: TgpuBuffer<d.Vec2f> & StorageFlag;
   readonly #stableRange: TgpuBuffer<d.Vec2f> & StorageFlag;
@@ -111,8 +110,17 @@ export class DepthRelightingRenderer {
 
   constructor(root: TgpuRoot, canvas: HTMLCanvasElement) {
     this.#root = root;
-    this.#canvas = canvas;
     this.#context = root.configureContext({ canvas, alphaMode: 'opaque' });
+    this.#autoResizer = common.attachAutoResizer({
+      root,
+      canvas,
+      onResize() {
+        // Keeping the aspect ratio 1:1, and limiting the resolution
+        const size = Math.min(canvas.width, canvas.height, MAX_CANVAS_SIDE);
+        canvas.width = size;
+        canvas.height = size;
+      },
+    });
     this.#rangeEstimator = new DepthDisparityRangeEstimator(root);
     this.#frameRange = root.createBuffer(d.vec2f, d.vec2f(0, 1)).$usage('storage');
     this.#stableRange = root.createBuffer(d.vec2f, d.vec2f(0, 1)).$usage('storage');
@@ -224,7 +232,6 @@ export class DepthRelightingRenderer {
     }
     const updateDepth = !options?.skipDepth || this.#firstFrame;
 
-    this.#syncCanvasSize();
     this.#uvTransform = frame.uvTransform;
     this.#swapAxes = frame.swapAxes;
     this.#writeRelightParams();
@@ -268,6 +275,7 @@ export class DepthRelightingRenderer {
 
   destroy(): void {
     this.detach();
+    this.#autoResizer.detach();
     this.#rangeEstimator.destroy();
     this.#frameRange.destroy();
     this.#stableRange.destroy();
@@ -276,19 +284,6 @@ export class DepthRelightingRenderer {
     this.#context.unconfigure();
   }
 
-  #syncCanvasSize(): void {
-    const displayWidth = this.#canvas.clientWidth;
-    if (displayWidth <= 0) {
-      return;
-    }
-    const ratio = Math.min(globalThis.devicePixelRatio || 1, MAX_PIXEL_RATIO);
-    const side = Math.min(MAX_CANVAS_SIDE, Math.max(1, Math.round(displayWidth * ratio)));
-    if (this.#canvas.width !== side || this.#canvas.height !== side) {
-      this.#canvas.width = side;
-      this.#canvas.height = side;
-    }
-  }
-
   #writeRelightParams(): void {
     this.#relightParams.write({
       uvTransform: this.#uvTransform,
diff --git a/apps/typegpu-docs/src/examples/rendering/area-light/index.html b/apps/typegpu-docs/src/examples/rendering/area-light/index.html
index 581d6789f8..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/area-light/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/area-light/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/area-light/index.ts b/apps/typegpu-docs/src/examples/rendering/area-light/index.ts
index 9c0b4aeb7e..900f2db755 100644
--- a/apps/typegpu-docs/src/examples/rendering/area-light/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/area-light/index.ts
@@ -1,4 +1,4 @@
-import { d, std, tgpu } from 'typegpu';
+import { common, d, std, tgpu } from 'typegpu';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 import { defineControls } from '../../common/defineControls.ts';
 import { BAKE_WORKGROUP_SIZE, SCENE_VERTICES, bakeScene } from './geometry.ts';
@@ -151,12 +151,6 @@ const { cleanupCamera } = setupOrbitCamera(
   (state) => cameraUniform.write(state),
 );
 
-const resizeObserver = new ResizeObserver(() => {
-  destroyRenderTargets(targets);
-  targets = createRenderTargets();
-});
-resizeObserver.observe(canvas);
-
 let animationFrameId: number;
 
 function hueColor(hue: number) {
@@ -213,11 +207,7 @@ function updateDisco(time: number) {
   }
 }
 
-function render(time: number) {
-  updateDisco(time);
-  previousFrameTime = time;
-  paramsUniform.patch({ time: time * 0.001 });
-
+function render() {
   const encoder = root['~unstable'].createCommandEncoder();
   const pass = encoder.beginRenderPass({
     colorAttachments: [
@@ -240,11 +230,29 @@ function render(time: number) {
 
   pass.end();
   encoder.submit();
+}
 
-  animationFrameId = requestAnimationFrame(render);
+function frame(time: number) {
+  updateDisco(time);
+  previousFrameTime = time;
+  paramsUniform.patch({ time: time * 0.001 });
+
+  render();
+
+  animationFrameId = requestAnimationFrame(frame);
 }
 
-animationFrameId = requestAnimationFrame(render);
+animationFrameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    destroyRenderTargets(targets);
+    targets = createRenderTargets();
+    render();
+  },
+});
 
 const LIGHTS = [
   { name: 'key', maxIntensity: 12 },
@@ -297,7 +305,7 @@ export const controls = defineControls({
 export function onCleanup() {
   cancelAnimationFrame(animationFrameId);
   cleanupCamera();
-  resizeObserver.disconnect();
+  autoResizer.detach();
   destroyRenderTargets(targets);
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.html b/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.ts b/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.ts
index 03c1d65df8..4225610a0a 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/caustics-gl/index.ts
@@ -1,5 +1,5 @@
 import { perlin3d } from '@typegpu/noise';
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { initWithGL } from '@typegpu/gl';
 import { defineControls } from '../../common/defineControls.ts';
 
@@ -136,16 +136,31 @@ const pipeline = root.createRenderPipeline({
 
 let isRunning = true;
 
-function draw(timestamp: number) {
+function render() {
+  pipeline.withColorAttachment({ view: context }).draw(3);
+}
+
+function frame(timestamp: number) {
   if (!isRunning) return;
 
   time.write((timestamp * 0.001) % 1000);
+  render();
 
-  pipeline.withColorAttachment({ view: context }).draw(3);
-
-  requestAnimationFrame(draw);
+  requestAnimationFrame(frame);
 }
-requestAnimationFrame(draw);
+requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 // #region Example controls and cleanup
 
@@ -163,6 +178,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   isRunning = false;
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/global-illumination/index.html b/apps/typegpu-docs/src/examples/rendering/global-illumination/index.html
index caab91e78d..4786b20ca1 100644
--- a/apps/typegpu-docs/src/examples/rendering/global-illumination/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/global-illumination/index.html
@@ -1 +1 @@
-<canvas style="touch-action: none; cursor: crosshair"></canvas>
+<canvas class="w-full h-full object-contain" style="touch-action: none; cursor: crosshair"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/global-illumination/index.ts b/apps/typegpu-docs/src/examples/rendering/global-illumination/index.ts
index 182255797f..3b06cd5c55 100644
--- a/apps/typegpu-docs/src/examples/rendering/global-illumination/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/global-illumination/index.ts
@@ -158,8 +158,7 @@ function updateLighting(encoder: TgpuCommandEncoder) {
   pass.end();
 }
 
-let frameId = requestAnimationFrame(frame);
-function frame() {
+function render() {
   const encoder = root['~unstable'].createCommandEncoder();
 
   if (lightingDirty) {
@@ -172,9 +171,26 @@ function frame() {
   pass.end();
 
   encoder.submit();
+}
+
+let frameId = requestAnimationFrame(frame);
+function frame() {
+  render();
   frameId = requestAnimationFrame(frame);
 }
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
+
 function moveLamp(event: PointerEvent) {
   if (event.type === 'pointerdown') {
     canvas.setPointerCapture(event.pointerId);
@@ -184,9 +200,15 @@ function moveLamp(event: PointerEvent) {
   }
 
   const rect = canvas.getBoundingClientRect();
+
+  // Taking into account the square aspect ratio
+  const size = Math.min(rect.width, rect.height);
+  const squareLeft = rect.x + (rect.width - size) / 2;
+  const squareTop = rect.y + (rect.height - size) / 2;
+
   lampPosition.write([
-    ((event.clientX - rect.left) / rect.width) * sceneSize,
-    ((event.clientY - rect.top) / rect.height) * sceneSize,
+    ((event.clientX - squareLeft) / size) * sceneSize,
+    ((event.clientY - squareTop) / size) * sceneSize,
   ]);
   lightingDirty = true;
 }
@@ -211,6 +233,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.html b/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.html
index 581d6789f8..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.ts b/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.ts
index 3e13b626ec..823a6a322f 100644
--- a/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/triplanar-mapping/index.ts
@@ -1,4 +1,4 @@
-import { d, std, tgpu } from 'typegpu';
+import { common, d, std, tgpu } from 'typegpu';
 import { setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 import { defineControls } from '../../common/defineControls.ts';
 import { loadModel } from './load-model.ts';
@@ -287,8 +287,7 @@ const splitComparison = createSplitComparison(canvas, 'Triplanar Mapping', 'Mesh
   splitRatio = ratio;
 });
 
-let frameId: number;
-function frame() {
+function render() {
   const splitX = Math.round(canvas.width * splitRatio);
   const encoder = root['~unstable'].createCommandEncoder();
   const pass = encoder.beginRenderPass({
@@ -303,6 +302,11 @@ function frame() {
 
   pass.end();
   encoder.submit();
+}
+
+let frameId: number;
+function frame() {
+  render();
   frameId = requestAnimationFrame(frame);
 }
 frameId = requestAnimationFrame(frame);
@@ -362,17 +366,21 @@ export const controls = defineControls({
   },
 });
 
-const resizeObserver = new ResizeObserver(() => {
-  depthTexture.destroy();
-  depthTexture = createDepthTexture();
-  splitComparison.sync();
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    depthTexture.destroy();
+    depthTexture = createDepthTexture();
+    splitComparison.sync();
+    render();
+  },
 });
-resizeObserver.observe(canvas);
 
 export function onCleanup() {
   cancelAnimationFrame(frameId);
   cleanupCamera();
-  resizeObserver.disconnect();
+  autoResizer.detach();
   splitComparison.destroy();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.html b/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.html
index a431ef4a59..2e84768316 100644
--- a/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.html
+++ b/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.html
@@ -1,3 +1,4 @@
 <canvas
+  class="w-full h-full"
   style="image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none"
 ></canvas>
diff --git a/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.ts b/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.ts
index e94b6e8070..320929125e 100644
--- a/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.ts
+++ b/apps/typegpu-docs/src/examples/rendering/trippy-raymarching/index.ts
@@ -163,36 +163,44 @@ let isRunning = true;
 let animationFrameId = 0;
 let resolutionScale = 1.0;
 
-function resizeCanvas() {
-  const dpr = window.devicePixelRatio || 1;
-  const targetWidth = Math.max(1, Math.floor(canvas.clientWidth * dpr * resolutionScale));
-  const targetHeight = Math.max(1, Math.floor(canvas.clientHeight * dpr * resolutionScale));
-
-  if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
-    canvas.width = targetWidth;
-    canvas.height = targetHeight;
-    aspectRatioUniform.write(targetWidth / targetHeight);
-  }
+function render() {
+  const view = context.getCurrentTexture().createView();
+  pipeline.withColorAttachment({ view }).draw(3);
 }
 
-const resizeObserver = new ResizeObserver(() => resizeCanvas());
-resizeObserver.observe(canvas);
-resizeCanvas();
-
 function frame(timestamp: number) {
   if (!isRunning) {
     return;
   }
 
   timeUniform.write(timestamp / 1000);
-  const view = context.getCurrentTexture().createView();
-
-  pipeline.withColorAttachment({ view }).draw(3);
+  render();
   animationFrameId = requestAnimationFrame(frame);
 }
 
 animationFrameId = requestAnimationFrame(frame);
 
+// The full resolution of the canvas, before applying the resolution scale
+let fullWidth = canvas.width;
+let fullHeight = canvas.height;
+
+function applyResolutionScale() {
+  canvas.width = Math.max(1, Math.floor(fullWidth * resolutionScale));
+  canvas.height = Math.max(1, Math.floor(fullHeight * resolutionScale));
+  aspectRatioUniform.write(canvas.width / canvas.height);
+  render();
+}
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    fullWidth = canvas.width;
+    fullHeight = canvas.height;
+    applyResolutionScale();
+  },
+});
+
 // #region Example controls and cleanup
 
 const paramSlider = (
@@ -213,7 +221,7 @@ export const controls = defineControls({
     step: 0.05,
     onSliderChange: (value) => {
       resolutionScale = value;
-      resizeCanvas();
+      applyResolutionScale();
     },
   },
   'Sphere spacing': paramSlider('sphereSpacing', { initial: 4, min: 1, max: 10, step: 0.1 }),
@@ -229,7 +237,7 @@ export const controls = defineControls({
 export function onCleanup() {
   isRunning = false;
   cancelAnimationFrame(animationFrameId);
-  resizeObserver.disconnect();
+  autoResizer.detach();
   cleanupController.abort();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/texture-gl/index.html b/apps/typegpu-docs/src/examples/simple/texture-gl/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/texture-gl/index.html
+++ b/apps/typegpu-docs/src/examples/simple/texture-gl/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/texture-gl/index.ts b/apps/typegpu-docs/src/examples/simple/texture-gl/index.ts
index 886914063b..09a3d064c2 100644
--- a/apps/typegpu-docs/src/examples/simple/texture-gl/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/texture-gl/index.ts
@@ -1,5 +1,5 @@
 import { initWithGL } from '@typegpu/gl';
-import { d, std, tgpu } from 'typegpu';
+import { common, d, std, tgpu } from 'typegpu';
 
 const root = initWithGL();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -68,18 +68,33 @@ const showSurface = root.createRenderPipeline({
   },
 });
 
-let animationFrame: number;
-
-function frame() {
-  animationFrame = requestAnimationFrame(frame);
-
+function render() {
   paintSurface.withColorAttachment({ view: surfaceRenderView }).draw(3);
   showSurface.withColorAttachment({ view: context }).draw(3);
 }
 
-animationFrame = requestAnimationFrame(frame);
+let frameId: number;
+function frame() {
+  render();
+  frameId = requestAnimationFrame(frame);
+}
+
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export function onCleanup() {
-  cancelAnimationFrame(animationFrame);
+  cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/simple/triangle-gl/index.html b/apps/typegpu-docs/src/examples/simple/triangle-gl/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle-gl/index.html
+++ b/apps/typegpu-docs/src/examples/simple/triangle-gl/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/simple/triangle-gl/index.ts b/apps/typegpu-docs/src/examples/simple/triangle-gl/index.ts
index fb903598ec..ab38f45c77 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle-gl/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/triangle-gl/index.ts
@@ -1,4 +1,4 @@
-import { tgpu, d, std } from 'typegpu';
+import { tgpu, common, d, std } from 'typegpu';
 import { initWithGL } from '@typegpu/gl';
 
 // Constants and helper functions
@@ -40,18 +40,32 @@ const pipeline = root.createRenderPipeline({
   },
 });
 
-// Setting up the canvas and drawing to it
+// Setting up the canvas
 
+const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({
-  canvas: document.querySelector('canvas') as HTMLCanvasElement,
+  canvas,
   alphaMode: 'premultiplied',
 });
 
-pipeline.withColorAttachment({ view: context }).draw(3);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    // Drawing once, and then each time the canvas resizes
+    pipeline.withColorAttachment({ view: context }).draw(3);
+  },
+});
 
 // #region Cleanup
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/tests/texture-compose/index.html b/apps/typegpu-docs/src/examples/tests/texture-compose/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-compose/index.html
+++ b/apps/typegpu-docs/src/examples/tests/texture-compose/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/texture-compose/index.ts b/apps/typegpu-docs/src/examples/tests/texture-compose/index.ts
index fb4219109c..67e9f43109 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-compose/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/texture-compose/index.ts
@@ -76,10 +76,26 @@ const pipeline = root.createRenderPipeline({
 
 function render() {
   pipeline.withColorAttachment({ view: context }).draw(3);
+}
 
-  requestAnimationFrame(render);
+let frameId: number;
+function frame() {
+  render();
+  frameId = requestAnimationFrame(frame);
 }
-requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 const channelOptions = ['r', 'g', 'b', 'a', 'none'] as const;
 
@@ -140,5 +156,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.html b/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.html
+++ b/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.ts b/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.ts
index 98669a82f7..00a318bf34 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/texture-mipmaps/index.ts
@@ -107,10 +107,26 @@ writeLayerImages();
 
 function render() {
   pipeline.withColorAttachment({ view: context }).draw(3);
+}
 
-  requestAnimationFrame(render);
+let frameId: number;
+function frame() {
+  render();
+  frameId = requestAnimationFrame(frame);
 }
-requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export const controls = defineControls({
   'Mip level': {
@@ -163,5 +179,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.html b/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.html
+++ b/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.ts b/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.ts
index 44f3c4d6df..8578636f76 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/texture-write-3d/index.ts
@@ -172,12 +172,28 @@ const pipeline = root.createRenderPipeline({
 writeVolumeDirect();
 
 function render() {
-  angleUniform.write((performance.now() / 1000) * 0.4);
   pipeline.withColorAttachment({ view: context }).draw(3);
+}
 
-  requestAnimationFrame(render);
+let frameId: number;
+function frame() {
+  angleUniform.write((performance.now() / 1000) * 0.4);
+  render();
+  frameId = requestAnimationFrame(frame);
 }
-requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export const controls = defineControls({
   'Mip level (1 = max)': {
@@ -222,5 +238,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/tests/texture-write/index.html b/apps/typegpu-docs/src/examples/tests/texture-write/index.html
index aa8cc321b3..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-write/index.html
+++ b/apps/typegpu-docs/src/examples/tests/texture-write/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain"></canvas>
diff --git a/apps/typegpu-docs/src/examples/tests/texture-write/index.ts b/apps/typegpu-docs/src/examples/tests/texture-write/index.ts
index 7db8cef7b8..b7a92f925a 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-write/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/texture-write/index.ts
@@ -137,10 +137,26 @@ function rebuild() {
 
 function render() {
   viewer.pipeline.with(bindGroup).withColorAttachment({ view: context }).draw(3);
+}
 
-  requestAnimationFrame(render);
+let frameId: number;
+function frame() {
+  render();
+  frameId = requestAnimationFrame(frame);
 }
-requestAnimationFrame(render);
+frameId = requestAnimationFrame(frame);
+
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+    render();
+  },
+});
 
 export const controls = defineControls({
   Format: {
@@ -237,5 +253,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
index aa8cc321b3..8167d9f1c1 100644
--- a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
+++ b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full object-contain" />
diff --git a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.ts b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.ts
index adc2a914c5..498d1781c7 100644
--- a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.ts
+++ b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.ts
@@ -10,13 +10,9 @@ const context = root.configureContext({
   format,
 });
 
-const secondTexture = root
-  .createTexture({
-    format: 'bgra8unorm',
-    size: [canvas.clientWidth * devicePixelRatio, canvas.clientHeight * devicePixelRatio, 1],
-  })
-  .$usage('render', 'sampled');
-const secondTextureView = secondTexture.createView(d.texture2d());
+const secondTextureLayout = tgpu.bindGroupLayout({
+  secondTexture: { texture: d.texture2d() },
+});
 const sampler = root.createSampler({});
 
 // A pipeline with two targets.
@@ -45,7 +41,7 @@ const blitPipeline = root.createRenderPipeline({
   vertex: common.fullScreenTriangle,
   fragment: ({ uv }) => {
     'use gpu';
-    const value = std.textureSample(secondTextureView.$, sampler.$, 1 - uv);
+    const value = std.textureSample(secondTextureLayout.$.secondTexture, sampler.$, 1 - uv);
     if (std.any(std.gt(value, d.vec4f(0)))) {
       return value;
     }
@@ -62,18 +58,49 @@ const blitPipeline = root.createRenderPipeline({
 
 // Run both pipelines
 
-pipeline
-  .withColorAttachment({
-    workTexture: { view: secondTexture.createView('render') },
-    canvas: { view: context },
-  })
-  .draw(3);
+function render() {
+  const secondTexture = root
+    .createTexture({
+      format: 'bgra8unorm',
+      size: [canvas.width, canvas.height],
+    })
+    .$usage('render', 'sampled');
+  const secondTextureBindGroup = root.createBindGroup(secondTextureLayout, {
+    secondTexture,
+  });
+
+  pipeline
+    .withColorAttachment({
+      workTexture: { view: secondTexture.createView('render') },
+      canvas: { view: context },
+    })
+    .draw(3);
+
+  blitPipeline
+    .with(secondTextureBindGroup)
+    .withColorAttachment({ view: context, loadOp: 'load' })
+    .draw(3);
+
+  secondTexture.destroy();
+}
 
-blitPipeline.withColorAttachment({ view: context, loadOp: 'load' }).draw(3);
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    // Keeping the aspect ratio 1:1
+    const size = Math.min(canvas.width, canvas.height);
+    canvas.width = size;
+    canvas.height = size;
+
+    render();
+  },
+});
 
 // #region Cleanup
 
 export function onCleanup() {
+  autoResizer.detach();
   root.destroy();
 }
 
diff --git a/apps/typegpu-docs/src/examples/threejs/texture-access/index.html b/apps/typegpu-docs/src/examples/threejs/texture-access/index.html
index aa8cc321b3..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/threejs/texture-access/index.html
+++ b/apps/typegpu-docs/src/examples/threejs/texture-access/index.html
@@ -1 +1 @@
-<canvas></canvas>
+<canvas class="w-full h-full"></canvas>

From bbb1f08f74c94a9a0a8313bee2e2cc6cbe9e9861 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 2 Oct 2026 14:27:52 +0200
Subject: [PATCH 05/12] Fix issues found while verifying examples in the
 browser

- Forward onResize from the Jelly Slider landing example, and make it
  required for landing examples
- Only recreate blur textures in background-segmentation when the video
  frame size changes
---
 .../src/components/landing-examples/HoverExampleLive.tsx | 4 ++--
 .../src/components/landing-examples/JellySlider.tsx      | 5 ++++-
 .../image-processing/background-segmentation/index.ts    | 9 ++++++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
index 734e30ad6e..2a5e8bf210 100644
--- a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
+++ b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
@@ -3,7 +3,7 @@ import { useConfigureContext, useRoot } from '@typegpu/react';
 import { useEffect, useState } from 'react';
 
 interface ExampleState {
-  onResize?(): void;
+  onResize(): void;
   onCleanup(): void;
 }
 
@@ -49,7 +49,7 @@ export default function HoverExampleLive({ setup }: HoverExampleLiveProps) {
           root,
           canvas,
           onResize() {
-            example.onResize?.();
+            example.onResize();
           },
         });
         onCleanup = () => {
diff --git a/apps/typegpu-docs/src/components/landing-examples/JellySlider.tsx b/apps/typegpu-docs/src/components/landing-examples/JellySlider.tsx
index 2a96e4e879..0afadc8c2d 100644
--- a/apps/typegpu-docs/src/components/landing-examples/JellySlider.tsx
+++ b/apps/typegpu-docs/src/components/landing-examples/JellySlider.tsx
@@ -6,7 +6,10 @@ async function setup(root: TgpuRoot, context: GPUCanvasContext) {
   const scene = await setupScene(root, context);
   scene.qualityScale = await scene.computeOptimalQuality();
 
-  return { onCleanup: () => scene.onCleanup() };
+  return {
+    onResize: () => scene.onResize(),
+    onCleanup: () => scene.onCleanup(),
+  };
 }
 
 export default function JellySlider() {
diff --git a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
index 64b1beac5b..a8e47a2f05 100644
--- a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
+++ b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts
@@ -100,7 +100,7 @@ let blurredTextures: (TgpuTexture<{
 }> &
   StorageFlag &
   SampledFlag &
-  RenderFlag)[];
+  RenderFlag)[] = [];
 
 const generateMaskBindGroup = root.createBindGroup(generateMaskLayout, {
   maskTexture,
@@ -229,6 +229,12 @@ function handleResize() {
   }
 
   updateCropBounds(targetAspectRatio);
+}
+
+function createBlurResources(size: { width: number; height: number }) {
+  for (const texture of blurredTextures) {
+    texture.destroy();
+  }
 
   blurredTextures = [0, 1].map(() =>
     root
@@ -270,6 +276,7 @@ async function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata
 
   if (!frameSize || frameSize.width !== frameWidth || frameSize.height !== frameHeight) {
     frameSize = { width: frameWidth, height: frameHeight };
+    createBlurResources(frameSize);
     handleResize();
   }
 

From c0c25e09cec0ccadefac1bb2120c70bf2110c20d Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Sun, 18 Oct 2026 12:29:31 +0200
Subject: [PATCH 06/12] Using onResize

---
 .../landing-examples/HoverExampleLive.tsx     | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
index 2a5e8bf210..328b86e776 100644
--- a/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
+++ b/apps/typegpu-docs/src/components/landing-examples/HoverExampleLive.tsx
@@ -1,6 +1,6 @@
-import { common, type TgpuRoot } from 'typegpu';
+import type { TgpuRoot } from 'typegpu';
 import { useConfigureContext, useRoot } from '@typegpu/react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface ExampleState {
   onResize(): void;
@@ -13,11 +13,12 @@ interface HoverExampleLiveProps {
 
 export default function HoverExampleLive({ setup }: HoverExampleLiveProps) {
   const root = useRoot();
+  const exampleRef = useRef<ExampleState | null>(null);
   const { ctxRef, ref: canvasRef } = useConfigureContext({
     alphaMode: 'premultiplied',
-    // Resizing is handled by `common.attachAutoResizer` below, so that the
-    // example can react to the new size.
-    autoResize: false,
+    onResize() {
+      exampleRef.current?.onResize();
+    },
   });
   const [isActive, setIsActive] = useState(false);
   const [error, setError] = useState<unknown>(null);
@@ -43,25 +44,20 @@ export default function HoverExampleLive({ setup }: HoverExampleLiveProps) {
       if (cancelled) return;
 
       try {
-        const canvas = ctxRef.current.canvas as HTMLCanvasElement;
         const example = await setup(root, ctxRef.current);
-        const autoResizer = common.attachAutoResizer({
-          root,
-          canvas,
-          onResize() {
-            example.onResize();
-          },
-        });
-        onCleanup = () => {
-          autoResizer.detach();
-          example.onCleanup();
-        };
-
         if (cancelled) {
-          onCleanup();
+          example.onCleanup();
           return;
         }
 
+        exampleRef.current = example;
+        onCleanup = () => {
+          exampleRef.current = null;
+          example.onCleanup();
+        };
+        // The initial resize notification can arrive before async setup finishes.
+        example.onResize();
+
         setIsActive(true);
       } catch (err) {
         // Error boundaries can't catch throws from async effect callbacks, so

From 0f574a147b39fcc12333a840b598a137b4861b3b Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Sun, 18 Oct 2026 12:34:18 +0200
Subject: [PATCH 07/12] Address review comments

---
 .../src/examples/algorithms/jump-flood-distance/index.ts      | 4 +++-
 .../src/examples/tests/triangle-targets/index.html            | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
index 071b7e80ab..872e59ad84 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
@@ -34,7 +34,9 @@ let resolutionScale = 0.5;
 let [width, height] = [0, 0];
 
 function updateDimensions() {
-  [width, height] = [canvas.width, canvas.height].map((v) => Math.floor(v * resolutionScale));
+  [width, height] = [canvas.width, canvas.height].map((v) =>
+    Math.max(1, Math.floor(v * resolutionScale)),
+  );
 }
 updateDimensions();
 
diff --git a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
index 8167d9f1c1..f51033d4b0 100644
--- a/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
+++ b/apps/typegpu-docs/src/examples/tests/triangle-targets/index.html
@@ -1 +1 @@
-<canvas class="w-full h-full object-contain" />
+<canvas class="w-full h-full object-contain"></canvas>

From e1ac34af46f18370954b8d5723d01ca8a2f8c6eb Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Tue, 20 Oct 2026 14:30:58 +0200
Subject: [PATCH 08/12] Update sort snapshot

---
 .../individual-example-tests/sort.test.ts     | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/apps/typegpu-docs/tests/individual-example-tests/sort.test.ts b/apps/typegpu-docs/tests/individual-example-tests/sort.test.ts
index 8b310e0b1c..b9600fc342 100644
--- a/apps/typegpu-docs/tests/individual-example-tests/sort.test.ts
+++ b/apps/typegpu-docs/tests/individual-example-tests/sort.test.ts
@@ -21,7 +21,41 @@ describe('sort example', () => {
     );
 
     expect(shaderCodes).toMatchInlineSnapshot(`
-      "fn flatWorkgroupIndex(wid: vec3u, numWorkgroups: vec3u) -> u32 {
+      "struct fullScreenTriangle_Output {
+        @builtin(position) pos: vec4f,
+        @location(0) uv: vec2f,
+      }
+
+      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
+        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
+
+        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
+      }
+
+      @group(0) @binding(0) var<storage, read> data_1: array<u32>;
+
+      struct fragmentFn_Input {
+        @location(0) uv: vec2f,
+      }
+
+      @fragment fn fragmentFn(_arg_0: fragmentFn_Input) -> @location(0) vec4f {
+        let data = (&data_1);
+        let arrayLength_1 = arrayLength(&(*data));
+        let cols = u32(round(sqrt(f32(arrayLength_1))));
+        let rows = u32(round((f32(arrayLength_1) / f32(cols))));
+        let col = u32(floor((_arg_0.uv.x * f32(cols))));
+        let row = u32(floor((_arg_0.uv.y * f32(rows))));
+        let idx = ((row * cols) + col);
+        if ((idx >= arrayLength_1)) {
+          return vec4f(0.10000000149011612, 0.10000000149011612, 0.10000000149011612, 1);
+        }
+        let value = (*data)[idx];
+        let normalized = (f32(value) / 255f);
+        return vec4f(normalized, normalized, normalized, 1f);
+      }
+
+      fn flatWorkgroupIndex(wid: vec3u, numWorkgroups: vec3u) -> u32 {
         return ((wid.x + (wid.y * numWorkgroups.x)) + ((wid.z * numWorkgroups.x) * numWorkgroups.y));
       }
 
@@ -325,40 +359,6 @@ describe('sort example', () => {
         if ((idx < 841u)) {
           copyAt(idx);
         }
-      }
-
-      struct fullScreenTriangle_Output {
-        @builtin(position) pos: vec4f,
-        @location(0) uv: vec2f,
-      }
-
-      @vertex fn fullScreenTriangle(@builtin(vertex_index) vertexIndex: u32) -> fullScreenTriangle_Output {
-        const pos = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
-        const uv = array<vec2f, 3>(vec2f(0, 1), vec2f(2, 1), vec2f(0, -1));
-
-        return fullScreenTriangle_Output(vec4f(pos[vertexIndex], 0, 1), uv[vertexIndex]);
-      }
-
-      @group(0) @binding(0) var<storage, read> data_1: array<u32>;
-
-      struct fragmentFn_Input {
-        @location(0) uv: vec2f,
-      }
-
-      @fragment fn fragmentFn(_arg_0: fragmentFn_Input) -> @location(0) vec4f {
-        let data = (&data_1);
-        let arrayLength_1 = arrayLength(&(*data));
-        let cols = u32(round(sqrt(f32(arrayLength_1))));
-        let rows = u32(round((f32(arrayLength_1) / f32(cols))));
-        let col = u32(floor((_arg_0.uv.x * f32(cols))));
-        let row = u32(floor((_arg_0.uv.y * f32(rows))));
-        let idx = ((row * cols) + col);
-        if ((idx >= arrayLength_1)) {
-          return vec4f(0.10000000149011612, 0.10000000149011612, 0.10000000149011612, 1);
-        }
-        let value = (*data)[idx];
-        let normalized = (f32(value) / 255f);
-        return vec4f(normalized, normalized, normalized, 1f);
       }"
     `);
   });

From d1501894f1fb7afa947c608f2430f2200ce24758 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Tue, 27 Oct 2026 14:04:36 +0100
Subject: [PATCH 09/12] Fix pointer mapping in letterboxed examples

Map pointer coordinates into the centered square drawn by object-contain
in liquid-glass, radiance-cascades and fluid-with-atomics.
---
 .../radiance-cascades/drag-controller.ts      |  8 +++++--
 .../src/examples/simple/liquid-glass/index.ts |  8 +++++--
 .../simulation/fluid-with-atomics/index.ts    | 22 ++++++++++---------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/drag-controller.ts b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/drag-controller.ts
index d95ac10e4a..2eef024f67 100644
--- a/apps/typegpu-docs/src/examples/rendering/radiance-cascades/drag-controller.ts
+++ b/apps/typegpu-docs/src/examples/rendering/radiance-cascades/drag-controller.ts
@@ -19,8 +19,12 @@ export class DragController {
 
   private canvasToUV(clientX: number, clientY: number): d.v2f {
     const rect = this.canvas.getBoundingClientRect();
-    const x = (clientX - rect.left) / rect.width;
-    const y = (clientY - rect.top) / rect.height;
+    // The canvas is letterboxed with `object-contain`, so map into the drawn square
+    const size = Math.min(rect.width, rect.height);
+    const left = rect.left + (rect.width - size) / 2;
+    const top = rect.top + (rect.height - size) / 2;
+    const x = (clientX - left) / size;
+    const y = (clientY - top) / size;
     return d.vec2f(x, y);
   }
 
diff --git a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
index b100c31ba2..bc6a19e93d 100644
--- a/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
+++ b/apps/typegpu-docs/src/examples/simple/liquid-glass/index.ts
@@ -149,8 +149,12 @@ function updatePosition(clientX: number, clientY: number) {
     return;
   }
   const rect = canvas.getBoundingClientRect();
-  const x = (clientX - rect.left) / rect.width;
-  const y = (clientY - rect.top) / rect.height;
+  // The canvas is letterboxed with `object-contain`, so map into the drawn square
+  const size = Math.min(rect.width, rect.height);
+  const left = rect.left + (rect.width - size) / 2;
+  const top = rect.top + (rect.height - size) / 2;
+  const x = (clientX - left) / size;
+  const y = (clientY - top) / size;
   mousePosUniform.write(std.clamp(d.vec2f(x, y), d.vec2f(), d.vec2f(1)));
 }
 
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
index e17e6667ca..2bc319c979 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/index.ts
@@ -518,18 +518,20 @@ const stopDrawing = () => {
   }
 };
 
-const pointerCellFromCanvasOffset = (offsetX: number, offsetY: number) => {
-  const cellSize = canvas.width / options.size;
+const pointerCellFromClient = (clientX: number, clientY: number) => {
+  const rect = canvas.getBoundingClientRect();
+  // The canvas is letterboxed with `object-contain`, so map into the drawn square
+  const size = Math.min(rect.width, rect.height);
+  const left = rect.left + (rect.width - size) / 2;
+  const top = rect.top + (rect.height - size) / 2;
+  const cellSize = size / options.size;
   return {
-    x: Math.floor((offsetX * window.devicePixelRatio) / cellSize),
-    y: options.size - Math.floor((offsetY * window.devicePixelRatio) / cellSize) - 1,
+    x: Math.floor((clientX - left) / cellSize),
+    y: options.size - Math.floor((clientY - top) / cellSize) - 1,
   };
 };
 
-const pointerCellFromTouch = (touch: Touch) => {
-  const canvasPos = canvas.getBoundingClientRect();
-  return pointerCellFromCanvasOffset(touch.clientX - canvasPos.left, touch.clientY - canvasPos.top);
-};
+const pointerCellFromTouch = (touch: Touch) => pointerCellFromClient(touch.clientX, touch.clientY);
 
 const handleDrawing = (x: number, y: number) => {
   const point = { x, y };
@@ -552,7 +554,7 @@ canvas.addEventListener('contextmenu', (event) => {
 
 canvas.onmousedown = (event) => {
   startDrawing(event.button === 2);
-  const cell = pointerCellFromCanvasOffset(event.offsetX, event.offsetY);
+  const cell = pointerCellFromClient(event.clientX, event.clientY);
   handleDrawing(cell.x, cell.y);
 };
 
@@ -563,7 +565,7 @@ canvas.onmousemove = (event) => {
     return;
   }
 
-  const cell = pointerCellFromCanvasOffset(event.offsetX, event.offsetY);
+  const cell = pointerCellFromClient(event.clientX, event.clientY);
   handleDrawing(cell.x, cell.y);
 };
 

From 3883aa2ad599fed95c92ba67ac49aa8bc8ede19f Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Tue, 27 Oct 2026 14:15:53 +0100
Subject: [PATCH 10/12] Fix pointer mapping in letterboxed jelly-slider example

---
 .../src/examples/rendering/jelly-slider/events.ts            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/events.ts b/apps/typegpu-docs/src/examples/rendering/jelly-slider/events.ts
index 9c14c294df..3a3d05a38a 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/events.ts
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/events.ts
@@ -70,7 +70,10 @@ export class EventHandler {
 
   private updateTargetMouseX(clientX: number) {
     const rect = this.canvas.getBoundingClientRect();
-    const normalizedX = (clientX - rect.left) / rect.width;
+    // The canvas is letterboxed with `object-contain`, so map into the drawn square
+    const size = Math.min(rect.width, rect.height);
+    const left = rect.left + (rect.width - size) / 2;
+    const normalizedX = (clientX - left) / size;
     const clampedX = Math.max(MOUSE_MIN_X, Math.min(MOUSE_MAX_X, normalizedX));
     this.targetMouseX =
       ((clampedX - MOUSE_RANGE_MIN) / (MOUSE_RANGE_MAX - MOUSE_RANGE_MIN)) *

From a87aad1a38de9d179aa28021161cafc37a2cfb22 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Tue, 27 Oct 2026 16:41:58 +0100
Subject: [PATCH 11/12] Move camera preview to bottom-left in camera examples

---
 .../src/examples/image-processing/ascii-filter/index.html       | 2 +-
 .../examples/image-processing/camera-thresholding/index.html    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
index 87f2fc5ad9..ac00919a34 100644
--- a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.html
@@ -9,7 +9,7 @@
   video {
     position: absolute;
     bottom: 10px;
-    right: 10px;
+    left: 10px;
     width: 25%;
     border-radius: 16px;
     background-image: linear-gradient(
diff --git a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
index 87f2fc5ad9..ac00919a34 100644
--- a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
+++ b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.html
@@ -9,7 +9,7 @@
   video {
     position: absolute;
     bottom: 10px;
-    right: 10px;
+    left: 10px;
     width: 25%;
     border-radius: 16px;
     background-image: linear-gradient(

From 0a967c1db2b5fadd79721e64557c847e0b11fb45 Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Tue, 27 Oct 2026 16:59:21 +0100
Subject: [PATCH 12/12] Use common.attachAutoResizer in App.js Venue example,
 update brush size on resize in jump-flood-distance

---
 .../examples/advanced/appjs-venue/index.html  |  2 +-
 .../examples/advanced/appjs-venue/index.ts    | 29 ++++++++++++-------
 .../algorithms/jump-flood-distance/index.ts   |  1 +
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.html b/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.html
index 581d6789f8..a1d12c864f 100644
--- a/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.html
+++ b/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.html
@@ -1 +1 @@
-<canvas data-fit-to-container></canvas>
+<canvas class="w-full h-full"></canvas>
diff --git a/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.ts b/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.ts
index 0b71f0a029..f2324549ff 100644
--- a/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.ts
+++ b/apps/typegpu-docs/src/examples/advanced/appjs-venue/index.ts
@@ -399,8 +399,6 @@ function createRenderTargets() {
     .$usage('render');
 
   return {
-    width: canvas.width,
-    height: canvas.height,
     normal,
     depth,
     colorAttachments: [
@@ -452,14 +450,6 @@ function frame(timestamp: number) {
   const dt = Math.min((timestamp - (lastTimestamp ?? timestamp)) * 0.001, 1 / 30);
   lastTimestamp = timestamp;
 
-  if (canvas.width === 0 || canvas.height === 0) {
-    return;
-  }
-  if (canvas.width !== targets.width || canvas.height !== targets.height) {
-    targets.destroy();
-    targets = createRenderTargets();
-  }
-
   controls.update(dt);
   outsideOpacity.target = controls.focus.z > 0.5 ? 1 : 0;
   outsideOpacity.step(dt);
@@ -469,6 +459,14 @@ function frame(timestamp: number) {
   outsideOpacityUniform.write(std.saturate(outsideOpacity.value));
   fadeInUniform.write(std.saturate(controls.in3dTransition * 2 - 1));
 
+  render();
+}
+
+function render() {
+  if (canvas.width === 0 || canvas.height === 0) {
+    return;
+  }
+
   const encoder = root['~unstable'].createCommandEncoder();
   const pass = encoder.beginRenderPass({
     colorAttachments: targets.colorAttachments,
@@ -506,8 +504,19 @@ function frame(timestamp: number) {
 
 frameId = requestAnimationFrame(frame);
 
+const autoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    targets.destroy();
+    targets = createRenderTargets();
+    render();
+  },
+});
+
 export function onCleanup() {
   abortController.abort();
   cancelAnimationFrame(frameId);
+  autoResizer.detach();
   root.destroy();
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
index 872e59ad84..74f753c11a 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts
@@ -363,6 +363,7 @@ const autoResizer = common.attachAutoResizer({
   onResize() {
     recreateResources();
     clearCanvas();
+    updateBrushSize();
   },
 });