Kickstart a new CMS project
with your favorite technology
Storyblok is a Headless CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Get started in a matter of minutes!
Storyblok and Next.js
Helpful resources
-
Get started with Next.js 13
Read our latest in-depth tutorial to start using Storyblok with Next.js 13.
-
Next.js Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Next.js.
-
Storyblok Discord
Join our supportive community of Storyblok and Next.js developers in the #nextjs channel of our Discord server.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
pages/index.js
, fetch the home story of your Storyblok space. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space.
StoryblokComponent
handles all of your nestable blocks automatically. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Next.js 12 as your technology, follow the steps, and you're ready to go!
Storyblok and Nuxt
Helpful resources
-
Nuxt Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Nuxt.
-
Storyblok Discord
Join our supportive community of Storyblok and Nuxt developers in the #nuxtjs channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/nuxt. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
pages/index.vue
, fetch the home story of your Storyblok space.StoryblokComponent
will resolve and render all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space in
storyblok
. Again,StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies on thev-editable
directive. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Nuxt as your technology, follow the steps, and you're ready to go!
Storyblok and React
Helpful resources
-
React Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and React.
-
Storyblok Discord
Join our supportive community of Storyblok and React developers in the #react channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/react. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
App.jsx
, fetch the home story of your Storyblok space.StoryblokComponent
will resolve and render all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space in
src/components
. Again,StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies onstoryblokEditable
. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose React as your technology, follow the steps, and you’re ready to go!
Storyblok and Vue
Helpful resources
-
Vue Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Vue.
-
Storyblok Discord
Join our supportive community of Storyblok and Vue developers in the #vuejs channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/vue. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
src/pages/Home.vue
, fetch the home story of your Storyblok space.StoryblokComponent
will resolve and render all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space in
src/components
. Again,StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies on thev-editable
directive. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Vue as your technology, follow the steps, and you’re ready to go!
Storyblok and Astro
Helpful resources
-
Astro Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Astro.
-
Storyblok Discord
Join our supportive community of Storyblok and Astro developers in the #astro channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/astro. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
src/pages/index.astro
, fetch the home story of your Storyblok space.StoryblokComponent
will resolve and render all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space in
src/storyblok
. Again,StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies onstoryblokEditable
. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Astro as your technology, follow the steps, and you're ready to go!
Storyblok and SvelteKit
Helpful resources
-
SvelteKit Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and SvelteKit.
-
Storyblok Discord
Join our supportive community of Storyblok and Svelte developers in the #svelte channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/svelte. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching a Story
In
src/routes/+page.js
, fetch the home story of your Storyblok space. The Storyblok Bridge is enabled insrc/routes/+page.svelte
.StoryblokComponent
resolves and renders all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space. Again,
StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies onstoryblokEditable
. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose SvelteKit as your technology, follow the steps, and you're ready to go!
Storyblok and Remix
Helpful resources
-
Remix Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Remix.
-
Storyblok Discord
Join our supportive community of Storyblok and Remix developers in the #remix channel of our Discord server.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
-
-
-
-
-
3. Fetching Stories
In
app/routes/$slug.jsx
, you can dynamically fetch the stories of your Storyblok space.StoryblokComponent
will resolve and render all of your Storyblok components. -
-
4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space in
app/components
. Again,StoryblokComponent
handles all of your nestable blocks automatically. The Storyblok Bridge relies onstoryblokEditable
. -
-
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Remix as your technology, follow the steps, and you're ready to go!
Storyblok and Gatsby
Helpful resources
-
Gatsby Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Gatsby.
-
Storyblok Discord
Join our supportive community of Storyblok and Gatsby developers in the #gatsbyjs channel of our Discord server.
-
Official SDK
Learn how to make the most out of @storyblok/gatsby-source-storyblok. Feel free to share your feature requests, issues, or code contributions.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
Kickstart a new project
Copy the command below by clicking on it and run it in your terminal. Choose Gatsby as your technology, follow the steps, and you’re ready to go!
Other Technologies
We are working hard to create comprehensive learning hubs for every popular technology. The following resources will help you kickstart your project and learn how Storyblok can be used with your technology of choice.
-
JavaScript
Use the Universal JavaScript SDK to integrate with the Storyblok APIs in any JavaScript project.
-
TypeScript
Learn how to utilize the power of TypeScript in your Storyblok projects.
-
Angular
Learn how to use Storyblok with Angular.
-
Preact
Learn how to use Storyblok with Preact.
-
PHP
Use the official PHP Client to integrate with the Storyblok APIs in any PHP project.
-
Laravel
Learn how to use Storyblok with Laravel.
-
Python
Use the official Python Client to integrate with the Storyblok APIs in any Python project.
-
Ruby
This article will show you how to use Storyblok in combination with Ruby on Rails.
-
Django
Learn how to combine Python, Django, and Jinja2 to render data from Storyblok.
-
ASP.NET
Learn how to integrate the Storyblok API with an ASP.NET application and enable a real-time content preview in the Visual Editor.