Skip to main content
Storyblok is a headless CMS that lets your Lovable app fetch published or preview stories, or create, update, and publish stories managed in the Storyblok app. It’s designed for apps where editorial workflows, visual page building, and structured content live outside the codebase. Storyblok is available as an app + chat connector: one shared connection that works in the project chat while you build and in your published apps. With Storyblok, your app can:
  • Fetch published or draft stories from the Content Delivery API
  • Create, update, and publish stories through the Management API
  • List assets and component schemas in a space
  • Render Storyblok rich text and components in your app
  • Drive SEO metadata (title, description, and social image) from content fields
A Content Delivery API connection is read-only. A Management API connection can change content in the spaces you approve during sign-in.

​
Common use cases and example apps

These examples show what you can build with Storyblok, each with a prompt to start from.

​
How to connect Storyblok

Who can create Storyblok connections depends on your plan and workspace settings. App + chat connectors are available by default on Free, Pro, and Business plans. On Enterprise plans, they are effectively disabled at first: Who can create connections and clients defaults to No one until an admin changes it in Connectors → Admin settings → App + chat connectors. Storyblok offers two APIs, and you choose which one to connect when adding a connection:
  • CDN API (default): read-only access to fetch published or preview content using a Content Delivery API access token
  • Management API: read and write access to the spaces you approve to create, update, and publish content by signing in with your Storyblok account
You can create multiple Storyblok connections using different accounts or access tokens, which is useful for separating environments (for example, development and production), targeting different spaces or regions, or switching between published and preview content. When the connection is created, you can link it to the projects where you want to use it. Anyone building in a project can ask Lovable in the project chat to link their project to it.

​
Prerequisites

Before connecting Storyblok, make sure you have:
  • A Storyblok account and a space
  • The region where that space is hosted
  • For CDN API (most common): a Content Delivery API access token from that space (public or preview)
  • For Management API: your Storyblok account credentials to sign in and authorize Lovable
  • Permission to create connections in your Lovable workspace (see Who can create connections and clients)
All API requests made through this connector count toward your Storyblok plan limits. Billing and quota are handled directly by Storyblok, not Lovable.
Follow the setup steps below based on which API you need.
The CDN API is read-only and lets your app fetch published or preview content. This is the most common choice for apps that display Storyblok content. You connect using a Content Delivery API access token from your Storyblok space.

​
Step 1: Get a Storyblok CDN API access token

A Content Delivery API access token lets your Lovable app fetch content from your Storyblok space. You can create separate tokens for published and preview content.To create a Storyblok access token:
1

Open your Storyblok space

Sign in to the Storyblok app and open the space you want to connect.
2

Open access tokens

Go to Settings → Access Tokens.
3

Generate a new token

Click Generate new token, enter a descriptive name, for example Lovable integration, and choose the access level:
  • Public: returns only published content. Use this for production sites.
  • Preview: returns published and draft content. Use this for staging or editor preview environments.
Click Generate and copy the token.
4

Note your space region

Note the region of your space (EU, US, CA, AP, or CN). You can find this in your space settings, and it must match the region you select in Lovable.
Your access token functions like a password. Keep it secure and never share it publicly. You’ll need it in the next step.
See Storyblok documentation for more: Content Delivery API v2.

​
Step 2: Connect Storyblok to Lovable

With your access token ready, add the connection in Lovable.
1

Open Storyblok in Connectors

Open Connectors and select Storyblok. For the other places to open the catalog from, see Where to find connectors.
2

Add a connection

Click Add connection and select App + chat connector. The form is split into collapsible sections, Details, Configure connection, and Sharing.
3

Name the connection

Under Details, Lovable fills in a name for the connection, which you can change. The name is only used inside Lovable to identify the connection.
4

Choose CDN API

Under Configure connection, select CDN API. This is the access token option.
5

Configure the connection

Under Configure connection, enter:
  1. Space region: select the region where your Storyblok space is hosted: European Union (EU) (default), United States (US), Canada (CA), Australia / APAC (AP), or China (CN). The region must match the space the token belongs to. A token from a US space does not authenticate against the EU region.
  2. Public or preview access token: paste your Content Delivery API access token.
6

Choose who can use this connection

Under Sharing, the connection is private to you by default and shows a Private label. To share it, click Share with others. Then add workspace members by email, or click Invite entire workspace to make the connection available to everyone in your Lovable workspace.See Who can use connections and clients for more information.
7

Connect

Click Connect. Lovable verifies the token against the Storyblok Content Delivery API for the selected region before saving the connection.
When connected, anyone building in a project can ask Lovable in the project chat to link their project to Storyblok (based on configured connection-level access). What your app can do depends on which API you connected: CDN API connections are read-only for fetching content, while Management API connections can create, update, and publish content.

​
Working with published and preview content

The Storyblok Content Delivery API returns different content depending on the token and the request.
  • Public tokens return published content only.
  • Preview tokens can return published or draft content.
When prompting Lovable, mention which version you want. For example, “show draft content” for an editor preview, or “use published content” for a production site.

​
Limitations

The Storyblok connector cannot:
  • Receive Storyblok webhooks or publish events. Your app needs its own endpoint if it should react to changes in Storyblok.
  • Use more than one region per connection. A single connection uses the region you select.
  • Support per-end-user Storyblok login. Each connection represents a single Storyblok account or access token shared across all projects linked to it.
If Storyblok authorization is revoked from the Storyblok side, you’ll need to reconnect the integration in Lovable before API calls can succeed again.

​
Manage your Storyblok connection

Connections are managed from Connectors: select Storyblok, then open the connection.
  • Unlink projects to remove Storyblok access from specific projects while keeping the connection available for others. See Unlink projects from a connection for the steps.
  • Delete the connection to remove it from the workspace entirely. Deleting is permanent. It removes the credentials from all linked projects, and app features that use Storyblok stop working until a new connection is added. See Delete a connection for the steps and who can delete.