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, 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), the API returns the page object with everything the front end needs:

{
  "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:

<!-- 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.

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 covers this end to end.