CMS Overview
Repo: omni-cms-composable-cms Sanity version: 5.x (React 19, Vite-based Studio) API version:
2026-03-12📐 ADRs: ADR-0009 — Use Sanity directly for editorial content | ADR-0002 — Using Sanity CMS for site configuration | ADR-0010 — CMS NOT to consume Bynder directly
What Is the CMS?
Section titled “What Is the CMS?”The omni-cms-composable-cms is the headless content management system for HEMA100 micro-frontends. Built on Sanity.io, it manages:
- Content pages — Home, Promotions, Flexible Content, Inspiration (landing, categories, articles)
- Reusable components — Carousels, Hero Blocks, Banners, Rich Text, Product Arrays, Videos
- Configuration — Shell (header/footer), Search Suggestions, Headgroup Config, PDP Recommendation Carousels
- Microcopy — Per-service UI translation singletons consumed by MFEs at runtime
- DAM integration — Bynder assets synced via Kafka → SQS → Lambda pipeline
- Live preview — Presentation tool with draft mode for real-time editing
Architecture
Section titled “Architecture”
Where things run
Section titled “Where things run”| Component | Hosted by | Notes |
|---|---|---|
| Sanity Studio | Sanity (static SPA on *.sanity.studio) | Deployed via sanity deploy, served from CDN |
| Content Lake (API + data) | Sanity (Google Cloud) | All content data lives here — HEMA doesn’t manage the infra |
| CDN | Sanity (*.apicdn.sanity.io) | Cached read-only queries for production |
| DAM sync pipeline | HEMA AWS | Lambda + SQS + Kafka consumer — the only CMS infra HEMA owns |
HEMA controls: projects, datasets, API tokens, CORS origins, and schema. The underlying storage and API infrastructure is fully managed by Sanity.
Supported Countries & Locales
Section titled “Supported Countries & Locales”| Country | ID | Languages | Locales |
|---|---|---|---|
| Netherlands | NL | Dutch | nl-nl |
| Belgium | BE | Dutch, French | nl-be, fr-be |
| France | FR | French | fr-fr |
| Germany | DE | German | de-de |
Fallbacks: nl-be → nl-nl, fr-be → fr-fr
Key Concepts
Section titled “Key Concepts”Document Internationalization
Section titled “Document Internationalization”Content is NOT duplicated per locale. Each document has a country field and uses translated fields (e.g., title.nl, title.fr). The @sanity/document-internationalization plugin links country variants together via metadata documents.
Flexible Page Pattern
Section titled “Flexible Page Pattern”Pages use a flexible component array — editors compose pages by adding references to reusable component documents (carousels, hero blocks, images, etc.). This is the core content modeling pattern used across all page types.
Microcopy (UI Translations)
Section titled “Microcopy (UI Translations)”UI strings are stored as singleton documents per MFE service:
microcopy— Legacy shared translationsmicrocopy.omni-web-content— Content MFEmicrocopy.omni-web-account— Account MFEmicrocopy.omni-web-catalog— Catalog MFE
Bynder DAM
Section titled “Bynder DAM”All images come from Bynder — direct uploads are disabled. A Kafka pipeline syncs metadata changes (tags, descriptions, archive status) from Bynder back to Sanity.
Environments
Section titled “Environments”| Stage | Dataset | Studio URL | Trigger |
|---|---|---|---|
| Production | production | hema-cms.sanity.studio | Push to main |
| Pre-production | preprod | preprod-hema-cms.sanity.studio | Push to main |
| Staging | staging | staging-hema-cms.sanity.studio | Git tag |
| Sandbox | <branch>_sandbox | <branch>-sandbox-hema-cms.sanity.studio | Push to feature/* |
Section Guide
Section titled “Section Guide”| Page | What you’ll learn |
|---|---|
| Content Modeling | Schema types, page types, reusable components, translated fields |
| MFE Integration | How frontends consume CMS data (client setup, GROQ, repository pattern) |
| Content Flow & Live Preview | End-to-end delivery from editor to screen, draft mode, Presentation Tool |
| DAM Sync | Bynder asset synchronization pipeline |
| Deployment | CI/CD pipeline, sandbox environments, local deploy |