- 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
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. 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. 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, 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. 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. 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. 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. 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
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:Open your Storyblok space
Sign in to the Storyblok app and open the space you want to connect.
Generate a new token
Click Generate new token.
- Enter a descriptive name, for example
Lovable integration. - 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.
Step 2: Connect Storyblok to Lovable
You can create multiple connections using different access tokens. To connect Storyblok:Configure the connection
- Display name: name the connection, for example
Storyblok Prod. - 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.
- Public or preview access token: paste your Content Delivery API token.
- Who can access this connection: keep access limited to specific people or invite the entire workspace. See Connection-level access for more information.
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.
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 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:
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.