Your AI knows it (stack pack)Starter and up

Contentful sites, with an AI that knows Contentful

Xodia detects Contentful on your site, lets the preview fetch your content, and gives your AI skills for the Delivery and Preview APIs, Live Preview and rich text. You edit the page around the content visually; the entries stay in Contentful.

Start free Every integration

Free plan. 14-day Pro trial. No charge unless you choose a plan.

Rise BakerymainliveDesignContentCodeSavedSavePublish

Stack packsExtra know-how for your site's framework, styling, content system and host. Each site gets only the packs it needs; the highlighted ones are used on this site.

Content systems

SanityReady

Schemas, queries, images and references, and safe content changes.

ContentfulOn this site

Delivery and Preview APIs, Live Preview tags and updates, content types and rich text, and what changes in code.

StoryblokReady

SDK setup and region, React entry points, draft and published stories, the visual editor and safe preview tokens.

PrismicReady

Models with the Prismic CLI or Type Builder, routes in prismic.config.json, slices, previews and revalidation.

Git-based CMSReady

Keystatic, Decap and Tina: content stored as files in the repo, their config, media folders and dev commands.

Hosting

VercelOn this site

Preview and production deploys, environment variables and rollbacks.

NetlifyReady

Production and branch deploys, environment variables, redirects and rollbacks.

CloudflareReady

Pages and Workers builds, environment variables and rollbacks.

GitHub PagesReady

Deploys from GitHub Actions, base paths for project sites, the 404 page, and no redirect or header files.

Combinations

Next.js with SanityReady

Draft previews, live content, cached fetches and refresh on publish.

Astro with SanityReady

Sections editors control, previews and rebuilds on publish.

Next.js with PrismicReady

The shared client with previews, preview and revalidate routes, SEO fields in metadata and Prismic images.

Next.js with ContentfulOn this site

Draft mode with the Preview API, Live Preview in the editor, and fresh pages on publish.

Next.js with StoryblokReady

The server components entry, draft stories on the server, and the visual editor bridge only in preview.

Astro with StoryblokReady

The Storyblok integration, live preview with on-demand rendering, and published stories at build time.

Astro with ContentfulReady

Delivery or Preview API by environment, and a rebuild when editors publish.

What you can do

Your site and its content, each where it belongs

The preview shows your pages with real content. The Content tab doesn't edit Contentful entries yet, so content changes happen in Contentful and code changes in Xodia.

The live preview fetches from Contentful's APIs, which are allowed for the preview without setup
Edit the layout and the text written in your code on the canvas, as on any site
Ask your AI for code changes: queries, content types used in code, Live Preview tags and rich text rendering
Skills for Next.js and Astro with Contentful, for draft mode and fresh pages on publish

How to set it up

Give the preview your Contentful keys

Xodia reads Contentful the way your site does, with the variables it already uses.

Import your site. Xodia detects Contentful from its packages, such as contentful or @contentful/live-preview.
In Settings, Environment variables, add the space id and tokens your site reads, under the same names.
Start the preview: pages render with your Contentful content.
Ask your AI for a change. It loads the Contentful skills for your framework on its own.

Rise BakerymainliveDesignContentCodeSavedSavePublish

Project settings

GeneralPublishingRestore pointsAI agentCode and GitCustom codeEnvironment

Environment

Variables and the extra hosts the preview's dev server may use.

Environment variables

Given to the preview's dev server only. Values are encrypted and never shown to your agent or in Xodia again.

CONTENTFUL_SPACE_IDhidden

CONTENTFUL_ACCESS_TOKENhidden

CONTENTFUL_PREVIEW_ACCESS_TOKENhidden

NAMEValueAdd

Allowed hosts

The preview can reach package registries and the services your project uses (detected automatically). Add any other API its server calls, like api.example.com, or .example.com for every subdomain.

api.example.comAllow

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

Contentful skills
Starter and up
Delivery and Preview APIs, Live Preview tags and updates, content types and rich text, and what changes in code.
Written for: contentful.js clients, @contentful/live-preview 4 and @contentful/content-source-maps, on Next.js, Astro or any React site.
Next.js with Contentful skills
Starter and up
Draft mode with the Preview API, Live Preview in the editor, and fresh pages on publish.
Written for: Next.js 14 to 16 App Router with contentful.js 10 and 11, @contentful/live-preview 4 and @contentful/content-source-maps; revalidateTag notes for 16.
Astro with Contentful skills
Starter and up
Delivery or Preview API by environment, and a rebuild when editors publish.
Written for: Astro 4 to 7 with contentful.js 10 and 11 and @contentful/rich-text-html-renderer.

Plans

Which plan you need

The Contentful skills come with Starter, Pro and Agency. The preview, the canvas and your AI work on every plan.

Free
CMS and host packs: not included
Starter
CMS and host packs: included
Pro
CMS and host packs: included
Agency
CMS and host packs: included

Limits

Good to know

The Content tab doesn't edit Contentful entries yet; edit them in Contentful
Xodia has no Contentful connection of its own: the preview uses the keys you add as environment variables
Text that comes from Contentful isn't edited in place on the canvas

Questions

Contentful questions

Can I edit Contentful entries in Xodia?

Not yet. The Content tab edits files in your repo and Sanity documents. For Contentful, edit entries in Contentful, and use Xodia for the site's code and layout.

Are my Contentful tokens safe?

They're stored encrypted, passed only to the preview's dev server, and never shown to your AI or in Xodia again.

Which frameworks do the skills cover?

Contentful on Next.js, Astro or any React site, with extra skills for Next.js and Astro.

What if I want a CMS I can edit in Xodia?

Sanity documents and content kept in your repo open in the Content tab. See Sanity and git-based CMS.

Keep exploring

Bring your Contentful site, and an AI that knows it.

Start free See pricing

Contentful sites, with an AI that knows Contentful

Your site and its content, each where it belongs

Give the preview your Contentful keys

The versions it covers, and the skills your AI gets

Contentful skills

Next.js with Contentful skills

Astro with Contentful skills

Which plan you need

Free

Starter

Pro

Agency