Storyblok integration
Storyblok is a headless CMS built around blocks and a Visual Editor: editors compose pages from components and see the real site in a preview pane. We connect it to Astro with the official @storyblok/astro and to Next.js with @storyblok/react. Framer and Webflow have their own CMS and no official Storyblok app, so Storyblok fits best behind a coded site.
| Complexity | High |
|---|---|
| Method |
|
| Typical setup | 3 to 6 days |
| What we do | We turn the page designs into Storyblok blocks, map each block to a component, and set up the Visual Editor preview and rebuild-on-publish. |
| Category | CMS |
Setup by platform
How we set up Storyblok
Framer
- Not supported
There is no Storyblok plugin on the Framer Marketplace. Framer has its own CMS, so we keep content there, or move the site to Astro or Next.js when Storyblok has to be the source.
Webflow
- API
Webflow lists no Storyblok app. When content has to live in Storyblok, we copy published stories into Webflow CMS items with a small script on the Webflow Data API. Most Webflow sites are simpler with Webflow CMS alone.
Webflow developmentAstro
- Native
- API
The official @storyblok/astro integration maps each Storyblok block to an Astro component and gives a configured API client. Production builds read published content and a Storyblok webhook calls the host’s build hook; a separate server-rendered preview reads drafts with livePreview on for the Visual Editor.
Astro developmentNext.js
- Native
- API
@storyblok/react with its /rsc export renders stories as React Server Components, and storyblokEditable links each block to its fields in the Visual Editor. Preview reads the draft version with a preview token; production reads published content with a public token.
Next.js development
Use cases
What teams use it for
Landing pages without a developer
Marketers stack ready-made blocks (hero, logos, pricing, FAQ) into new pages and see the result as they edit.
Multi-language sites
Translate per field, per folder or per space. Field-level translation skips Blocks fields, so pages that differ by market go in folders.
Design system in the CMS
Each block matches a component in the code, so new pages stay on brand without design review every time.
Before you add it
What to watch out for
Security
Preview tokens stay private
The preview token reads drafts, so it only lives on the preview deployment’s server. The live site uses the public token and the published version.
Performance
Resize images through the Image Service
Adding /m/ and a size to a Storyblok asset URL resizes it and serves WebP where the browser supports it. We request the size each layout renders instead of the original upload.
Limits
Cache API requests at build time
Cached CDN requests allow far more calls per second than uncached ones, and large listings lower the limit. We fetch published content in pages of 25 and cache it during builds.
FAQ
Questions about Storyblok
Does the Visual Editor work with a static site?
The live site can stay fully static. The Visual Editor needs a preview that fetches draft content on each save, so we run a second, server-rendered deployment for editors and point the editor’s preview URL at it.
In local development the preview has to run over HTTPS. Storyblok’s guides use vite-plugin-mkcert for Astro and next dev --experimental-https for Next.js.
How does the live site update when an editor publishes?
In Storyblok, under Settings, Webhooks, we add the host’s build hook to the story published and unpublished triggers. Each publish starts a rebuild, which usually takes a minute or two on a marketing site.
Storyblok or Sanity?
Storyblok suits teams who want to build pages visually from blocks, with little training. Sanity suits teams who want a fully custom editor and more structured, reusable content. Both work well with Astro and Next.js; we help you choose during discovery.
Keep exploring
Compare platforms
Other integrations
- SanityA headless CMS for structured content, with live preview and click-to-edit for marketers.
- ContentfulAn API-first headless CMS for teams that publish across many sites, brands and channels.
- KeystaticA Git-based CMS that saves content as files in your repo, with an editor on your own site and no database.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call