# Pages

> Source: https://agilitycms.com/docs/sveltekit/pages

Pages are one of the defining features of Agility. Unlike most headless systems that only manage content items, Agility manages your **sitemap** — so editors control which pages exist, what their URLs are, and exactly which components make up each page. In the [SvelteKit starter](https://github.com/agility/sveltekit-starter), that means **new pages need zero code**.

## What a page is

In Agility, a **Page** (also called a *Layout*) is:

- a node in the **sitemap** (its URL and menu text),
- rendered with a **layout template** (which defines named content zones),
- filled with **components** the editor places into those zones.

When the starter resolves a URL (see [Routing & Sitemaps](/docs/sveltekit/routing-sitemaps)), the API returns the page object with everything the front end needs:

```jsonc
{
  "sitemapNode": { "title": "Home", "path": "/home" },
  "page": {
    "title": "Home",
    "templateName": "Main Template",
    "seo": { "metaDescription": "…", "metaKeywords": "…" },
    "zones": {
      "MainContentZone": [
        { "module": "Heading", "item": { "fields": { "title": "…" } } },
        { "module": "PostsListing", "item": { "fields": { "posts": […] } } }
      ]
    }
  }
}
```

## Templates and zones

The page's `templateName` selects a Svelte template. A template's job is to lay out the page and render each **zone**:

```svelte
<!-- src/modules/agility-templates/MainTemplate.svelte -->
<script lang="ts">
  import ContentZone from "../ContentZone.svelte";
  let data = $props();
</script>

<div id="MainTemplate" class="max-w-screen-xl mx-auto">
  <ContentZone zone="MainContentZone" {data} />
</div>
```

`<ContentZone>` looks up `page.zones.MainContentZone` and renders each component the editor placed there, in order — see [Components](/docs/sveltekit/components).

A template with more zones (say `MainContentZone` + `SidebarZone`) just renders two `<ContentZone>`s. Add the matching **Layout Model** in Agility with those zone reference names, and editors can target each zone independently.

## What editors control vs. developers

| Editors (in Agility) | Developers (in code) |
| --- | --- |
| Create pages & URLs in the sitemap | The catch-all route (already built) |
| Choose the page's layout template | Build the Svelte template + zones |
| Add/order components in zones | Build each component (`.svelte`) |
| Edit content, preview, publish | Register components in `ContentZone` |

Adding a new *page* requires no code. Adding a new *kind* of component or template does — once — and then editors can reuse it everywhere.

## Dynamic pages

List detail pages (like a blog post) work the same way: the sitemap contains a node per content item, and the page's `PostDetails` component receives that item's fields. [Content Lists](/docs/sveltekit/content-lists) covers this end to end.

---

Index of every docs page: https://agilitycms.com/docs/llms.txt