Storyblok Meets Lovable: Build by Chatting, Manage Content in Storyblok
Storyblok is the first headless CMS that works for developers & marketers alike.
Storyblok is now available as a connector in Lovable, as part of our partnership with the Lovable team.
With the connector, Lovable handles the code and Storyblok handles the content. You tell Lovable what you want in the chat, and it generates and updates the front end. Your stories, blocks, and assets stay in Storyblok, where your team edits, previews, and publishes them. Lovable uses the same connection in the project chat while you build and in the app you publish. You can also add more than one connection, for example one for each space you work with, or one for an environment where you can experiment before touching your production space.
Developers get a fully functional website without writing a single line of code themselves. People without a technical background can build a complete website by describing it, then keep it up to date in Storyblok on their own.
Two ways to connect
The connector can read your content, and it can also write it. When you add Storyblok in Lovable, you pick one of two connection types:
- Read is the right choice when your content already lives in Storyblok and you need a front end for it. Lovable fetches your stories using Storyblok’s Content Delivery API and renders your rich text and components.
- Read and write is the right choice when you're starting from zero and need Lovable to create your Storyblok space and content, along with the code. It uses the Storyblok's Management API through OAuth 2.0 Scoped Grants. You sign in with your Storyblok account, choose which spaces Lovable can access, and review the permissions before you authorize. Lovable can then do anything those permissions allow: for example, create and publish stories and releases, define components, manage assets and asset folders, set up datasources, tags, and workflows, and handle collaborators, users, and webhooks.
Read: build on content you already have
If your content already lives in Storyblok, Lovable reads your stories and bloks and designs around them. Every layout starts from your real copy, images, and structure.
Test a redesign on real pages
Redesign our homepage using the content in my Storyblok space. Keep the existing components and copy. Go for a premium, cinematic look with layered depth and dramatic contrast. Only change the homepage for now.Bring existing content to a new channel
Build a help center for our customers from the stories in the help folder of my Storyblok space. Add a search bar, category chips based on tags, and a sidebar that follows the folder structure. Keep it minimal and developer-focused.Pitch a client with their own content
Build a concept site for a client pitch using the content in this Storyblok space. Render every existing page type with the real copy and images. Use a bold, editorial style with oversized typography and a strict grid.Read and write: create with Lovable, manage in Storyblok
Give Lovable an empty space, and it sets up the content model while it builds the front end. When it's done, your team edits everything in Storyblok.
Launch a campaign landing page
Build a landing page for our fall webinar series, aimed at marketing managers at mid-size SaaS companies. The main CTA is "Save Your Seat." Include a hero, three session cards with speaker photos, an agenda, and a registration form. Use a bold, expressive style with large type and high contrast. Create the components and the page content in my Storyblok space so our team can edit it later.Build a full website from scratch
Build a website for my brand, a sustainable furniture studio, aimed at homeowners and interior designers. Pages: home, collections, about, journal, and contact. The main CTA is "Book a Showroom Visit." Use a calm, premium design with muted earth tones and generous whitespace. My Storyblok space is empty: create the components, the folder structure, and every page as a story, with starting copy that fits the brand.Spin up an event microsite
Build a microsite for our summit, a one-day conference for frontend engineers. Pages: home, agenda, speakers, and venue. The main CTA is "Get Your Ticket." Use a developer-focused dark theme with monospace accents. In Storyblok, create a speaker component and a session component, and store each speaker and session as a separate story.Tip: End your prompt with "Ask me any questions you need before you start building." Lovable will ask first and write code after.
For larger projects, you can pair the Lovable connector with the Storyblok MCP server. Tamas Piros explains when and how to combine Lovable with the Storyblok MCP server.
