Experience Fragment

An Experience Fragment encapsulates structured data (text, images, product references), presentation logic (CSS, JavaScript), and layout metadata (responsive breakpoints, grid placement) into a single version-controlled entity. This bundling ensures that the visual and functional integrity of a component remains intact regardless of where it is assembled. Unlike simple Content Fragments, which are purely data, Experience Fragments carry their own rendering instructions.

• Combines data model, view template, and style rules
• Maintains atomic versioning across all layers
• Eliminates the external dependency chain for rendering

A single Experience Fragment can define multiple channel-specific variations from a master copy. Each variation tailors layout, image cropping, and copy length for a target surface—such as a mobile web view, a native app screen, or a social media preview—without duplicating the underlying content model. The delivery layer selects the appropriate variation at runtime based on the requesting channel's context.

• Master content with inherited variations
• Automated asset transformation per channel
• Synchronized updates across all surface endpoints

Experience Fragments are exposed through RESTful or GraphQL APIs that serve the fully composed HTML, JSON, or plain text payload. This headless architecture allows any front-end consumer—a React single-page application, a native mobile app, or a third-party kiosk—to request and render the fragment without understanding its internal authoring schema. The API response includes the rendered markup and associated metadata.

• Content negotiation via HTTP Accept headers
• Cacheable responses with surrogate key support
• Decoupled from any specific rendering framework

At request time, an Experience Fragment can resolve dynamic references to external data sources, user profiles, or contextual signals. A product carousel fragment, for instance, might query a real-time inventory service to populate its items. This late-binding behavior allows the fragment to serve as a personalized building block within a larger Content Mesh, adapting its output without altering the authored template.

• Resolves references at the edge or server-side
• Integrates with decisioning engines for personalization
• Supports server-side rendering (SSR) hydration

Each Experience Fragment carries its own cache metadata, including Time-To-Live (TTL) directives and surrogate keys. This allows a CDN to cache the rendered output of a fragment independently from the page that contains it. When an author updates a fragment, a targeted cache invalidation call using its surrogate key purges only the affected fragment across all pages, leaving the rest of the site cache intact.

• Independent fragment-level TTL configuration
• Surrogate key-based targeted purging
• Supports stale-while-revalidate strategies

Experience Fragments operate as discrete units within a content supply chain, supporting draft, review, and publish workflows independent of the pages they populate. An approval on a fragment automatically propagates the updated version to every surface that references it. This atomic governance model prevents stale or unapproved content from leaking into production while enabling parallel authoring streams.

• Isolated lifecycle states per fragment
• Automated multi-surface propagation on publish
• Rollback capability to previous versions

Maintain a single source of truth for global navigation and legal footers. An Experience Fragment containing the site header is authored once and syndicated to the web, mobile app, and AMP pages. A change to the navigation structure is propagated instantly across all headless delivery endpoints without requiring a multi-page rebuild, ensuring brand consistency and reducing operational overhead.

Create a master promotional banner as an Experience Fragment and generate locale-specific variations. The core layout and design are locked, but copy, imagery, and legal disclaimers are adapted for regional markets. This enables a content federation strategy where a central marketing team controls the global campaign structure while regional teams manage translation and cultural adaptation within governed guardrails.

Use Experience Fragments as the testable unit in an A/B Testing Engine. Instead of duplicating entire pages, create two variations of a hero section fragment. The decisioning engine serves different fragment variants to segmented audiences and measures conversion. This isolates the test to a specific component, simplifies statistical analysis, and allows the winning fragment to be promoted to the live master without a full deployment cycle.

Expose curated content packages as Experience Fragments via a JSON API for external platforms. A product highlight fragment containing copy, images, and a call-to-action is consumed by a partner's mobile app or a social media platform's instant article renderer. This headless content management approach decouples content creation from proprietary front-end logic, allowing external channels to render the fragment using their own native design systems.

Combine Experience Fragments with Edge-Side Includes (ESI) to assemble pages at the CDN level. A product detail page is composed of a static template and several fragments—pricing, reviews, recommendations—each with independent caching policies. The pricing fragment has a short TTL, while the review fragment is cached for hours. This edge compute pattern delivers personalized, up-to-date pages with the performance of static content.

Author a single promotional Experience Fragment and adapt its presentation for different outbound channels. The same core content—headline, body copy, and hero image—is rendered as HTML for an email campaign and as a simplified text-and-image payload for a mobile push notification. This ensures messaging consistency across marketing automation platforms while respecting the distinct rendering constraints of each channel.