Your AI knows it (stack pack)Starter and up

Storyblok sites, with an AI that knows Storyblok

Xodia detects Storyblok on your site, lets the preview fetch your content, and gives your AI skills for the Storyblok SDK, draft and published stories and the visual editor bridge. You edit the page around the content visually; the stories stay in Storyblok.

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.

ContentfulReady

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

StoryblokOn this site

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 ContentfulReady

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

Next.js with StoryblokOn this site

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 Storyblok stories yet, so content changes happen in Storyblok and code changes in Xodia.

The live preview fetches from Storyblok'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: the SDK setup and region, components for your blocks, rich text and safe preview tokens
Skills for Next.js and Astro with Storyblok: draft stories on the server and the visual editor bridge only in preview

How to set it up

Give the preview your Storyblok keys

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

Import your site. Xodia detects Storyblok from its packages, such as @storyblok/react or @storyblok/astro.
In Settings, Environment variables, add the access token and region your site reads, under the same names.
Start the preview: pages render with your Storyblok stories.
Ask your AI for a change. It loads the Storyblok 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.

STORYBLOK_DELIVERY_API_TOKENhidden

STORYBLOK_REGIONhidden

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.

Storyblok skills
Starter and up
SDK setup and region, React entry points, draft and published stories, the visual editor and safe preview tokens.
Written for: @storyblok/react 7 (8 in release candidate), @storyblok/astro 8 to 10 (10 changed rich text rendering) and @storyblok/js, on Next.js, Astro or React sites.
Next.js with Storyblok skills
Starter and up
The server components entry, draft stories on the server, and the visual editor bridge only in preview.
Written for: Next.js 14 to 16 App Router with @storyblok/react 7 (the /rsc entry); revalidateTag notes for 16.
Astro with Storyblok skills
Starter and up
The Storyblok integration, live preview with on-demand rendering, and published stories at build time.
Written for: @storyblok/astro 8 to 10 (10.3 current; 9 added Astro 6 support, 10 changed rich text rendering) on Astro 3 to 7.

Plans

Which plan you need

The Storyblok 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 Storyblok stories yet; edit them in Storyblok
Xodia has no Storyblok connection of its own: the preview uses the keys you add as environment variables
Text that comes from Storyblok isn't edited in place on the canvas

Questions

Storyblok questions

Can I edit Storyblok stories in Xodia?

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

Are my Storyblok 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?

Storyblok on Next.js, Astro or React sites, 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 Storyblok site, and an AI that knows it.

Start free See pricing

Storyblok sites, with an AI that knows Storyblok

Your site and its content, each where it belongs

Give the preview your Storyblok keys

The versions it covers, and the skills your AI gets

Storyblok skills

Next.js with Storyblok skills

Astro with Storyblok skills

Which plan you need

Free

Starter

Pro

Agency