Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

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!

    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!

    • Section titled Integrate Storyblok in an existing Next.js 12 project Integrate Storyblok in an existing Next.js 12 project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/react
          
    • Section titled 2. Configure the SDK 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;
          
    • Section titled Next Steps 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.

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/nuxt
          
    • Section titled 2. Configure the SDK 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>
          
    • Section titled Next Steps 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.

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/react
          
    • Section titled 2. Configure the SDK 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;
          
    • Section titled Next Steps Next Steps

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

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/vue
          
    • Section titled 2. Configure the SDK 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>
          
    • Section titled Next Steps Next Steps

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

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/astro
          
    • Section titled 2. Configure the SDK 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>
          
    • Section titled Next Steps 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.

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/svelte
          
    • Section titled 2. Configure the SDK 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}
          
    • Section titled Next Steps 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.

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/react
          
    • Section titled 2. Configure the SDK 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;
          
    • Section titled Next Steps Next Steps

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

    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!

    • Section titled Integrate Storyblok in an existing project Integrate Storyblok in an existing project

    • Section titled 1. Install the SDK 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i gatsby-source-storyblok
          
    • Section titled 2. Configure the SDK 2. Configure the SDK

      In gatsby-config.js, load the integration and provide the access token of your Storyblok space.

    • gatsby-config.js
              
            module.exports = {
        flags: {
          PARTIAL_HYDRATION: true // Required for Partial Hydration (RSC)
        },
        plugins: [
          {
            resolve: 'gatsby-source-storyblok',
            options: {
              accessToken:'<your-access-token>',
            }
          }
        ],
      }
          
    • Section titled 3. Initialize Storyblok API 3. Initialize Storyblok API

      Use a global layout component to help initialize Storyblok API only once instead of several times.

    • src/components/layout.jsx
              
            "use client";
      import React from "react"
      import PropTypes from "prop-types"
      import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
      import Teaser from './Teaser'
      import Grid from './Grid'
      import Page from './Page'
      import Feature from './Feature'
      
      storyblokInit({
        accessToken: "your-access-token",
        use: [apiPlugin],
        components: {
          teaser: Teaser,
          grid: Grid,
          feature: Feature,
          page: Page
        }
      });
      
      const Layout = ({ children }) => {
        return (
          <div>
            <main>{children}</main>
          </div>
        )
      }
      
      Layout.propTypes = {
        children: PropTypes.node.isRequired,
      }
      
      export default Layout
          
    • Section titled 4. Fetching a Story 4. Fetching a Story

      In src/pages/index.js, fetch the home story of your Storyblok space. Use <StoryblokStory /> to get the new story every time it triggers a change event from the Visual Editor. You can use the StoryblokComponent inside the components to render the nested components dynamically.

    • src/pages/index.js
              
            
      import * as React from "react"
      import { graphql } from "gatsby"
      import { StoryblokStory } from "gatsby-source-storyblok"
      import Layout from "../components/layout"
      
      const IndexPage = ({ data }) => {
        if (typeof data.storyblokEntry.content === "string") data.storyblokEntry.content = JSON.parse(data.storyblokEntry.content);
        return (
          <Layout>
            <StoryblokStory story={data.storyblokEntry} />
          </Layout>
        )
      }
      export default IndexPage
      
      export const query = graphql`
        query HomeQuery {
          storyblokEntry(full_slug: { eq: "home" }) {
            content
            name
            full_slug
            id
          }
        }
      `
          
    • Section titled 5. Create Storyblok components 5. 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.

    • src/components/Page.tsx
              
            
      import React from "react";
      import { storyblokEditable, StoryblokComponent } from "gatsby-source-storyblok";
      
      const Page = ({ blok }) => {
        return (
          <main {...storyblokEditable(blok)}>
            {blok.body.map((nestedBlok) => (
              <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
            ))}
          </main>
        )
      };
      
      export default Page;
          
    • Section titled Next Steps Next Steps

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

Useful Resources