Kickstart a new CMS project
with your favorite technology

Kickstart a project from your terminal

• 1. Create a free account

• 1. Install the SDK

• Copy to clipboard

  npm install -g storyblok

• 2. Create your space

• Copy to clipboard

  storyblok create

• 3. Recommended: start from a Blueprint

  Blueprints streamline the process of deploying to Vercel or Netlify and connecting your project to the Visual Editor.
  
  Watch the Blueprints overview or read the documentation

• 4. Choose a plan for your space
  
  The Starter plan is always free with no time limit and no credit card required. Try the Growth plans for access more team seats and enhanced features with a no-commitment 14-day free trial.

• Ultimate Tutorial (opens in a new window)Other Tutorials (opens in a new window)

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  <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 Copy to clipboard

  <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 (opens in a new window)Other Tutorials (opens in a new window)

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  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 (opens in a new window)Other Tutorials (opens in a new window)

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  <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 Copy to clipboard

  <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 (opens in a new window)Other Tutorials (opens in a new window)

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  ---
  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 Copy to clipboard

  ---
    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 (opens in a new window)Other Tutorials (opens in a new window)

Integrate Storyblok in a PHP project

To start using PHP with our Content Delivery API, install the Storyblok PHP Client via Composer:

• composer require storyblok/php-content-api-client

• Set up StoryblokClient

• Copy to clipboard

  use Storyblok\Api\StoryblokClient;
  $accesstoken = '***********'; // Storyblok access token
  $client = new StoryblokClient(
      token: $accesstoken;
  );

• Retrieve a story

• Copy to clipboard

  use Storyblok\Api\StoriesApi;
  use Storyblok\Api\StoryblokClient;
  use Storyblok\Api\Domain\Value\Dto\Version;
  use Storyblok\Api\Request\StoryRequest;
  
  $accesstoken = '***********'; // Storyblok access token
  $client = new StoryblokClient(
      baseUri: 'https://api.storyblok.com',
      token: $accesstoken
  );
  
  $storiesApi = new StoriesApi($client);
  $slug = 'home';
  $response = $storiesApi->bySlug($slug, new StoryRequest(
      version: Version::Draft, // Specify draft version
  ));
  
  print_r($response->story);

• Explore more

  The Storyblok PHP Client allows you to do more with Storyblok's Content Delivery API:

  • Retrieve translated content
  • Filter stories
  • Retrieve links (for sitemaps, for example)
  • Retrieve datasources

• Are you a Symfony user?

  If you’re building a web or CLI application with Symfony, consider installing the Symfony bundle. This bundle leverages the storyblok/php-content-api-client, configuring the Storyblok client while providing a Symfony Profiler extension for easier debugging and monitoring of Storyblok API interactions and supporting webhook integrations.

• Easily Manage Storyblok Content Programmatically

  To handle Storyblok content programmatically, you can use the Storyblok Management API client.

  For example, uploading an image to the Storyblok Assets Library has never been easier! After installing the library via Composer, you can quickly integrate and start using it in your project.

• Copy to clipboard

  composer require storyblok/php-management-api-client:dev-main

• You can initialize the Management Client as follows:

• Copy to clipboard

  use Storyblok\ManagementApi\ManagementApiClient;
  
  
  $client = new ManagementApiClient($storyblokPersonalAccessToken);

• Once initialized, you can use the AssetApi class to upload an asset:

• Copy to clipboard

  use Storyblok\ManagementApi\Endpoints\AssetApi;
  
  $spaceId = 'spaceid';
  $assetApi = new AssetApi($client, $spaceId);
  $assetCreated = $assetApi->upload('image.png')->data();

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  /** @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 Copy to clipboard

  <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 Copy to clipboard

  <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 (opens in a new window)Other Tutorials (opens in a new window)

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!

• npx @storyblok/create-demo@latest

• Integrate Storyblok in an existing project

• 1. Install the SDK

  In your terminal, run the following command:

• Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  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 Copy to clipboard

  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 (opens in a new window)Other Tutorials (opens in a new window)