Components

Components (historically called Modules — the API still uses that name) are the building blocks editors place into a page's content zones. Each Agility Component Model has a matching Svelte component in the starter that knows how to render it.

The ContentZone registry

ContentZone.svelte walks the components the editor placed in a zone and picks the right Svelte component by the model's reference name:

<!-- src/modules/ContentZone.svelte (trimmed) -->
<script lang="ts">
  import Heading from "./agility-components/Heading.svelte";
  import PostsListing from "./agility-components/PostsListing.svelte";
  import PostDetails from "./agility-components/PostDetails.svelte";
  // … the other components

  export let zone: string;
  export let data: any;

  const { page, contentItem } = data.page;
  const Components = page.zones[zone];

  // dynamic detail pages: inject the resolved content item into PostDetails
  Components.forEach((component, index) => {
    if (component.module === "PostDetails") {
      Components[index].item.fields = contentItem.fields;
    }
  });
</script>

{#each Components as component}
  {#if component.module === "Heading"}
    <Heading {...component} />
  {:else if component.module === "PostsListing"}
    <PostsListing {...component} />
  {:else if component.module === "PostDetails"}
    <PostDetails {...component} />
  {:else}
    <p>Component {component.module} not found</p>
  {/if}
{/each}

The fallback branch is useful during development: if an editor adds a component you haven't built yet, the page tells you instead of silently dropping it.

Anatomy of a component

Each component receives the zone entry as props — the content is on item.fields, matching the fields you defined on the Component Model in Agility:

<!-- src/modules/agility-components/Heading.svelte -->
<script lang="ts">
  export let item: any;
  const { fields: { title } } = item;
</script>

<h1 class="text-3xl font-bold mt-12 mb-6">{title}</h1>

That's the whole contract: model fields in Agility → item.fields in Svelte.

Adding a new component

1. In Agility: Models → Component Models → New — e.g. CallToAction with fields title, link. Add it to a page so there's content to render.

2. In code: create src/modules/agility-components/CallToAction.svelte:

   <script lang="ts">
     export let item: any;
     const { fields: { title, link } } = item;
   </script>
   
   <a href={link.href} class="btn">{title}</a>
   

3. Register it in ContentZone.svelte — import it and add an {:else if component.module === "CallToAction"} branch.

Refresh, and the component renders wherever editors place it.

Dynamic detail components

On a dynamic page (e.g. a blog post), the API resolves the item behind the page into contentItem, and ContentZone hands its fields to PostDetails — so the same mechanism renders both editor-composed components and item-driven detail views. See Content Lists.