@warlock.js/web

@warlock.js/web is Warlock’s React page layer. A page is an ordinary Warlock route that renders a document instead of JSON, so pages share the application’s route table, middleware, validation, request context, and lifecycle.

Pages render on the server and hydrate in the browser. After hydration, <Link> provides client navigation while loaders keep request-only work on the server.

Choose your starting point

Install only the highest layer you need. Dependencies are resolved for you:

warlock add web       # React SSR page layer
warlock add tailwind  # Web + Tailwind CSS v4
warlock add shadcn    # Web + Tailwind + shadcn/ui prerequisites

For shadcn/ui, Warlock prepares the project; shadcn’s own CLI still adds the components:

npx shadcn@latest add button card

Do not run shadcn init after warlock add shadcn; Warlock has already written the project-specific aliases, stylesheet, design tokens, and cn helper.

See the complete Tailwind and shadcn/ui setup →

A page in one file

Create src/web/about.page.tsx:

src/web/about.page.tsx

import type { PageMetadata } from "@warlock.js/web";

export const metadata: PageMetadata = {
  title: "About",
};

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
    </main>
  );
}

With no route export, that file serves /about. Warlock derives routes from files beneath src/web/; an explicit literal route can override the path and name when needed.

Learn Web by task

Install Web Choose Web, Tailwind, or shadcn and see exactly what the command creates.

Create your first page Render a page, declare metadata, and navigate without a reload.

Add Tailwind and shadcn/ui Set up Tailwind v4, generate components, and avoid the init trap.

Routing Filesystem routes, named routes, dynamic segments, groups, and wildcards.

Layouts and special pages Compose prefixes and middleware; own the 404 and error boundaries.

Loaders and metadata Move server work into typed loaders and control the document head.

Client/server boundaries Keep secrets and server-only imports out of the browser bundle.

Development and production Understand Fast Refresh, live route changes, manifests, and CSS delivery.

Upgrading from v4? Web is an opt-in addition in v5; start with the v5 migration guide.