Blueprints

Storyblok Blueprints are the fastest and most efficient way to launch a new project with one of the supported frontend frameworks. Blueprints streamline the process of deploying to Vercel or Netlify and connecting the project to the Visual Editor.

Setup

In your Storyblok account, under My Spaces, click Add Space and choose Start from Blueprint.

1. 1

   Choose a Blueprint

   Select a blueprint to start your project.
2. 2

   Create a Space

   Provide a name for the new space.
3. 3

   Connect to GitHub and select a framework

   Authorize Storyblok to access your GitHub account. Choose the target GitHub account and allow Storyblok to create a repository.

   Choose a framework.

   A new repository will be generated using the selected blueprint.

   To clone the project locally, copy and run the provided git clone command.
4. 4

   Deploy your project

   Deploy the blueprint project to a hosting platform. Choose Vercel or Netlify.

   Authorize the selected platform to access your GitHub repository.

   Specify how the project should be named on the hosting platform.
5. 5

   Explore the Figma Plugin (optional)

   Optionally, connect Figma to sync your design system. Once configured, import Figma components as blocks into the Storyblok space.

   Learn more in the Figma Plugin documentation.
6. 6

   Select a Plan

   Either choose a premium plan now, or continue with the free starter plan.

Core Blueprint

The Core Blueprint is a minimal, framework-specific starter project that provides only the essential setup required to begin development. Using Storyblok's SDK ecosystem, it comes with preconfigured dynamic routing and visual editing, and a basic set of blocks. This blueprint is intended for developers seeking a clean, unopinionated foundation that can be fully customized to meet specific project requirements.

Currently, the following frameworks are supported:

• Astro (see GitHub template)
• Next.js (see GitHub template)
• Nuxt (see GitHub template)
• React (see GitHub template)
• Vue (see GitHub template)
• Eleventy (see GitHub template)

Business Blueprint

The Business Blueprint is a production-ready starter project tailored for companies and agencies. It features a polished layout, a set of preconfigured blocks, and includes essential pages such as Home, About, and Services.

Currently, the following frameworks are supported:

• Next.js (see GitHub template)
• Nuxt (see GitHub template)