diff --git a/templates/example-webgpu.html b/templates/example-webgpu.html
index 3a9341f013..ff63313fb8 100644
--- a/templates/example-webgpu.html
+++ b/templates/example-webgpu.html
@@ -1,124 +1,9 @@
-{% extends "layouts/base.html" %}
-{% block content %}
-  <div class="example">
-    <div class="example__header">
-      {% set total_ancestors = page.ancestors | length %}
-      {% set parent_idx = total_ancestors - 1 %}
-      {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
-      <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
-      <a class="example__back" href="/examples-webgpu"><i class="icon icon--chevron-left"></i> Back to examples</a>
-      <a class="example__github"
-          href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
-        <i class="icon icon--github"></i> View in GitHub
-      </a>
-    </div>
-    <div class="assets-intro media-content">
-      <h2 class="warning">Support Warning</h2>
-      WebGPU is currently only supported on Chrome starting with version 113, and only on desktop. If they don't work on
-      your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
-    </div>
-    <br />
-    <div class="example__canvas bevy-instance">
-      <div class="bevy-instance__progress-status" data-progress-status>
-        <div class="bevy-instance__progress-file" data-progress-file></div>
-        <div class="bevy-instance__progress-track">
-          <div class="bevy-instance__progress-bar" data-progress-bar></div>
-        </div>
-      </div>
-      <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas>
-    </div>
-    <div class="example__code media-content">
-      {% set filename = page.extra.code_path | split(pat="/") | last %}
-      {{ filename }}:
-      
-      {% set code = load_data(path=page.extra.code_path) %}
-      {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
-      {{ code_md | markdown(inline=true) | safe }}
-    </div>
-    {% for shader in page.extra.shader_code_paths %}
-      <div class="example__code media-content">
-        {{ shader }}:
-
-        {% set code = load_data(path="static/assets/examples/" ~ shader) %}
-        {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
-        {{ code_md | markdown(inline=true) | safe }}
-      </div>
-    {% endfor %}
-  </div>
-  <script type="module">
-  {#
-    // Hi curious user!
-    // This approach to add loading feedback on web is a big HACK. Please review `generate_wasm_examples.sh`
-    // to see the patches we're applying to the JS file to accept a custom `fetch`. This is a temporary
-    // workaround until Bevy has an in-engine mode for showing loading feedback. See:
-    // https://github.com/bevyengine/bevy-website/pull/355
-  #}
-
-  import { progressiveFetch } from '/tools.js';
-  import '/restart-audio-context.js'
-  import init from 'https://bevy-webgpu-examples.pages.dev/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
-
-  const canvasEl = document.getElementById('bevy');
-
-  let once = false;
-  const observer_callback = (_mutations, _observer) => {
-    if (!once) {
-      // Lock the canvas aspect ratio to prevent the fit_canvas_to_parent setting from creating a feedback loop causing the canvas to grow on resize
-      canvasEl.style.aspectRatio = canvasEl.attributes.width.value / canvasEl.attributes.height.value;
-      once = true;
-    }
-  };
-
-  const observer = new MutationObserver(observer_callback);
-
-  const config = { attributeFilter: ['width', 'height'] };
-
-  observer.observe(canvasEl, config);
-
-  const progressStatusEl = document.querySelector('[data-progress-status]');
-  const progressFileEl = document.querySelector('[data-progress-file]');
-  const progressBarEl = document.querySelector('[data-progress-bar]');
-  let hideProgressTimeoutId;
-
-  async function loadingBarFetch(resource) {
-    return progressiveFetch(resource, {
-      start: ({ filename }) => {
-        progressStatusEl.style.display = 'block';
-        progressFileEl.textContent = filename;
-
-        if (hideProgressTimeoutId) {
-          clearTimeout(hideProgressTimeoutId);
-        }
-      },
-      update: ({ isIndeterminate, loadedPercent }) => {
-        progressBarEl.classList.toggle('bevy-instance__progress-bar--indeterminate', isIndeterminate);
-        progressBarEl.style.width = loadedPercent + '%';
-      },
-      finish: () => {
-        {#
-          // This is a little hack to avoid progress-bar flashing between assets. The thing
-          // is that we don't know how many assets are going to load, so we don't know which
-          // one is the last one. If a new asset starts loading within 50ms, then this timeout
-          // is cleared and the progress element stays visible, avoiding the flashing.
-          // The downside is that the progress bar shows for a brief moment once the wasm starts.
-        #}
-        hideProgressTimeoutId = setTimeout(() => {
-          progressStatusEl.style.display = 'none';
-        }, 50);
-      }
-    })
-  }
-  window.bevyLoadingBarFetch = loadingBarFetch;
-
-  {#
-    // The following .catch() is a simple filter to remove an exception thrown by winit in
-    // its normal control flow. This exception will always be thrown and is not an error.
-    // Details here: https://github.com/rust-windowing/winit/blob/master/src/platform_impl/web/event_loop/mod.rs
-  #}
-  init().catch((error) => {
-    if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-      throw error;
-    }
-  });
-</script>
-{% endblock content %}
+{% extends "layouts/example.html" %}
+
+{% block examples_url %}/examples-webgpu{% endblock examples_url %}
+{% block wasm_base_url %}https://bevy-webgpu-examples.pages.dev{% endblock wasm_base_url %}
+{% block intro %}
+<h2 class="warning">Support Warning</h2>
+WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
+If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
+{% endblock intro %}
diff --git a/templates/example.html b/templates/example.html
index 554fb7e681..d73969e1ae 100644
--- a/templates/example.html
+++ b/templates/example.html
@@ -1,123 +1,8 @@
-{% extends "layouts/base.html" %}
-{% block content %}
-  <div class="example">
-    <div class="example__header">
-      {% set total_ancestors = page.ancestors | length %}
-      {% set parent_idx = total_ancestors - 1 %}
-      {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
-      <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
-      <a class="example__back" href="/examples"><i class="icon icon--chevron-left"></i> Back to examples</a>
-      <a class="example__github"
-          href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
-        <i class="icon icon--github"></i> View in GitHub
-      </a>
-    </div>
-    <div class="assets-intro media-content">
-      This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples <a href="/examples-webgpu">here</a>.
-    </div>
-    <br />
-    <div class="example__canvas bevy-instance">
-      <div class="bevy-instance__progress-status" data-progress-status>
-        <div class="bevy-instance__progress-file" data-progress-file></div>
-        <div class="bevy-instance__progress-track">
-          <div class="bevy-instance__progress-bar" data-progress-bar></div>
-        </div>
-      </div>
-      <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas>
-    </div>
-    
-    <div class="example__code media-content">
-      {% set filename = page.extra.code_path | split(pat="/") | last %}
-      {{ filename }}:
-      
-      {% set code = load_data(path=page.extra.code_path) %}
-      {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
-      {{ code_md | markdown(inline=true) | safe }}
-    </div>
-    {% for shader in page.extra.shader_code_paths %}
-      <div class="example__code media-content">
-        {{ shader }}:
-
-        {% set code = load_data(path="static/assets/examples/" ~ shader) %}
-        {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
-        {{ code_md | markdown(inline=true) | safe }}
-      </div>
-    {% endfor %}
-  </div>
-  <script type="module">
-  {#
-    // Hi curious user!
-    // This approach to add loading feedback on web is a big HACK. Please review `generate_wasm_examples.sh`
-    // to see the patches we're applying to the JS file to accept a custom `fetch`. This is a temporary
-    // workaround until Bevy has an in-engine mode for showing loading feedback. See:
-    // https://github.com/bevyengine/bevy-website/pull/355
-  #}
-
-  import { progressiveFetch } from '/tools.js';
-  import '/restart-audio-context.js'
-  import init from 'https://bevy-webgl2-examples.pages.dev/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
-
-  const canvasEl = document.getElementById('bevy');
-
-  let once = false;
-  const observer_callback = (_mutations, _observer) => {
-    if (!once) {
-      // Lock the canvas aspect ratio to prevent the fit_canvas_to_parent setting from creating a feedback loop causing the canvas to grow on resize
-      canvasEl.style.aspectRatio = canvasEl.attributes.width.value / canvasEl.attributes.height.value;
-      once = true;
-    }
-  };
-
-  const observer = new MutationObserver(observer_callback);
-
-  const config = { attributeFilter: ['width', 'height'] };
-
-  observer.observe(canvasEl, config);
-
-  const progressStatusEl = document.querySelector('[data-progress-status]');
-  const progressFileEl = document.querySelector('[data-progress-file]');
-  const progressBarEl = document.querySelector('[data-progress-bar]');
-  let hideProgressTimeoutId;
-
-  async function loadingBarFetch(resource) {
-    return progressiveFetch(resource, {
-      start: ({ filename }) => {
-        progressStatusEl.style.display = 'block';
-        progressFileEl.textContent = filename;
-
-        if (hideProgressTimeoutId) {
-          clearTimeout(hideProgressTimeoutId);
-        }
-      },
-      update: ({ isIndeterminate, loadedPercent }) => {
-        progressBarEl.classList.toggle('bevy-instance__progress-bar--indeterminate', isIndeterminate);
-        progressBarEl.style.width = loadedPercent + '%';
-      },
-      finish: () => {
-        {#
-          // This is a little hack to avoid progress-bar flashing between assets. The thing
-          // is that we don't know how many assets are going to load, so we don't know which
-          // one is the last one. If a new asset starts loading within 50ms, then this timeout
-          // is cleared and the progress element stays visible, avoiding the flashing.
-          // The downside is that the progress bar shows for a brief moment once the wasm starts.
-        #}
-        hideProgressTimeoutId = setTimeout(() => {
-          progressStatusEl.style.display = 'none';
-        }, 50);
-      }
-    })
-  }
-  window.bevyLoadingBarFetch = loadingBarFetch;
-
-  {#
-    // The following .catch() is a simple filter to remove an exception thrown by winit in
-    // its normal control flow. This exception will always be thrown and is not an error.
-    // Details here: https://github.com/rust-windowing/winit/blob/master/src/platform_impl/web/event_loop/mod.rs
-  #}
-  init().catch((error) => {
-    if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
-      throw error;
-    }
-  });
-</script>
-{% endblock content %}
+{% extends "layouts/example.html" %}
+
+{% block examples_url %}/examples{% endblock examples_url %}
+{% block wasm_base_url %}https://bevy-webgl2-examples.pages.dev{% endblock wasm_base_url %}
+{% block intro %}
+This example is running in WebGL2 and should work in most browsers.
+You can check the WebGPU examples <a href="/examples-webgpu">here</a>.
+{% endblock intro %}
diff --git a/templates/examples-webgpu.html b/templates/examples-webgpu.html
index e964e14633..03f08f6949 100644
--- a/templates/examples-webgpu.html
+++ b/templates/examples-webgpu.html
@@ -1,40 +1,10 @@
-{% extends "layouts/page-with-menu.html" %}
-{% import "macros/assets.html" as assets_macros %}
-{% block page_name %}Examples{% endblock page_name %}
-{% block mobile_page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock mobile_page_menu %}
-{% block page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock page_menu %}
-{% block page_content %}
-  <div class="assets">
-    <div class="assets-intro media-content">
-      These examples demonstrate how to use Bevy's features in a minimal, easy to understand way. Click an example below
-      to run it in
-      your browser (using WASM + WebGPU) and view the source code. You can also view these examples (and others) in the
-      <a href="https://github.com/bevyengine/bevy/tree/main/examples#examples">Bevy repo</a>.
-      <h2 class="warning">Support Warning</h2>
-      WebGPU is currently only supported on Chrome starting with version 113, and only on desktop. If they don't work on
-      your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
-    </div>
-    <div class="assets-search">
-      <input class="assets-search__input"
-              type="text"
-              id="assets-search"
-              placeholder="Search Example">
-    </div>
-    {% for subsection in section.subsections %}
-      {% set section = get_section(path=subsection) %}
-      <h1 class="asset-section" id="{{ section.title | slugify }}">
-        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-      </h1>
-      {% if section.pages %}
-        <div class="item-grid item-grid--multi-cols">
-          {% set pages = section.pages %}
-          {% if section.extra.sort_order_reversed %}
-            {% set pages = section.pages | reverse %}
-          {% endif %}
-          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
-        </div>
-      {% endif %}
-    {% endfor %}
-  </div>
-  <script type="module">import '/assets.js'</script>
-{% endblock page_content %}
+{% extends "layouts/examples.html" %}
+
+{% block intro %}
+These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
+Click an example below to run it in your browser (using WASM + WebGPU) and view the source code.
+You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/main/examples#examples">Bevy repo</a>.
+<h2 class="warning">Support Warning</h2>
+WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
+If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
+{% endblock intro %}
diff --git a/templates/examples.html b/templates/examples.html
index c9fd891742..0f24a30c5c 100644
--- a/templates/examples.html
+++ b/templates/examples.html
@@ -1,41 +1,8 @@
-{% extends "layouts/page-with-menu.html" %}
-{% import "macros/assets.html" as assets_macros %}
-{% block page_name %}Examples{% endblock page_name %}
-{% block mobile_page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock mobile_page_menu %}
-{% block page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock page_menu %}
-{% block page_content %}
-  <div class="assets">
-    <div class="assets-intro media-content">
-      These examples demonstrate how to use Bevy's features in a minimal, easy to understand way. Click an example below
-      to run it in
-      your browser (using WASM + WebGL) and view the source code. You can also view these examples (and others) in the
-      <a href="https://github.com/bevyengine/bevy/tree/latest/examples#examples">Bevy repo</a>.
-      <p>
-        If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a>
-        page.
-      </p>
-    </div>
-    <div class="assets-search">
-      <input class="assets-search__input"
-              type="text"
-              id="assets-search"
-              placeholder="Search Example">
-    </div>
-    {% for subsection in section.subsections %}
-      {% set section = get_section(path=subsection) %}
-      <h1 class="asset-section" id="{{ section.title | slugify }}">
-        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
-      </h1>
-      {% if section.pages %}
-        <div class="item-grid item-grid--multi-cols">
-          {% set pages = section.pages %}
-          {% if section.extra.sort_order_reversed %}
-            {% set pages = section.pages | reverse %}
-          {% endif %}
-          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
-        </div>
-      {% endif %}
-    {% endfor %}
-  </div>
-  <script type="module">import '/assets.js'</script>
-{% endblock page_content %}
+{% extends "layouts/examples.html" %}
+
+{% block intro %}
+These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
+Click an example below to run it in your browser (using WASM + WebGL) and view the source code.
+You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/latest/examples#examples">Bevy repo</a>.
+<p>If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a> page.</p>
+{% endblock intro %}
diff --git a/templates/layouts/example.html b/templates/layouts/example.html
new file mode 100644
index 0000000000..0b8b860020
--- /dev/null
+++ b/templates/layouts/example.html
@@ -0,0 +1,123 @@
+{% extends "layouts/base.html" %}
+{% block content %}
+  <div class="example">
+    <div class="example__header">
+      {% set total_ancestors = page.ancestors | length %}
+      {% set parent_idx = total_ancestors - 1 %}
+      {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
+      <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
+      <a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i class="icon icon--chevron-left"></i> Back to examples</a>
+      <a class="example__github"
+          href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
+        <i class="icon icon--github"></i> View in GitHub
+      </a>
+    </div>
+    <div class="assets-intro media-content">
+      {% block intro %}{% endblock intro %}
+    </div>
+    <br />
+    <div class="example__canvas bevy-instance">
+      <div class="bevy-instance__progress-status" data-progress-status>
+        <div class="bevy-instance__progress-file" data-progress-file></div>
+        <div class="bevy-instance__progress-track">
+          <div class="bevy-instance__progress-bar" data-progress-bar></div>
+        </div>
+      </div>
+      <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas>
+    </div>
+    
+    <div class="example__code media-content">
+      {% set filename = page.extra.code_path | split(pat="/") | last %}
+      {{ filename }}:
+      
+      {% set code = load_data(path=page.extra.code_path) %}
+      {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
+      {{ code_md | markdown(inline=true) | safe }}
+    </div>
+    {% for shader in page.extra.shader_code_paths %}
+      <div class="example__code media-content">
+        {{ shader }}:
+
+        {% set code = load_data(path="static/assets/examples/" ~ shader) %}
+        {% set code_md = "```rust" ~ newline ~ code ~ "```" %}
+        {{ code_md | markdown(inline=true) | safe }}
+      </div>
+    {% endfor %}
+  </div>
+  <script type="module">
+    {#
+      // Hi curious user!
+      // This approach to add loading feedback on web is a big HACK. Please review `generate_wasm_examples.sh`
+      // to see the patches we're applying to the JS file to accept a custom `fetch`. This is a temporary
+      // workaround until Bevy has an in-engine mode for showing loading feedback. See:
+      // https://github.com/bevyengine/bevy-website/pull/355
+    #}
+
+    import { progressiveFetch } from '/tools.js';
+    import '/restart-audio-context.js'
+    import init from '{% block wasm_base_url %}{% endblock wasm_base_url %}/{{ category.title }}/{{ page.extra.technical_name }}/wasm_example.js'
+
+    const canvasEl = document.getElementById('bevy');
+
+    let once = false;
+    const observer_callback = (_mutations, _observer) => {
+      if (!once) {
+        // Lock the canvas aspect ratio to prevent the fit_canvas_to_parent setting from creating a feedback loop causing the canvas to grow on resize
+        canvasEl.style.aspectRatio = canvasEl.attributes.width.value / canvasEl.attributes.height.value;
+        once = true;
+      }
+    };
+
+    const observer = new MutationObserver(observer_callback);
+
+    const config = { attributeFilter: ['width', 'height'] };
+
+    observer.observe(canvasEl, config);
+
+    const progressStatusEl = document.querySelector('[data-progress-status]');
+    const progressFileEl = document.querySelector('[data-progress-file]');
+    const progressBarEl = document.querySelector('[data-progress-bar]');
+    let hideProgressTimeoutId;
+
+    async function loadingBarFetch(resource) {
+      return progressiveFetch(resource, {
+        start: ({ filename }) => {
+          progressStatusEl.style.display = 'block';
+          progressFileEl.textContent = filename;
+
+          if (hideProgressTimeoutId) {
+            clearTimeout(hideProgressTimeoutId);
+          }
+        },
+        update: ({ isIndeterminate, loadedPercent }) => {
+          progressBarEl.classList.toggle('bevy-instance__progress-bar--indeterminate', isIndeterminate);
+          progressBarEl.style.width = loadedPercent + '%';
+        },
+        finish: () => {
+          {#
+            // This is a little hack to avoid progress-bar flashing between assets. The thing
+            // is that we don't know how many assets are going to load, so we don't know which
+            // one is the last one. If a new asset starts loading within 50ms, then this timeout
+            // is cleared and the progress element stays visible, avoiding the flashing.
+            // The downside is that the progress bar shows for a brief moment once the wasm starts.
+          #}
+          hideProgressTimeoutId = setTimeout(() => {
+            progressStatusEl.style.display = 'none';
+          }, 50);
+        }
+      })
+    }
+    window.bevyLoadingBarFetch = loadingBarFetch;
+
+    {#
+      // The following .catch() is a simple filter to remove an exception thrown by winit in
+      // its normal control flow. This exception will always be thrown and is not an error.
+      // Details here: https://github.com/rust-windowing/winit/blob/master/src/platform_impl/web/event_loop/mod.rs
+    #}
+    init().catch((error) => {
+      if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
+        throw error;
+      }
+    });
+  </script>
+{% endblock content %}
diff --git a/templates/layouts/examples.html b/templates/layouts/examples.html
new file mode 100644
index 0000000000..f865cf6a48
--- /dev/null
+++ b/templates/layouts/examples.html
@@ -0,0 +1,34 @@
+{% extends "layouts/page-with-menu.html" %}
+{% import "macros/assets.html" as assets_macros %}
+{% block page_name %}Examples{% endblock page_name %}
+{% block mobile_page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock mobile_page_menu %}
+{% block page_menu %}{{ assets_macros::assets_menu(prefix="page-menu", root=section) }}{% endblock page_menu %}
+{% block page_content %}
+  <div class="assets">
+    <div class="assets-intro media-content">
+      {% block intro %}{% endblock intro %}
+    </div>
+    <div class="assets-search">
+      <input class="assets-search__input"
+              type="text"
+              id="assets-search"
+              placeholder="Search Example">
+    </div>
+    {% for subsection in section.subsections %}
+      {% set section = get_section(path=subsection) %}
+      <h1 class="asset-section" id="{{ section.title | slugify }}">
+        {{ section.title }}<a class="anchor-link" href="#{{ section.title | slugify }}">#</a>
+      </h1>
+      {% if section.pages %}
+        <div class="item-grid item-grid--multi-cols">
+          {% set pages = section.pages %}
+          {% if section.extra.sort_order_reversed %}
+            {% set pages = section.pages | reverse %}
+          {% endif %}
+          {% for post in pages %}{{ assets_macros::card(post=post) }}{% endfor %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+  <script type="module">import '/assets.js'</script>
+{% endblock page_content %}