LLumen
← All articles

One app, five tools: consolidating Contentful editor apps

Cover — one-app-five-tools

Custom editor tooling multiplies fast. A slug editor here, a validation widget there, a QA dashboard for the content team — and suddenly you're maintaining a fleet of nearly identical Vite apps that differ in one component.

The consolidation

This project's Editorial Toolkit is a single App Framework bundle. At runtime it asks the SDK where it woke up — sdk.location — and routes: field locations render one of four widgets (picked by an instance parameter, falling back to the field id), the page location renders a QA tool, the config location renders the install screen.

  • One build — a single Vite bundle on Contentful Hosting.

  • One deploy — one CI job uploads it; every tool updates atomically.

  • Shared logic — the slug generator and reading-time formula live once, next to the widgets that use them.

The part worth stealing

Cross-field rules live in widgets, not in editors' heads. Contentful's validations can't express 'sponsor name is required if and only if the post is sponsored' — so the sponsor-name widget subscribes to the isSponsored field, disables itself when sponsorship is off, and complains when it's on and empty. The rule executes where the editor is looking.

Editorial guardrails belong in the editing surface — an editor should never need the wiki to publish correctly.


The whole thing runs against a mock SDK in a public playground, because the widgets only ever talk to an interface. Swapping Contentful for an in-memory object is a one-file affair — which is also exactly what makes the widgets testable.