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 #next-hub channel of our Discord server.
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 Next.js 12 as your technology, follow the steps, and you're ready to go!

Integrate Storyblok in an existing Next.js 12 project
1. Install the SDK

In your terminal, run the following command:

        
      npm i @storyblok/react

2. Configure the SDK

In pages/_app.js, load the integration and provide the access token of your Storyblok space.

pages/_app.js

        
      import { storyblokInit, apiPlugin } from "@storyblok/react";
 
storyblokInit({
  accessToken: "<your-access-token>",
  use: [apiPlugin]
});

3. Fetching a Story
In pages/index.js, fetch the home story of your Storyblok space.

pages/index.js

        
      import Head from "next/head"
import styles from "../styles/Home.module.css"
 
import { getStoryblokApi } from "@storyblok/react"
 
export default function Home(props) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
 
      <header>
        <h1>
          { props.story ? props.story.name : 'My Site' }
        </h1>
      </header>
 
      <main>
        
      </main>
    </div>
  )
}
 
export async function getStaticProps() {
  // home is the default slug for the homepage in Storyblok
  let slug = "home";
 
  // load the draft version
  let sbParams = {
    version: "draft", // or 'published'
  };
 
  const storyblokApi = getStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
 
  return {
    props: {
      story: data ? data.story : false,
      key: data ? data.story.id : false,
    },
    revalidate: 3600, // revalidate every hour
  };
}

4. Create Storyblok components
Create the counterparts to the components defined in your Storyblok space. StoryblokComponent handles all of your nestable blocks automatically.

components/Page.js

        
      import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
 
const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body.map((nestedBlok) => (
      <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
    ))}
  </main>
);
 
export default Page;

Next Steps

Follow our Ultimate Tutorial and learn how to build a complete website using Storyblok and Next.js. Alternatively, check out our other Next.js-related tutorials.

Note: if you use Next.js 14+ with App Router, we released a new version of our React SDK fully supporting Server Components, with live editor enabled for developers. You can find a detailed guide in the README of our repo .
Ultimate Tutorial Other Tutorials

Storyblok and Nuxt

Helpful resources

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!
- Integrate Storyblok in an existing project
- 1. Install the SDK
  
  In your terminal, run the following command:
- ```
        
      npm i @storyblok/nuxt
    
```
- 2. Configure the SDK
  
  In nuxt.config.js, load the integration and provide the access token of your Storyblok space.
- nuxt.config.js
```
        
      export default defineNuxtConfig({
  modules: [
    [
      '@storyblok/nuxt',
      {
        accessToken: '<your-access-token>',
      },
    ],
  ],
})
    
```
- 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.
- pages/index.vue
```
        
      <script setup>
const story = await useStoryblok('home', { version: 'draft' });
</script>
 
<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>
    
```
- 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 the v-editable directive.
- storyblok/page.vue
```
        
      <template>
  <div v-editable="blok" class="px-4">
    <StoryblokComponent v-for="blok in blok.body" :key="blok._uid" :blok="blok" />
  </div>
</template>
 
<script setup>
defineProps({ blok: Object })
</script>
    
```
- Next Steps
  
  Follow our Ultimate Tutorial and learn how to build a complete website using Storyblok and Nuxt. Alternatively, check out our other Nuxt-related tutorials.
- Ultimate Tutorial Other Tutorials

Storyblok and React

Helpful resources

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!

Integrate Storyblok in an existing project
1. Install the SDK

In your terminal, run the following command:

        
      npm i @storyblok/react

2. Configure the SDK

In index.js, load the integration, provide the access token of your Storyblok space, and register the default set of components.

index.js

        
      import { storyblokInit, apiPlugin } from '@storyblok/react'
import Page from './components/Page'
import Grid from './components/Grid'
import Feature from './components/Feature'
import Teaser from './components/Teaser'
 
storyblokInit({
  accessToken: 'YOUR_PREVIEW_TOKEN',
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid,
  },
})

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.

App.jsx

        
      import { useStoryblok, StoryblokComponent } from '@storyblok/react'

function App() {
  let slug =
    window.location.pathname === '/'
      ? 'home'
      : window.location.pathname.replace('/', '')

  const story = useStoryblok(slug, { version: 'draft' })
  if (!story || !story.content) {
    return <div>Loading...</div>
  }

  return <StoryblokComponent blok={story.content} />
}
export default App

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

components/Page.js

        
      import { StoryblokComponent, storyblokEditable } from "@storyblok/react";
 
