> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

export const connector_0 = "Storyblok"

[Storyblok](https://www.storyblok.com/) 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

| 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.**<br />The app fetches stories by slug, renders the matching components, and surfaces 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.**<br />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.**<br />The app lists items with filters, deep-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.**<br />The app reads the story tree, builds navigation from `starts_with` queries, 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.**<br />The app fetches the right language version per route and falls back gracefully 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.**<br />Connected with a preview token, the app requests `version=draft` 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 CTAs.*              | **Let marketers compose landing pages visually in Storyblok.**<br />The app maps Storyblok components to UI components and renders complete pages keyed by slug.                                                     |

## 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

<Note>
  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.
</Note>

### 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:

<Steps>
  <Step title="Open your Storyblok space">
    Sign in to the [Storyblok app](https://app.storyblok.com/) and open the space you want to connect.
  </Step>

  <Step title="Open access tokens">
    Navigate to **Settings → Access Tokens**.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Warning>
  Your access token functions like a password. Keep it secure and never share it publicly. You'll need it in the next step.
</Warning>

See Storyblok docs for detailed instructions: [Content Delivery API v2](https://www.storyblok.com/docs/api/content-delivery/v2).

### Step 2: Connect Storyblok to Lovable

You can create multiple connections using different access tokens.

To connect Storyblok:

<Steps>
  <Step title="Open Storyblok in Connectors">
    Go to **Connectors → App connectors** and select **Storyblok**.
  </Step>

  <Step title="Add a connection">
    Click **Add connection**.
  </Step>

  <Step title="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 [Connection-level access](/integrations/introduction#connection-level-access) for more information.
  </Step>

  <Step title="Connect">
    Click **Connect**.
  </Step>
</Steps>

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)

## How to unlink projects from a {connector_0} connection

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:

<Steps>
  <Step title="Open Connectors">
    Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
  </Step>

  <Step title="Open the connection">
    Open the connection you want to manage.
  </Step>

  <Step title="Select projects">
    Under **Linked projects**, check the projects you want to unlink.
  </Step>

  <Step title="Confirm">
    Click **Unlink projects** and confirm.
  </Step>
</Steps>

When unlinked, those projects will no longer have access to {connector_0} through this connection. If a project needs {connector_0} again, you can link it to any available connection.

## How to delete a {connector_0} connection

Workspace admins and owners can delete {connector_0} connections.

<Warning>
  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.
</Warning>

Before deleting, review the **Linked projects** section to see which projects are currently using the connection.

To delete a connection:

<Steps>
  <Step title="Open Connectors">
    Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
  </Step>

  <Step title="Open the connection">
    Open the connection you want to remove.
  </Step>

  <Step title="Review linked projects">
    Review the **Linked projects** section.
  </Step>

  <Step title="Delete">
    Under **Delete this connection**, click **Delete** and confirm.
  </Step>
</Steps>