denoland · fry69 · Sep 22, 2025 · Sep 22, 2025
diff --git a/docs/latest/advanced/app-wrapper.md b/docs/latest/advanced/app-wrapper.md
@@ -8,7 +8,7 @@ structure of the HTML document, typically up until the `<body>`-tag. It is only
 rendered on the server and never on the client. The passed `Component` value
 represents the children of this component.
 
-```tsx main.tsx
+```tsx
 function AppWrapper({ Component }) {
   return (
     <html lang="en">

diff --git a/docs/latest/advanced/error-handling.md b/docs/latest/advanced/error-handling.md
@@ -21,6 +21,8 @@ Fresh supports two kind of error pages:
 To add an error page use [`app.onError()`](/docs/concepts/app#onerror).
 
 ```ts main.ts
+import { App } from "fresh";
+
 const app = new App()
   .onError("*", (ctx) => {
     console.log(`Error: ${ctx.error}`);
@@ -36,7 +38,7 @@ will be invoked.
 
 You can also nest error pages:
 
-```ts main.ts
+```ts
 const app = new App()
   // Top level error page
   .onError("*", (ctx) => {
@@ -56,7 +58,7 @@ Not found errors are often treated differently than generic errors. You can both
 treat them with the `.onError()` way, but by adding a specific `.notFound()`
 handler, Fresh ensures that every 404 error will invoke this callback.
 
-```ts main.ts
+```ts
 const app = new App()
   // Top level error page
   .notFound((ctx) => {
@@ -90,7 +92,7 @@ async function authMiddleware(ctx) {
 
 You can check the status code of the thrown `HttpError` in your error handler:
 
-```ts main.ts
+```ts
 app.onError((ctx) => {
   if (ctx.error instanceof HttpError) {
     const status = ctx.error.status;

diff --git a/docs/latest/advanced/layouts.md b/docs/latest/advanced/layouts.md
@@ -8,7 +8,7 @@ HTML structure and only the content changes, a layout is a neat way to abstract
 this. Layouts only ever render on the server. The passed `Component` value
 represents the children of this component.
 
-```tsx main.tsx
+```tsx
 function PageLayout({ Component }) {
   return (
     <div>
@@ -36,12 +36,12 @@ If you browse to the `/` route, Fresh will render the following HTML
 
 Add a layout and ignore all previously inherited ones.
 
-```ts main.ts
+```ts
 app.layout("/foo/bar", MyComponent, { skipInheritedLayouts: true });
 ```
 
 Ignore the app wrapper component:
 
-```ts main.ts
+```ts
 app.layout("/foo/bar", MyComponent, { skipAppWrapper: true });
 ```
diff --git a/docs/latest/concepts/app.md b/docs/latest/concepts/app.md
@@ -7,7 +7,7 @@ The `App` class is the heart of Fresh and routes incoming requests to the
 correct middlewares. This is where routes, middlewares, layouts and more are
 defined.
 
-```tsx main.ts
+```ts
 const app = new App()
   .use(staticFiles())
   .get("/", () => new Response("hello"))
@@ -20,7 +20,7 @@ app.listen();
 All items are applied from top to bottom. This means that when you defined a
 middleware _after_ a `.get()` handler, it won't be included.
 
-```tsx main.tsx
+```ts
 const app = new App()
   .use((ctx) => {
     // Will be called for all middlewares

diff --git a/docs/latest/concepts/islands.md b/docs/latest/concepts/islands.md
@@ -28,7 +28,7 @@ export default function MyIsland() {
 An island can be used anywhere like a regular Preact component. Fresh will take
 care of making it interactive on the client.
 
-```tsx main.tsx
+```tsx main.ts
 import { App, staticFiles } from "fresh";
 import MyIsland from "./islands/my-island.tsx";
 

diff --git a/docs/latest/concepts/routing.md b/docs/latest/concepts/routing.md
@@ -7,6 +7,8 @@ Routing defines which middlewares and routes should respond to a particular
 request.
 
 ```ts main.ts
+import { App } from "fresh";
+
 const app = new App()
   .get("/", () => new Response("hello")) // Responds to: GET /
   .get("/other", () => new Response("other")) // Responds to: GET /other

diff --git a/docs/latest/concepts/static-files.md b/docs/latest/concepts/static-files.md
@@ -21,15 +21,15 @@ const app = new App()
 By default, Fresh adds caching headers for the `src` and `srcset` attributes on
 `<img>` and `<source>` tags.
 
-```tsx main.tsx
+```ts
 // Caching headers will be automatically added
 app.get("/user", (ctx) => ctx.render(<img src="/user.png" />));
 ```
 
 You can always opt out of this behaviour per tag, by adding the
 `data-fresh-disable-lock` attribute.
 
-```tsx main.tsx
+```ts
 // Opt-out of automatic caching headers
 app.get(
   "/user",

diff --git a/docs/latest/introduction/index.md b/docs/latest/introduction/index.md
@@ -9,7 +9,7 @@ Fresh is a small, fast and extensible full stack web framework built on Web
 Standards. It's designed for building high-quality, performant, and personalized
 web applications.
 
-```tsx main.tsx
+```tsx main.ts
 import { App } from "fresh";
 
 const app = new App()