Fresh logo
🚧 This documentation is work in progress and for an unreleased version of Fresh.

Context

The Context instance is shared across all middlewares in Fresh. Use it to respond with HTML, trigger redirects, access the incoming Request or read other metadata.

.config

Contains the resolved Fresh configuration.

Typescript  
app.get("/", (ctx) => {
  console.log("Config: ", ctx.config);
  return new Response("hey");
});

.url

Contains a URL instance of the requested url.

Typescript  
app.get("/", (ctx) => {
  console.log("path: ", ctx.url.pathname);

  const hasParam = ctx.url.searchParams.has("q");
  return new Response(`Has q param: ${String(hasParam)});
});

.req

Contains the incoming Request instance.

Typescript  
app.get("/", (ctx) => {
  console.log("Request: ", ctx.req);

  if (ctx.req.headers.has("X-Foo")) {
    // do something
  }

  return new Response("hello");
});

.route

Contains the matched route pattern as a string. Will be null if no pattern matched.

Typescript  
app.get("/foo/:id", (ctx) => {
  console.log(ctx.route); // Logs: "/foo/:id
  // ...
});

.params

Contains the params of the matched route pattern.

Typescript  
app.get("/foo/:id", (ctx) => {
  console.log("id: ", ctx.params.id);

  return new Response(`Accessed: /foo/${ctx.params.id}`);
});

.state

Pass data to the next middlewares with state. Every request has its own state object.

Typescript  
interface State {
  text?: string;
}

const app = new App<State>();

app.use((ctx) => {
  ctx.state.text = "foo";
  return ctx.next();
});
app.use((ctx) => {
  console.log(ctx.state.text); // Logs: "foo"
  return ctx.next();
});

.error

If an error was thrown, this property will hold the caught value (default: null). This is typically used mainly on an error page.

Typescript  
app.onError((ctx) => {
  const message = ctx.error instanceof Error
    ? ctx.error.message
    : String(ctx.error);

  return new Response(message, { status: 500 });
});

.redirect()

Trigger a redirect from a middleware:

Typescript  
app.get("/old-url", (ctx) => {
  return ctx.redirect("/new-url");
});

Set a custom status code (default is 302):

Typescript  
app.get("/old-url", (ctx) => {
  return ctx.redirect("/new-url", 307);
});

.render()

Render JSX and create a HTML Response.

Typescript  
app.get("/", (ctx) => {
  return ctx.render(<h1>hello world</h1>);
});

Set custom response headers or other metadata:

Typescript  
app.get("/teapot", (ctx) => {
  return ctx.render(
    <h1>I'm a teapot</h1>,
    {
      status: 418,
      headers: {
        "X-Foo": "abc",
      },
    },
  );
});