Vercel DatoCMS Integration
Learn how to integrate DatoCMS with Vercel. Follow our step-by-step tutorial to set up and manage your digital content seamlessly using DatoCMS API.DatoCMS is a headless content management system designed for creating and managing digital content with flexibility. It provides a powerful API and a customizable editing interface, allowing developers to build and integrate content into any platform or technology stack.
To get started with DatoCMS on Vercel, follow the steps below to install the integration:
To pull in environment variables from DatoCMS to your Vercel project, you need to install the Vercel CLI. Run the following command in your terminal:
pnpm i -g vercel@latest
Navigate to the DatoCMS integration and follow the steps to install the integration.
Once you've installed the DatoCMS integration, you can pull in environment variables from DatoCMS to your Vercel project. In your terminal, run:
vercel env pull .env.development.local
See your installed CMSs documentation for next steps on how to use the integration.
Content Link is available on Pro and Enterprise plans
Content Link enables you to edit content on websites using headless CMSs by providing links on elements that match a content model in the CMS. This real-time content visualization allows collaborators to make changes without needing a developer's assistance.
Content Link can be enabled on a preview deployment through the Edit Mode button on the Vercel Toolbar's.
The corresponding model in the CMS determines an editable field. Hover over an element to display a link in the top-right corner of the element. Select the link to open the related CMS field for editing.
![An editable element with a link to open the related field in the CMS](/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1689795055%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Fopen-in-sanity-light.png&w=750&q=75)
![An editable element with a link to open the related field in the CMS](/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1689795055%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Fopen-in-sanity-dark.png&w=750&q=75)
Using this feature doesn't require any additional configuration or code changes to the page you want to edit.
Was this helpful?