# New Page

> Scaffold a new merjs page. Use when the user wants to create a new page, route, or view.

- Skill: `justrach/new-page` (Agent Skill)
- Install (CLI): `npx skillmds@latest add justrach/new-page`
- Raw SKILL.md: https://api.skillmd.com/api/skills/justrach/new-page/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: justrach (https://skillmd.com/u/justrach)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/justrach/new-page

---


# Create a new merjs page

Scaffold a new page at `app/$ARGUMENTS.zig` that follows the merjs conventions.

## Steps

1. Create `app/$ARGUMENTS.zig` with this template:

```zig
const mer = @import("mer");
const h = mer.h;

pub const meta: mer.Meta = .{
    .title = "PAGE_TITLE",
    .description = "PAGE_DESCRIPTION",
};

const page_node = page();

pub fn render(req: mer.Request) mer.Response {
    return mer.render(req.allocator, page_node);
}

fn page() h.Node {
    return h.div(.{ .class = "page" }, .{
        h.h1(.{}, "PAGE_TITLE"),
    });
}
```

2. Replace PAGE_TITLE and PAGE_DESCRIPTION with sensible values derived from the page name
3. Run `zig build codegen` to regenerate routes
4. Confirm the new route appears in `src/generated/routes.zig`
5. Tell the user the route is available at the mapped URL path

## Conventions

- Every app/ page MUST export `pub const meta: mer.Meta`
- Every page MUST export `pub fn render(req: mer.Request) mer.Response`
- Use the `h` DSL (mer.h) for HTML — prefer comptime nodes
- For dynamic routes, use bracket syntax: `app/users/[id].zig` → `/users/:id`
- `app/index.zig` maps to `/`
- `app/foo/index.zig` maps to `/foo`
- Add `pub const prerender = true;` for static pages that don't need request data