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

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

Find out how Sydney FC increased Match Day Attendance by 228%, and increased Match Day Revenues by 370% with Storyblok
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!

Storyblok and Next.js

Helpful resources

    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.

    • 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 in-depth tutorial and learn more about Storyblok and Remix. Alternatively, check out our other Remix-related tutorials.

    • In-depth Tutorial Other Tutorials

Storyblok and Gatsby

Helpful resources

    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!

    • Integrate Storyblok in an existing project

    • 1. Install the SDK

      In your terminal, run the following command:

    •         
      npm i gatsby-source-storyblok

    • 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>',
      }
    }
  ],
}

    • 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

    • 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
    }
  }
`

    • 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;

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

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

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.
🍪 Cookie Notice

We use cookies to learn how you interact with our content, and show you relevant content and ads based on your browsing history. You can adjust your settings below. Here's our policy.

Manage your preferences