Connect your app to Storyblok

Connect your app to Storyblok, a headless CMS and visual page builder, to power content-driven sites and apps with editor-managed stories, components, and assets.

Storyblok is a headless CMS that lets your Lovable app fetch published or preview content (stories, links, tags, and datasources) managed by your content team 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 chat while you build and in your published apps.

With Storyblok, your app can:

• Fetch stories, links, tags, and datasources from the Content Delivery API
• Build content-driven sites backed by Storyblok stories and components
• Use published content for live experiences or preview content for draft previews
• Render Storyblok rich text and components directly in your app
• Drive SEO metadata (title, description, and social image) from content fields

The Storyblok connector is read-only and targets Storyblok’s Content Delivery API. It’s a good fit when your content is authored in Storyblok and your Lovable app is the front end that renders it.

Common use cases and example apps

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

Example app	Example prompt	Description
Marketing site backed by Storyblok	Use Storyblok and build a marketing site that pulls landing pages, blog posts, and navigation from Storyblok.	Render a full marketing site from content managed in Storyblok. The app fetches stories by slug, renders the matching components, and sets SEO metadata so editors can ship pages without code changes.
Blog or editorial site	Use Storyblok and build a blog that lists articles, supports tag filtering, and renders rich text from Storyblok.	Build an editorial reading experience driven by Storyblok stories. The app paginates story lists, filters by tag or content type, and renders rich text and embedded components for each post.
Product catalog or directory	Use Storyblok and build a product directory where editors manage listings in Storyblok and the app renders detail pages by slug.	Turn Storyblok stories into a structured directory. The app lists items with filters, links to detail pages by slug, and renders fields managed entirely in Storyblok.
Documentation or knowledge base	Use Storyblok and build a docs site with sections, a sidebar, and search-friendly pages from Storyblok.	Publish documentation from Storyblok with a navigable structure. The app reads the story tree, builds navigation from folder paths, and renders each page from rich content.
Multi-language content site	Use Storyblok and build a localized site that renders content in the visitor’s language using Storyblok translations.	Deliver localized experiences from a single Storyblok space. The app fetches the right language version per route and falls back to the default language when a translation is missing.
Preview environment for editors	Use Storyblok and build a preview site that shows draft content for editors before publishing.	Give editors a way to review unpublished work. Connected with a preview token, the app requests draft content so editors see in-progress stories before they go live.
Landing page generator	Use Storyblok and build a landing page app where each story slug renders a full page with hero, features, and calls to action.	Let marketers compose landing pages visually in Storyblok. The app maps Storyblok components to UI components and renders complete pages keyed by slug.

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.

You can create multiple Storyblok connections using different 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 chat to link their project to it.

Prerequisites

Before connecting Storyblok, make sure you have:

• A Storyblok account and a space
• A Content Delivery API access token from that space (public or preview)
• The region where that space is hosted
• Permission to create connections in your Lovable workspace (see Who can create connections and clients)

All API requests made through this connector use your Content Delivery API access token. API usage counts toward your Storyblok plan limits, and billing is handled directly by Storyblok, not Lovable.

Step 1: Get a Storyblok 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

You can create multiple connections using different access tokens.

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.

3. Configure the connection

   1. Display name: name the connection, for example Storyblok Prod. This name is only used inside Lovable to identify the connection.
   2. 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.
   3. Public or preview access token: paste your Content Delivery API access token.
4. 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.

5. 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 chat to link their project to Storyblok (based on configured connection-level access). Your Lovable apps can then fetch Storyblok 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 is read-only and targets the Content Delivery API.

The Storyblok connector cannot:

• Create, update, or delete content. Editors continue to manage content in the Storyblok app.
• Call Storyblok’s Management API for content authoring, space configuration, or asset uploads.
• Receive Storyblok webhooks or publish events.
• Use more than one region per connection. A single connection reads from the region you select.
• Support per-end-user Storyblok login. Each connection represents a single access token shared across all projects linked to it.

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.