diff --git a/crates/docs/src/static/search.js b/crates/docs/src/static/search.js
index 5d404a0ce02..3beea47a51a 100644
--- a/crates/docs/src/static/search.js
+++ b/crates/docs/src/static/search.js
@@ -1,124 +1,147 @@
 (() => {
-  let sidebar = document.getElementById("sidebar-nav");
-  let searchBox = document.getElementById("module-search");
-
-  function search() {
-    let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
-
-    if (text === "") {
-      // Un-hide everything
-      sidebar.querySelectorAll(".sidebar-entry a").forEach((entry) => entry.classList.remove("hidden"));
-
-      // Re-hide all the sub-entries except for those of the current module
-      let currentModuleName = document.querySelector('.module-name').textContent;
-
-      sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
-        let entryName = entry.querySelector('.sidebar-module-link').textContent;
-        if (currentModuleName === entryName) {
-          entry.firstChild.classList.add("active");
-          return;
-        };
-        entry.querySelectorAll(".sidebar-sub-entries a").forEach((subEntry) => subEntry.classList.add("hidden"));
-      })
-    } else {
-      // First, show/hide all the sub-entries within each module (top-level functions etc.)
-      sidebar.querySelectorAll(".sidebar-sub-entries a").forEach((entry) => {
-        if (entry.textContent.toLowerCase().includes(text)) {
-          entry.classList.remove("hidden");
-        } else {
-          entry.classList.add("hidden");
+    let sidebar = document.getElementById("sidebar-nav");
+    let searchBox = document.getElementById("module-search");
+
+    if (searchBox != null) {
+        function search() {
+            let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
+
+            if (text === "") {
+                // Un-hide everything
+                sidebar
+                    .querySelectorAll(".sidebar-entry a")
+                    .forEach((entry) => entry.classList.remove("hidden"));
+
+                // Re-hide all the sub-entries except for those of the current module
+                let currentModuleName =
+                    document.querySelector(".module-name").textContent;
+
+                sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
+                    let entryName = entry.querySelector(
+                        ".sidebar-module-link"
+                    ).textContent;
+                    if (currentModuleName === entryName) {
+                        entry.firstChild.classList.add("active");
+                        return;
+                    }
+                    entry
+                        .querySelectorAll(".sidebar-sub-entries a")
+                        .forEach((subEntry) =>
+                            subEntry.classList.add("hidden")
+                        );
+                });
+            } else {
+                // First, show/hide all the sub-entries within each module (top-level functions etc.)
+                sidebar
+                    .querySelectorAll(".sidebar-sub-entries a")
+                    .forEach((entry) => {
+                        if (entry.textContent.toLowerCase().includes(text)) {
+                            entry.classList.remove("hidden");
+                        } else {
+                            entry.classList.add("hidden");
+                        }
+                    });
+
+                // Then, show/hide modules based on whether they match, or any of their sub-entries matched
+                sidebar
+                    .querySelectorAll(".sidebar-module-link")
+                    .forEach((entry) => {
+                        if (
+                            entry.textContent.toLowerCase().includes(text) ||
+                            entry.parentNode.querySelectorAll(
+                                ".sidebar-sub-entries a:not(.hidden)"
+                            ).length > 0
+                        ) {
+                            entry.classList.remove("hidden");
+                        } else {
+                            entry.classList.add("hidden");
+                        }
+                    });
+            }
         }
-      });
 
-      // Then, show/hide modules based on whether they match, or any of their sub-entries matched
-      sidebar.querySelectorAll(".sidebar-module-link").forEach((entry) => {
-        if (entry.textContent.toLowerCase().includes(text) || entry.parentNode.querySelectorAll(".sidebar-sub-entries a:not(.hidden)").length > 0) {
-          entry.classList.remove("hidden");
-        } else {
-          entry.classList.add("hidden");
-        }
-      });
-    }
-  }
+        searchBox.addEventListener("input", search);
 