const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body
      ? blok.body.map((blok) => (
          <StoryblokComponent blok={blok} key={blok._uid} />
        ))
      : null}
  </main>
);
 
export default Page;

Next Steps

Follow our in-depth tutorial and learn more about Storyblok and React. Alternatively, check out our other React-related tutorials.
In-depth Tutorial Other Tutorials

Storyblok and Vue

Helpful resources

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!

Integrate Storyblok in an existing project
1. Install the SDK

In your terminal, run the following command:

        
      npm i @storyblok/vue

2. Configure the SDK

In src/main.js, load the integration, provide the access token of your Storyblok space, and register the default set of components.

src/main.js

        
      import { createApp } from 'vue'
import { StoryblokVue, apiPlugin } from '@storyblok/vue'
import App from './App.vue'
import Grid from './components/Grid.vue'
import Page from './components/Page.vue'
import Teaser from './components/Teaser.vue'
import Feature from './components/Feature.vue'
 
const app = createApp(App)
 
app.use(StoryblokVue, {
  accessToken: '9I0NMaGJZQaJQ4Qzmm5cHwtt',
  use: [apiPlugin],
})
 
app.component('Grid', Grid)
app.component('Page', Page)
app.component('Teaser', Teaser)
app.component('Feature', Feature)
 
app.mount('#app')

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.

src/pages/Home.vue

        
      <script setup>
import { useStoryblok } from '@storyblok/vue';
const story = await useStoryblok('home', { version: 'draft' });
</script>
 
<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

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 the v-editable directive.

src/components/Page.vue

        
      <script setup>
defineProps({ blok: Object })
</script>
 
<template>
  <div v-editable="blok" class="px-6">
    <StoryblokComponent
      v-for="inblok in blok.body"
      :blok="inblok"
      :key="inblok._uid"
    />
  </div>
</template>

Next Steps

Follow our in-depth tutorial and learn more about Storyblok and Vue. Alternatively, check out our other Vue-related tutorials.
In-depth Tutorial Other Tutorials

Storyblok and Astro

Helpful resources

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!
- Integrate Storyblok in an existing project
- 1. Install the SDK
  
  In your terminal, run the following command:
- ```
        
      npm i @storyblok/astro
    
```
- 2. Configure the SDK
  
  In astro.config.mjs, load the integration, provide the access token of your Storyblok space, and register the default set of components.
- astro.config.mjs
```
        
      import { defineConfig } from 'astro/config'
import storyblok from '@storyblok/astro'

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: '<your-access-token>',
      components: {
        page: 'storyblok/Page',
        feature: 'storyblok/Feature',
        grid: 'storyblok/Grid',
        teaser: 'storyblok/Teaser',
      },
    }),
  ],
})
    
```
- 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.
- src/pages/index.astro
```
        
      ---
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories/home", {
  version: "draft",
});

const story = data.story;
---

<StoryblokComponent blok="{story.content}" />
    
```
- 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 on storyblokEditable.
- src/storyblok/page.astro
```
        
      ---
  import { storyblokEditable } from '@storyblok/astro';
  import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';

  const { blok } = Astro.props
---

<main {...storyblokEditable(blok)}>
  {blok.body?.map(blok => {return <StoryblokComponent blok={blok} />})}
</main>
    
```
- Next Steps
  
  Follow our Ultimate Tutorial and learn how to build a complete website using Storyblok and Astro. Alternatively, check out our other Astro-related tutorials.
- Ultimate Tutorial Other Tutorials

Storyblok and SvelteKit

Helpful resources

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!

Integrate Storyblok in an existing project
1. Install the SDK

In your terminal, run the following command:

        
      npm i @storyblok/svelte

2. Configure the SDK

In main.js, load the integration, provide the access token of your Storyblok space, and register the default set of components.

main.js

        
      import App from './App.svelte'
import { storyblokInit, apiPlugin } from '@storyblok/svelte'

storyblokInit({
  accessToken: '<your-access-token>',
  use: [apiPlugin],
  components: {
    page: Page,
    feature: Feature,
    grid: Grid,
    teaser: Teaser,
  },
})

3. Fetching a Story
In src/routes/+page.js, fetch the home story of your Storyblok space. The Storyblok Bridge is enabled in src/routes/+page.svelte. StoryblokComponent resolves and renders all of your Storyblok components.

src/routes/+page.js

        
      /** @type {import('./$types').PageLoad} */
