TSX Pages

Fastro supports TSX (TypeScript JSX) for creating server-side rendered pages with React-like syntax using Preact components.

Basic TSX Page

Create a hello.tsx file:

import fastro, { Context, HttpRequest } from "https://fastro.deno.dev/mod.ts";

const f = new fastro();

f.get("/", (_req: HttpRequest, ctx: Context) => {
  return ctx.render(<h1>Hello, TSX!</h1>);
});

await f.serve();

How It Works

• TSX Support: Fastro automatically processes TSX syntax
• Server-Side Rendering: Components are rendered on the server
• Context Rendering: Use ctx.render() to render TSX elements
• Type Safety: Full TypeScript support with proper type checking

Dynamic Content

You can pass dynamic data to your TSX components:

f.get("/user/:name", (req: HttpRequest, ctx: Context) => {
  const name = req.params?.name || "Guest";

  return ctx.render(
    <div>
      <h1>Welcome, {name}!</h1>
      <p>This page was rendered server-side.</p>
    </div>,
  );
});

Next Steps

Learn how to create reusable TSX Components & Function Components for better code organization.