Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlog
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

Vercel Content Link

Vercel Content Link will allow your editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it. This requires no changes to your front-end code and very few changes to your Payload Config.

Versions

How it works

To power Vercel Content Link, Payload embeds Content Source Maps into its API responses. Content Source Maps are invisible, encoded JSON values that include a link back to the field in the CMS that generated the content. When rendered on the page, Vercel detects and decodes these values to display the Content Link interface.

For full details on how the encoding and decoding algorithm works, check out @vercel/stega.

Getting Started

Setting up Payload with Vercel Content Link is easy. First, install the @payloadcms/plugin-csm plugin into your project. This plugin requires an API key to install, contact our sales team if you don't already have one.

1
npm i @payloadcms/plugin-csm

Then in the plugins array of your Payload Config, call the plugin and enable any collections that require Content Source Maps.

1
import { buildConfig } from "payload/config"
2
import contentSourceMaps from "@payloadcms/plugin-csm"
3
4
const config = buildConfig({
5
collections: [
6
{
7
slug: "pages",
8
fields: [
9
{
10
name: 'slug',
11
type: 'text',
12
},
13
{
14
name: 'title,'
15
type: 'text',
16
},
17
],
18
},
19
],
20
plugins: [
21
contentSourceMaps({
22
collections: ["pages"],
23
}),
24
],
25
})
26
27
export default config

Now in your Next.js app, include the ?encodeSourceMaps=true parameter in any of your API requests. For performance reasons, this should only be done when in draft mode or on preview deployments.

1
if (isDraftMode || process.env.VERCEL_ENV === 'preview') {
2
const res = await fetch(
3
`${process.env.NEXT_PUBLIC_PAYLOAD_CMS_URL}/api/pages?where[slug][equals]=${slug}&encodeSourceMaps=true`,
4
)
5
}

And that's it! You are now ready to enter Edit Mode and begin visually editing your content.

Edit Mode

To see Content Link on your site, you first need to visit any preview deployment on Vercel and login using the Vercel Toolbar. When Content Source Maps are detected on the page, a pencil icon will appear in the toolbar. Clicking this icon will enable Edit Mode, highlighting all editable fields on the page in blue.

Versions

Troubleshooting

Date Fields

The plugin does not encode date fields by default, but for some cases like text that uses negative CSS letter-spacing, it may be necessary to split the encoded data out from the rendered text. This way you can safely use the cleaned data as expected.

1
import { vercelStegaSplit } from '@vercel/stega'
2
const { cleaned, encoded } = vercelStegaSplit(text)

Blocks and array fields

All blocks and array fields by definition do not have plain text strings to encode. For this reason, they are given an additional _encodedSourceMap property, which you can use to enable Content Link on entire sections of your site. You can then specify the editing container by adding the data-vercel-edit-target HTML attribute to any top-level element of your block.

1
<div data-vercel-edit-target>
2
<span style={{ display: "none" }}>{_encodedSourceMap}</span>
3
{children}
4
</div>
Next

Getting Started