Introducing Content Source Maps: A shortcut from front-end to content

Written by Simen Svale

As companies embrace decoupled CMSes in the composable era, they need to ensure that the performance and flexibility gains coincide with increased resilience, strong security, and better editorial affordances. Although teams see the potential of headless CMS architectures, they want to ensure that transitioning from their traditional setup won't negatively impact team efficiency.

Today we’re releasing a new open standard for annotating JSON data with contextual metadata: Content Source Maps. By adding data to a content API response, Content Source Maps provide a shortcut from the front-end site directly to the source of content within a modern, decoupled content management system. This standard creates opportunities for increased efficiency and accuracy for the ecosystem of teams working on digital experiences: content teams (including creators, editors, and designers), developers, and subject matter experts.

This open standard is brought to life by Sanity as a new API for all Sanity projects and an end-to-end visual editing experience for customers using Sanity and Vercel.

Why modern CMSes change the game

As we all experience in our day to day, digital surfaces and devices have continued to proliferate, and our expectations for personalized, localized, and cohesive content are ever-increasing. This is why modern content solutions have emerged: they make it possible to meet the demands of the omnichannel era at scale.

Distilling the “how” comes down to a core concept: reuse. In a monolithic world where content back ends are tied tightly to the specific front end surface (e.g., WordPress), teams spend inordinate amounts of time creating and updating content across many instances.

• With a modern CMS—which goes beyond a headless CMS—content is created centrally within a composable, no-ops storage layer: Content Lake. Content Lake aggregates changes from any source, including Sanity’s editing environment but also other sources of content and data such as a PIM or ecommerce platform.
• When the content is created, it’s represented as structured content, which means it’s broken down into its component parts. For example, a blog post has a title, an author, body content, and perhaps a video. Each of these is stored as discrete components, and the types of components that matter to each business can be uniquely and expressively defined (this makes up the content model).
• Finally, APIs are used to query the content and present whichever relevant parts are needed for each front-end surface. Sanity developed GROQ as another open standard to provide developers with a powerful query language to formulaically gather, recompose, and deliver the exact content needed to develop your application. To use Content Source Maps with GROQ, utilize the query endpoint version v2021-03-25 or later. In addition to GROQ, Sanity customers have the option to use GraphQL; GraphQL support for Content Source Maps is available with the GraphQL endpoint version v2023-08-01 and on.

With a modern CMS like the Sanity Composable Content Cloud, the benefits of this approach include dramatically faster content creation in a multi-experience world and far better customer experiences through content performance, accuracy, and relevance.

The gap that inspired Content Source Maps

Here’s the tradeoff: when a content person, developer, SME, or simply a good samaritan has feedback about a piece of content they encounter in the world—whether on a website, app, or in-store display—it can take time to hunt down the exact source of that root content. Especially in enterprise scenarios when there’s an immense volume of content owned by various teams, within a complex content model (lots of nested relationships, for example).

This can undermine the efficiency of going with a modern, decoupled CMS when even minor, everyday changes like a typo or incorrect image take a good chunk of time to locate within the editing environment. Often this requires a team member who has a deep understanding of how their organization’s content is modeled, leading to further bottlenecks.

Customers moving to headless or composable CMSes are hungry for ways to make content editing more intuitive for non-developers; they struggle with querying or traversing through complex content structures. Content Source Maps solves this in a powerful, intuitive way by providing a link from any front-end to the source of content.

– Scott Gentz, Sanity Strategic Director of Accounts (and former Director of Technology at AT&T).

Creating content’s version of JavaScript Source Maps

Content Source Maps work by adding a bit of data to the content API response which can be used to trace any bit of content back to its source in the content management system. This data includes the exact document and field where the content originated.  However complex the join you did to assemble the output, we’ll give you the source of every field in the final document.