Managed copy — @sonordev/site-kit/website/slots

Let the owner edit a site's words in Sonor without a deploy, while you keep the markup. Wrap the copy you'd like managed; the text in your code is the fallback, so the page renders exactly as written until someone edits it, and whenever Sonor can't be reached.

import { ManagedSlot, ManagedRichText, ManagedLink, ManagedList } from '@sonordev/site-kit/website/slots'

<h1 className="hero-title">
  <ManagedSlot id="home-hero-headline" page="/">
    New homes in Springfield and beyond
  </ManagedSlot>
</h1>

Every managed region shows up in Sonor under Website → Content the first time a page renders it. There's no schema to define.

Four kinds of copy

ManagedRichText

<div className="prose">
  <ManagedRichText id="about-intro" page="/about">
    {`We've built homes here since **1998**.\n\n- Custom builds\n- Remodels`}
  </ManagedRichText>
</div>

A string child is read as the same rich-text subset the owner edits, so the fallback and the managed copy render alike. It renders <p>, <ul>, <ol>, <strong>, <em>, <a> and <br>, and nothing else: managed copy is parsed into elements, never inserted as HTML.

The subset: blank-line paragraphs, single newlines as line breaks, **bold**, *italic*, [a link](https://…), and - or 1. lists.

ManagedLink

<ManagedLink id="home-hero-cta" href="/contact" label="Get a free quote">
  {({ href, label }) => <Link href={href} className="btn">{label}</Link>}
</ManagedLink>

Without a render function it draws a plain <a> with your className. Managed links may point to https:, http:, mailto:, tel:, a #anchor or a /path.

ManagedList

<ManagedList id="home-services" items={SERVICES}>
  {(items) => (
    <ul className="grid">
      {items.map((s) => (
        <li key={s.title}>
          <a href={s.href}>{s.title}</a>
          <p>{s.body}</p>
        </li>
      ))}
    </ul>
  )}
</ManagedList>

Each item may have a title, a plain-text body, an href and an image: { src, alt, width?, height? } (https only). Up to 50 items.

Props every component takes

How it stays fast and safe

• Static. Copy resolves in the server render with a cached fetch, so a page using it stays prerendered. Nothing ships to the browser.
• Fallback first. No key, no network, a bad response, or content of a different kind than the code now renders: the fallback shows. It never breaks a build or a page.
• Signed. Sonor signs every value with your project key and site-kit refuses anything that doesn't verify.
• Live in seconds. Publishing in Sonor calls the site's revalidation route, so the change shows without waiting for the next check. It's one file, shared with the rest of site-kit (see Live updates):

// app/api/seo-revalidate/route.ts
export { POST } from '@sonordev/site-kit/revalidate'

Without it, a published edit shows once the cached copy ages out (the revalidate window, five minutes by default).

Edit on page

In Sonor, Website → Content → Edit on page opens the live site with its managed copy outlined. Click any of it to edit it in a side panel. Text, rich text and links show the change on the page as you type, before you publish. Links on the page take you to its other pages, still in edit mode.

The site needs nothing beyond site-kit 7.1: no login, no secret, no extra route. It works like this:

• Sonor frames the page with ?sonor_edit=1. For any other visitor the page is unchanged; the overlay is a separate chunk that only loads when Sonor frames the page.
• The overlay finds the copy by its visible text, so your markup and CSS are exactly what you wrote (no wrapper elements, no attributes).
• The page only reports what it found and what was clicked. The edit itself is saved by Sonor with the signed-in person's own account.
• It needs Sonor's dashboard to be allowed to frame the site, which securityHeaders does by default. A site that sets its own frame-ancestors should use DEFAULT_FRAME_ANCESTORS.

Lists with photos

A list item can carry an image ({ src, alt, width, height }). In Sonor, Upload photo on a list item stores it with the project's files and fills in its size, so the page can reserve the space. A gallery is a list:

<ManagedList id="gallery" items={[]}>
  {(items) => (
    <ul className="gallery">
      {items.map((item, i) =>
        item.image ? (
          <li key={item.image.src}>
            <img src={item.image.src} alt={item.image.alt} width={item.image.width} height={item.image.height} loading={i < 3 ? 'eager' : 'lazy'} />
            {item.title && <p>{item.title}</p>}
          </li>
        ) : null,
      )}
    </ul>
  )}
</ManagedList>

Drafts and history

Edits in Sonor can be saved as drafts and published when they're ready. Every publish is kept, so any earlier version can be restored. Signal can propose copy too; proposals wait for approval in Sonor unless the project lets it publish on its own.

Using it without a component

import { getSlot } from '@sonordev/site-kit/website/slots'

const slot = await getSlot('home-services', { type: 'list' })
// slot?.value → { items: [...] }, or null (render your fallback)