Updated March 24, 2026
8 min read
Embed editable text and image fields
Implement editable regions in your site so client content is rendered from Handover and updated without redeploys.
Use this guide to map your page components to Handover content keys so clients can update text and images without code changes.
Choose stable keys for every editable area
Use predictable keys like hero.title, hero.subtitle, and about.image. Stable keys make admin editing easier and reduce accidental key churn.
Fetch content through the SDK
Initialize the SDK with your API URL and key, then read editable content via getContent(). Always include fallbacks for first-time empty states.
const handover = new Handover({
url: process.env.NEXT_PUBLIC_HANDOVER_API_URL!,
apiKey: process.env.NEXT_PUBLIC_HANDOVER_API_KEY!,
});
const content = await handover.getContent();
const heading = (content.text["hero.title"] as string) ?? "Default heading";Handle images safely
Image uploads are validated server-side. On render, prefer the latest image by key or maintain an explicit key->image mapping in your app layer.
Add fallback UX for empty content
Pages should still look intentional before a client edits anything. Always keep default copy and placeholders in components.
This page maps to docs/HANDOVER_SAAS_PRD.md in the repository.