Create Storyblok Demo

A CLI to quickly start a project with your favourite framework, already set up with Storyblok, Headless CMS.

Supports Next.js, Nuxt.js (2 & 3), Gatsby.js, Vue.js, React.js, Remix and Svelte

1. Signup at https://app.storyblok.com/
2. Create a new space and retrieve the space preview token under Space -> Settings -> Api Keys
3. Execute follwing command with the space preview access token:

npx @storyblok/create-demo@latest

cd my-app
npm i && npm run dev

4. Open the Storyblok editor and directly edit your content locally: http://localhost:3000/editor.html

The CLI has different options that can be filled, you can see all the options by running npx @storyblok/create-demo --help:

OPTIONS
  -d, --folder=folder                  Folder path for the demo (e.g. my-demo)
  -f, --framework=framework            Framework to use (e.g. remix)
  -h, --help                           show CLI help
  -k, --key=key                        Storyblok Access Token
  -l, --localmode                      using the local mode
  -p, --packagemanager=packagemanager  Package manager to use (yarn or npm)
  -r, --region=region                  Space region (e.g. us-east-1)
  -v, --version                        show CLI version

By using this you can skip the "questions" of the CLI and fill it with your options directly like so:

npx @storyblok/create-demo@latest --key YOUR_STORYBLOK_PREVIEW_TOKEN --region us-east-1

If you want to contribute you can run the CLI locally and test it with this command:

npm i
./bin/run --key YOUR_STORYBLOK_PREVIEW_TOKEN

The framework options can be set in src/frameworks.js and work in combination with the getting-started repository

• name: name of the framework
• value: cli value to use for reference
• start: local command to start the example
• token: space token used in the demo repository
• config: file that has the access token
• bridge: file that is loading the bridge
• public: public folder path for the static files
• port: port the framework starts,
• branch: (optional) for testing other branches on the getting-started repository
• https: (optional) if the framework starts with https
• submodules: (optional) if the framework in getting-started is a submodule
• tutorialLink: (optional) - link to the framwork tutorial