freshframework · bartlomieju · Mar 29, 2026 · Sep 22, 2025 · Sep 22, 2025 · Mar 29, 2026
diff --git a/docs/latest/advanced/app-wrapper.md b/docs/latest/advanced/app-wrapper.md
@@ -47,7 +47,7 @@ export default define.page(({ Component, url }) => {
 
 When building your app with `new App()` instead of file-based routing:
 
-```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) => {
@@ -103,7 +105,7 @@ async function authMiddleware(ctx) {
 When an `HttpError` is thrown, Fresh catches it and invokes the error handler.
 You can check the status code in your error handler:
 
-```ts main.ts
+```ts
 import { HttpError } from "fresh";
 
 app.onError("*", (ctx) => {

diff --git a/docs/latest/advanced/layouts.md b/docs/latest/advanced/layouts.md
@@ -12,7 +12,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>
@@ -42,7 +42,7 @@ You can register multiple layouts for different paths. Layouts are inherited
 from parent paths - a layout at `"*"` applies to all routes, and more specific
 layouts are added on top:
 
-```ts main.ts
+```ts
 const app = new App()
   .layout("*", MainLayout) // Applied to all routes
   .layout("/admin/*", AdminLayout) // Added on top for /admin/* routes
@@ -69,6 +69,6 @@ const app = new App()
 
 Ignore the [app wrapper](/docs/concepts/app) 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
@@ -40,7 +40,7 @@ mounted alongside other apps. The base path is available in handlers via
 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.
 
-```ts main.ts
+```ts
 const app = new App()
   .use((ctx) => {
     // Will be called for all middlewares

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
@@ -52,15 +52,15 @@ once in your build output.
 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()