Skip to main content
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. 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, og:image) from content fields
The Storyblok connector is read-only and targets Storyblok’s Content Delivery API (CDN). 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

​
How to connect Storyblok

Workspace admins and owners can connect Storyblok. You can create multiple Storyblok connections using different access tokens. This 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, Storyblok becomes available across all projects in the workspace.

​
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)
  • Lovable workspace owner or admin role
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

Navigate to Settings → Access Tokens.
3

Generate a new token

Click Generate new token.
  1. Enter a descriptive name, for example Lovable integration.
  2. 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.
  3. 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 docs for detailed instructions: Content Delivery API v2.

​
Step 2: Connect Storyblok to Lovable

You can create multiple connections using different access tokens. To connect Storyblok:
1

Open Storyblok in Connectors

Go to Connectors → App connectors and select Storyblok.
2

Add a connection

Click Add connection.
3

Configure the connection

  1. Display name: name the connection, for example Storyblok Prod.
  2. Space region: select the region where your Storyblok space is hosted (EU, US, CA, AP, or CN). The default is European Union (EU). The region must match the space the token belongs to. A token from a US space will not authenticate against the EU CDN.
  3. Public or preview access token: paste your Content Delivery API token.
  4. Who can access this connection: keep access limited to specific people or invite the entire workspace. See Who can manage connections for more information.
4

Connect

Click Connect.
When connected, your Lovable apps can start fetching Storyblok content.

​
Working with published and preview content

The Storyblok Content Delivery API returns different content depending on the request:
  • Public tokens can only return published content.
  • Only preview tokens can return drafts.
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 (CDN). 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
  • Support per-end-user authentication (each connection uses a single shared token)
Editors and above can remove specific projects from a connection without deleting the connection entirely. The connection will remain available for other projects. To unlink projects:
1

Open Connectors

Open Connectors and select .
2

Open the connection

Open the connection you want to manage.
3

Select projects

Under Linked projects, check the projects you want to unlink.
4

Confirm

Click Unlink projects and confirm.
When unlinked, those projects will no longer have access to through this connection. If a project needs again, you can link it to any available connection.

​
How to delete a connection

Workspace admins and owners can delete connections. Other members can delete a connection if they created it, or if they have been explicitly granted access to it.
Deleting a connection is permanent and cannot be undone. It will remove the credentials from all linked projects, and any apps using this connection will stop working until a new connection is added.
Before deleting, review the Linked projects section to see which projects are currently using the connection. To delete a connection:
1

Open Connectors

Open Connectors and select .
2

Open the connection

Open the connection you want to remove.
3

Review linked projects

Review the Linked projects section.
4

Delete

Under Delete this connection, click Delete and confirm.