export async function load({ parent }) {
  const { storyblokApi } = await parent()

  const dataStory = await storyblokApi.get('cdn/stories/home', {
    version: 'draft',
  })

  return {
    story: dataStory.data.story,
  }
}

src/routes/+page.svelte

        
      <script>
  import { onMount } from "svelte";
  import { useStoryblokBridge, StoryblokComponent } from "@storyblok/svelte";

  export let data;

  onMount(() => {
    if (data.story) {
      useStoryblokBridge(data.story.id, (newStory) => (data.story = newStory));
    }
  });
</script>

<div>
  {#if data.story}
  <StoryblokComponent blok={data.story.content} />
  {/if}
</div>

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 on storyblokEditable.

src/components/Page.svelte

        
      <script>
  import { storyblokEditable, StoryblokComponent } from "@storyblok/svelte";
 
  export let blok;
</script>
 
{#key blok}
  <div use:storyblokEditable={blok} class="px-6">
    {#each blok.body as blok}
      <StoryblokComponent {blok} />
    {/each}
  </div>
{/key}

Next Steps

Follow our Ultimate Tutorial and learn how to build a complete website using Storyblok and SvelteKit. Alternatively, check out our other SvelteKit-related tutorials.
Ultimate Tutorial Other Tutorials

Storyblok and Remix

Helpful resources

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!

Integrate Storyblok in an existing project
1. Install the SDK

In your terminal, run the following command:

        
      npm i @storyblok/react

2. Configure the SDK

In app/root.jsx, load the integration, provide the access token of your Storyblok space, and register the default set of components.

app/root.jsx

        
      import { storyblokInit, apiPlugin } from "@storyblok/react";
import Feature from "./components/Feature";
import Grid from "./components/Grid";
import Page from "./components/Page";
import Teaser from "./components/Teaser";
 
const components = {
  feature: Feature,
  grid: Grid,
  teaser: Teaser,
  page: Page,
};
storyblokInit({
  accessToken: "your-preview-token",
  use: [apiPlugin],
  components,
});

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.

app/routes/$slug.jsx

        
      import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
 
import {
  getStoryblokApi,
  useStoryblokState,
  StoryblokComponent,
} from "@storyblok/react";
 
export const loader = async ({ params }) => {
  const slug = params.slug ?? "home";
 
  let sbParams = {
    version: "draft",
  };
 
  let { data } = await getStoryblokApi().get(`cdn/stories/${slug}`, sbParams);
 
  return json(data?.story);
};
 
export default function Page() {
  let story = useLoaderData();
 
  story = useStoryblokState(story);
 
  return <StoryblokComponent blok={story.content} />;
}

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 on storyblokEditable.

app/components/Page.jsx

        
      import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
 
const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)} key={blok._uid}>
    {blok.body.map((nestedBlok) => (
      <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
    ))}
  </main>
);
 
export default Page;

Next Steps

Follow our ultimate tutorial and learn more about Storyblok and Remix. Alternatively, check out our other Remix-related tutorials.
Ultimate Tutorial Other Tutorials

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.

Choose your technology

Useful Resources

Learning Hub

Explore our Storyblok Learning Hub, providing you with an overview of our developer guides, tutorials, API documentation, FAQs, and more.

Join the Storyblok Community

Find out where the Storyblok community is hanging out - our Discord, wonderful Ambassadors, Event, Github, and more.

Kickstart a new CMS project with your favorite technology

Storyblok and Next.js

Get started with Next.js 13

Next.js Technology Hub

Storyblok Discord

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing Next.js 12 project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and Nuxt

Nuxt Technology Hub

Storyblok Discord

Official SDK

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and React

React Technology Hub

Storyblok Discord

Official SDK

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and Vue

Vue Technology Hub

Storyblok Discord

Official SDK

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and Astro

Astro Technology Hub

Storyblok Discord

Official SDK

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and PHP

PHP Technology Hub

Storyblok Discord

Content Delivery API client

Symfony Bundle

Management API client

Learning Hub

Integrate Storyblok in a PHP project

Set up StoryblokClient

Retrieve a story

Explore more

Are you a Symfony user?

Easily Manage Storyblok Content Programmatically

Storyblok and SvelteKit

SvelteKit Technology Hub

Storyblok Discord

Official SDK

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

1. Install the SDK

2. Configure the SDK

Next Steps

Storyblok and Remix

Remix Technology Hub

Storyblok Discord

Learning Hub

Kickstart a new project

Integrate Storyblok in an existing project

Kickstart a new CMS project
with your favorite technology

Set up `StoryblokClient`