Integrate React with Storyblok

Use Storyblok to manage the content of your React application.

Quickstart

The fastest way to get started is using Storyblok’s Core Blueprint or CLI wizard:

Blueprint (UI)
CLI

Use Storyblok’s Core Blueprint to launch a React project, complete with a space, GitHub repository, and deployment environment.

Use Storyblok’s CLI to set up a new space and scaffold a React project. In the terminal, run:

storyblok create --template react

Manual setup

Alternatively, set up the project from scratch and configure your frontend code.

This guide has been tested with the following package versions:

react@19.2.4
react-dom@19.2.4
react-router@7.13.1
@storyblok/react@6.1.0
Node.js v24.7.0

No Storyblok account?Sign up and create a space for free

Create a new space

Log in to Storyblok, select + Add Space → New Space, and follow the steps.
Create a React project

Create a new React project following the official Vite guide.
Install @storyblok/react

In the terminal, cd into the project, and install the package.
Terminal window
```
npm install @storyblok/react
```

Next, in the root of your project, create a .env file with the access token from your space.

VITE_STORYBLOK_DELIVERY_API_TOKEN=fqc3tdIuC8djNwEYl5cE5Att

Initialize the Storyblok client by updating the main.jsx file:

import { storyblokInit, apiPlugin } from "@storyblok/react";

storyblokInit({
  accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
  use: [apiPlugin],
  apiOptions: {
    region: "eu", // Choose the correct region from your Space.
  },
});

The Storyblok integration makes features like fetching, components registration, and bridge available across your project.

Fetch a single story

In your App.jsx file, call the useStoryblok hook to fetch a story’s data.

import { StoryblokComponent, useStoryblok } from "@storyblok/react";

export default function App() {
  const story = useStoryblok("home", {
    version: "draft",
  });

  if (!story?.content) {
    return <div>Loading...</div>;
  }

  return <StoryblokComponent blok={story.content} />;
}

This page fetches the home story of your Storyblok space using the convenient useStoryblok composable.

The StoryblokComponent dynamically renders content type and nestable blocks. In this case, it looks for the content type block of the home story.

Create and register blocks

Create a src/storyblok/Page.jsx to render all stories of the page content type.

import { StoryblokComponent } from "@storyblok/react";

export default function Page({ blok }) {
  return (
    <main>
      {blok.body?.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </main>
  );
}

Using StoryblokComponent iterate through the body field and render the blocks in it.

Stories can have a body field that contains an array of custom type blocks, such as Feature, Teaser, and Grid.

Create the code for these components as follows.

export default function Feature({ blok }) {
  return (
    <div className="feature">
      <span>{blok.name}</span>
    </div>
  );
}

export default function Teaser({ blok }) {
  return (
    <div className="teaser">
      <h2>{blok.headline}</h2>
    </div>
  );
}

import { StoryblokComponent } from "@storyblok/react";

export default function Grid({ blok }) {
  return (
    <div className="grid">
      {blok.columns.map((nestedBlok) => (
        <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
      ))}
    </div>
  );
}

Similar to Page.jsx, Grid.jsx iterates over the columns block field.

Add all these new components to your app within the main.jsx file.

import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import './index.css';
import App from "./App"
import { storyblokInit, apiPlugin } from '@storyblok/react';

import Page from './storyblok/Page';
import Teaser from './storyblok/Teaser';
import Feature from './storyblok/Feature';
import Grid from './storyblok/Grid';

storyblokInit({
  accessToken: import.meta.env.VITE_STORYBLOK_ACCESS_TOKEN,
  use: [apiPlugin],
  components: {
    page: Page,
    teaser: Teaser,
    feature: Feature,
    grid: Grid,
  },
  apiOptions: {
    region: 'eu',
  },
});

const root = document.getElementById('root');

createRoot(root).render(
  <StrictMode>
    <App/>
  </StrictMode>
);