diff --git a/docs/latest/advanced/app-wrapper.md b/docs/latest/advanced/app-wrapper.md
index d4e501b0d06..2f9bcd008af 100644
--- a/docs/latest/advanced/app-wrapper.md
+++ b/docs/latest/advanced/app-wrapper.md
@@ -24,7 +24,7 @@ If you're using [file-based routing](/docs/concepts/file-routing), create a
 ## Basic example
 
 ```tsx routes/_app.tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.page(({ Component, url }) => {
   return (
@@ -84,7 +84,7 @@ The app wrapper receives the same props as page components - `url`, `state`,
 `params`, and more. This is useful for conditional logic:
 
 ```tsx routes/_app.tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.page(({ Component, url, state }) => {
   return (
@@ -112,7 +112,7 @@ structure. Use `skipAppWrapper` in the route config:
 
 ```tsx routes/embed.tsx
 import { type RouteConfig } from "fresh";
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export const config: RouteConfig = {
   skipAppWrapper: true,
diff --git a/docs/latest/advanced/forms.md b/docs/latest/advanced/forms.md
index e628880f025..cc82d76f3e8 100644
--- a/docs/latest/advanced/forms.md
+++ b/docs/latest/advanced/forms.md
@@ -20,7 +20,7 @@ This example demonstrates how to handle `application/x-www-form-urlencoded`
 `<form>` submissions:
 
 ```tsx routes/subscribe.tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export const handlers = define.handlers({
   async GET(ctx) {
@@ -65,7 +65,7 @@ that this time, we have to explicitly declare the form's encoding to be
 `multipart/form-data`.
 
 ```tsx routes/subscribe.tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export const handler = define.handlers({
   async GET(ctx) {
diff --git a/docs/latest/advanced/partials.md b/docs/latest/advanced/partials.md
index 62a21e4a765..e1d2e7f265a 100644
--- a/docs/latest/advanced/partials.md
+++ b/docs/latest/advanced/partials.md
@@ -18,7 +18,7 @@ The quickest way to get started is to enable partials for every page in
 `routes/_app.tsx` by making the following changes.
 
 ```diff routes/_app.tsx
-  import { define } from "../utils.ts";
+  import { define } from "@/utils.ts";
 + import { Partial } from "fresh/runtime";
 
   export default define.page(function App({ Component }) {
@@ -81,7 +81,7 @@ documentation (marked green here).
 The code for such a page (excluding styling) might look like this:
 
 ```tsx routes/docs/[id].tsx
-import { define } from "../../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.page(async (ctx) => {
   const content = await loadContent(ctx.params.id);
@@ -104,7 +104,7 @@ An optimal route that only renders the content instead of the outer layout with
 the sidebar might look like this respectively.
 
 ```tsx routes/partials/docs/[id].tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 import { Partial } from "fresh/runtime";
 
 // We only want to render the content, so disable
diff --git a/docs/latest/concepts/layouts.md b/docs/latest/concepts/layouts.md
index be4c0249c5e..5451a749437 100644
--- a/docs/latest/concepts/layouts.md
+++ b/docs/latest/concepts/layouts.md
@@ -47,7 +47,7 @@ and `url`. Any state set by [middleware](/docs/concepts/middleware) is available
 via `props.state`.
 
 ```tsx routes/_layout.tsx
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.layout(({ Component, state, url }) => {
   return (
@@ -71,7 +71,7 @@ export default define.layout(({ Component, state, url }) => {
 Layouts can be async to fetch data before rendering:
 
 ```tsx routes/blog/_layout.tsx
-import { define } from "../../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.layout(async (ctx) => {
   const categories = await db.categories.list();
@@ -104,7 +104,7 @@ config to skip all layouts inherited from parent directories:
 
 ```tsx routes/login.tsx
 import { type RouteConfig } from "fresh";
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export const config: RouteConfig = {
   skipInheritedLayouts: true,
@@ -129,7 +129,7 @@ useful when a section of your site needs a completely different shell:
 
 ```tsx routes/admin/_layout.tsx
 import { type LayoutConfig } from "fresh";
-import { define } from "../../utils.ts";
+import { define } from "@/utils.ts";
 
 export const config: LayoutConfig = {
   skipInheritedLayouts: true,
diff --git a/docs/latest/concepts/middleware.md b/docs/latest/concepts/middleware.md
index 2c4378269ec..ec2b1afa66d 100644
--- a/docs/latest/concepts/middleware.md
+++ b/docs/latest/concepts/middleware.md
@@ -39,7 +39,7 @@ excellent way to make http-related logic reusable on the server.
 Use the `define.middleware()` helper to get typings out of the box:
 
 ```ts middleware/my-middleware.ts
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 const middleware = define.middleware(async (ctx) => {
   console.log("my middleware");
@@ -63,7 +63,7 @@ middleware in a `_middleware.ts` file inside the `routes/` folder or any of its
 subfolders.
 
 ```ts routes/_middleware.ts
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.middleware(async (ctx) => {
   console.log("my middleware");
@@ -74,7 +74,7 @@ export default define.middleware(async (ctx) => {
 You can also export an array of middlewares:
 
 ```ts routes/_middleware.ts
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 const middleware1 = define.middleware(async (ctx) => {
   console.log("A");
diff --git a/docs/latest/examples/sharing-state-between-islands.md b/docs/latest/examples/sharing-state-between-islands.md
index e3f9b17318f..9f8489785ae 100644
--- a/docs/latest/examples/sharing-state-between-islands.md
+++ b/docs/latest/examples/sharing-state-between-islands.md
@@ -174,7 +174,7 @@ Then wire them together from a route, passing the same signal to both:
 import { useSignal } from "@preact/signals";
 import AddToCart from "../islands/AddToCart.tsx";
 import Cart from "../islands/Cart.tsx";
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 
 export default define.page(function CartPage() {
   const cart = useSignal<string[]>([]);
diff --git a/docs/latest/getting-started/index.md b/docs/latest/getting-started/index.md
index c8c30623391..1e4814d3025 100644
--- a/docs/latest/getting-started/index.md
+++ b/docs/latest/getting-started/index.md
@@ -48,7 +48,7 @@ import { define } from "@/utils.ts";
 import { Button } from "@/components/Button.tsx";
 
 // Without alias (relative paths)
-import { define } from "../utils.ts";
+import { define } from "@/utils.ts";
 import { Button } from "../components/Button.tsx";
 ```
 
diff --git a/docs/latest/testing/index.md b/docs/latest/testing/index.md
index 4c01554e211..2f7c1703cc0 100644
--- a/docs/latest/testing/index.md
+++ b/docs/latest/testing/index.md
@@ -17,7 +17,7 @@ test assumes the `State` object in `utils.ts` has `text` property.
 ```ts tests/middleware.test.ts
 import { expect } from "@std/expect";
 import { App } from "fresh";
-import { define, type State } from "../utils.ts";
+import { define, type State } from "@/utils.ts";
 
 const middleware = define.middleware((ctx) => {
   ctx.state.text = "middleware text";
@@ -50,7 +50,7 @@ Both the [app wrapper](/docs/advanced/app-wrapper) component and
 ```tsx tests/appWrapper.test.tsx
 import { expect } from "@std/expect";
 import { App } from "fresh";
-import { define, type State } from "../utils.ts";
+import { define, type State } from "@/utils.ts";
 
 const AppWrapper = define.layout(function AppWrapper({ Component }) {
   return (
@@ -85,7 +85,7 @@ Same can be done for layouts.
 ```tsx tests/layout.test.tsx
 import { expect } from "@std/expect";
 import { App } from "fresh";
-import { define, type State } from "../utils.ts";
+import { define, type State } from "@/utils.ts";
 
 const MyLayout = define.layout(function MyLayout({ Component }) {
   return (
@@ -120,7 +120,7 @@ handler:
 ```ts tests/routes.test.ts
 import { expect } from "@std/expect";
 import { App } from "fresh";
-import { type State } from "../utils.ts";
+import { type State } from "@/utils.ts";
 
 // Import actual route handlers
 import { handler as apiHandler } from "../routes/api/[name].tsx";
@@ -152,7 +152,7 @@ to use JSX:
 import { expect } from "@std/expect";
 import { App } from "fresh";
 import { useSignal } from "@preact/signals";
-import { type State } from "../utils.ts";
+import { type State } from "@/utils.ts";
 import Counter from "../islands/Counter.tsx";
 
 function CounterPage() {