-  searchBox.addEventListener("input", search);
-
-  search();
-
-  // Capture '/' keypress for quick search
-  window.addEventListener("keyup", (e) => {
-    if (e.key === "s" && document.activeElement !== searchBox) {
-      e.preventDefault;
-      searchBox.focus();
-      searchBox.value = "";
-    }
+        search();
 
-    if (e.key === "Escape" && document.activeElement === searchBox) {
-      e.preventDefault;
+        // Capture '/' keypress for quick search
+        window.addEventListener("keyup", (e) => {
+            if (e.key === "s" && document.activeElement !== searchBox) {
+                e.preventDefault;
+                searchBox.focus();
+                searchBox.value = "";
+            }
 
-      // De-focus input box
-      searchBox.blur();
+            if (e.key === "Escape" && document.activeElement === searchBox) {
+                e.preventDefault;
 
-      // Reset sidebar state
-      search();
+                // De-focus input box
+                searchBox.blur();
 
+                // Reset sidebar state
+                search();
+            }
+        });
     }
-  });
-
-  const isTouchSupported = () => {
-    try{ document.createEvent("TouchEvent"); return true; }
-    catch(e){ return false; }
-  }
-
-  // Select all <samp> elements that are children of <pre> elements
-  const codeBlocks = document.querySelectorAll("pre > samp");
-
-  // Iterate over each code block
-  codeBlocks.forEach((codeBlock) => {
-    // Create a "Copy" button
-    const copyButton = document.createElement("button");
-    copyButton.classList.add("copy-button");
-    copyButton.textContent = "Copy";
-
-    // Add event listener to copy button
-    copyButton.addEventListener("click", () => {
-      const codeText = codeBlock.innerText;
-      navigator.clipboard.writeText(codeText);
-      copyButton.textContent = "Copied!";
-      copyButton.classList.add("copy-button-copied");
-      copyButton.addEventListener("mouseleave", () => {
-          copyButton.textContent = "Copy";
-          copyButton.classList.remove('copy-button-copied');
-      });
-    });
-
-    // Create a container for the copy button and append it to the document
-    const buttonContainer = document.createElement("div");
-    buttonContainer.classList.add("button-container");
-    buttonContainer.appendChild(copyButton);
-    codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
 
-    // Hide the button container by default
-    buttonContainer.style.display = "none";
+    const isTouchSupported = () => {
+        try {
+            document.createEvent("TouchEvent");
+            return true;
+        } catch (e) {
+            return false;
+        }
+    };
+
+    // Select all <samp> elements that are children of <pre> elements
+    const codeBlocks = document.querySelectorAll("pre > samp");
+
+    // Iterate over each code block
+    codeBlocks.forEach((codeBlock) => {
+        // Create a "Copy" button
+        const copyButton = document.createElement("button");
+        copyButton.classList.add("copy-button");
+        copyButton.textContent = "Copy";
+
+        // Add event listener to copy button
+        copyButton.addEventListener("click", () => {
+            const codeText = codeBlock.innerText;
+            navigator.clipboard.writeText(codeText);
+            copyButton.textContent = "Copied!";
+            copyButton.classList.add("copy-button-copied");
+            copyButton.addEventListener("mouseleave", () => {
+                copyButton.textContent = "Copy";
+                copyButton.classList.remove("copy-button-copied");
+            });
+        });
+
+        // Create a container for the copy button and append it to the document
+        const buttonContainer = document.createElement("div");
+        buttonContainer.classList.add("button-container");
+        buttonContainer.appendChild(copyButton);
+        codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
+
+        // Hide the button container by default
+        buttonContainer.style.display = "none";
 
-    if (isTouchSupported()) {
-      // Show the button container on click for touch support (e.g. mobile)
-      document.addEventListener("click", (event) => {
-        if (event.target.closest("pre > samp") !== codeBlock) {
-          buttonContainer.style.display = "none";
+        if (isTouchSupported()) {
+            // Show the button container on click for touch support (e.g. mobile)
+            document.addEventListener("click", (event) => {
+                if (event.target.closest("pre > samp") !== codeBlock) {
+                    buttonContainer.style.display = "none";
+                } else {
+                    buttonContainer.style.display = "block";
+                }
+            });
         } else {
-          buttonContainer.style.display = "block";
+            // Show the button container on hover for non-touch support (e.g. desktop)
+            codeBlock.parentNode.addEventListener("mouseenter", () => {
+                buttonContainer.style.display = "block";
+            });
+
+            codeBlock.parentNode.addEventListener("mouseleave", () => {
+                buttonContainer.style.display = "none";
+            });
         }
-      });
-    } else {
-      // Show the button container on hover for non-touch support (e.g. desktop)
-      codeBlock.parentNode.addEventListener("mouseenter", () => {
-        buttonContainer.style.display = "block";
-      });
-
-      codeBlock.parentNode.addEventListener("mouseleave", () => {
-        buttonContainer.style.display = "none";
-      });
-    }
-  });
+    });
 })();
diff --git a/www/content/index.md b/www/content/index.md
index a98c5a312a4..2a4911ead9c 100644
--- a/www/content/index.md
+++ b/www/content/index.md
@@ -75,7 +75,7 @@ Here are some examples of how it can be used today.
     <pre><samp class="code-snippet">main <span class="kw">=</span>
     Stdout<span class="punctuation section">.</span>line <span class="literal">"Hello!"</span></samp></pre>
         <p>You can use Roc to create scripts and command-line interfaces (CLIs). The compiler produces binary executables, so Roc programs can run on devices that don't have Roc itself installed.</p>
-        <p>As an example, the HTML for this website is generated using a simple Roc script. You can see <a href="https://github.com/roc-lang/roc/blob/main/www/generate_website/main.roc">the code for it</a> in the main Roc code repository.</p>
+        <p>As an example, the HTML for this website is generated using a simple Roc script. You can see <a href="https://github.com/roc-lang/roc/blob/main/www/main.roc">the code for it</a> in the main Roc code repository.</p>
         <p>If you’re looking for a starting point for building a command-line program in Roc, <a href="https://github.com/roc-lang/basic-cli">basic-cli</a> is a popular <a href="/platforms">platform</a> to check out.</p>
     </div>
     <div role="presentation" class="home-examples-column">
diff --git a/www/content/tutorial.md b/www/content/tutorial.md
index 3364a685740..c97094b3c3b 100644
--- a/www/content/tutorial.md
+++ b/www/content/tutorial.md
@@ -2026,3 +2026,4 @@ Here are various Roc expressions involving operators, and what they desugar to.
 
 
 </section>
+<script type="text/javascript" src="/builtins/search.js" defer></script>
diff --git a/www/main.roc b/www/main.roc
index 6b23318ad51..2872a747325 100644
--- a/www/main.roc
+++ b/www/main.roc
@@ -59,7 +59,17 @@ view = \page, htmlContent ->
         when page is
             "index.html" -> [id "homepage-main"]
             "tutorial.html" -> [id "tutorial-main", class "article-layout"]
-            _ -> [class "article-layout"]
+            _ ->
+                if Str.startsWith page "examples/" && page != "examples/index.html" then
+                    # Individual examples should render wider than articles.
+                    # Otherwise the width is unreasonably low for the code blocks,
+                    # and those pages don't tend to have big paragraphs anyway.
+                    # Keep the article width on examples/index.html though,
+                    # because otherwise when you're clicking through the top nav links,
+                    # /examples has a surprisingly different width from the other links.
+                    [id "example-main"]
+                else
+                    [class "article-layout"]
 
     html [lang "en", class "no-js"] [
         head [] [
diff --git a/www/public/site.css b/www/public/site.css
index e5bf8de18b9..64dddc75185 100644
--- a/www/public/site.css
+++ b/www/public/site.css
@@ -197,6 +197,10 @@ a:hover {
     text-decoration: underline;
 }
 
+a:hover code {
+    text-decoration: inherit;
+}
+
 li {
     margin-bottom: 0.5rem;
 }
@@ -560,6 +564,7 @@ li {
         margin: 0 !important;
         padding-right: 120px;
         border: 0;
+        z-index: 2;
     }
 
     #homepage-logo {