Integrate Angular with Storyblok as a headless CMS.

This blueprint is ideal for kickstarting new Storyblok and Angular projects. What's inside:

• Pre-configured default blocks: page, teaser, grid, and feature.
• Support for the Visual Editor's live preview.
• Dynamic routing to fetch and render new stories automatically.
• Minimal styling.

No Storyblok account yet? Sign up now to experience a 14-day free trial of all features and enjoy our completely free Starter plan.

1. Create a new empty Storyblok space
2. Create a new repository based on this template
3. Open the project on your device
4. Install dependencies

npm install

Open src/environments/environment.ts and set the access token of your space:

export const environment = {
  production: true,
  accessToken: '<REPLACE_WITH_YOUR_TOKEN>',
  region: 'eu' as const
};

Do the same in src/environments/environment.development.ts, which Angular swaps in automatically during development builds:

export const environment = {
  production: false,
  accessToken: '<REPLACE_WITH_YOUR_TOKEN>',
  region: 'eu' as const
};

To render a preview of the local project in the Visual Editor, follow these steps:

1. In your space, navigate to Settings > Visual Editor.
2. Set the default environment to https://localhost:4200/.
3. Save.
4. Open the home story.
5. Click Config.
6. Type / in the Real path.

Run the development server:

npm start

Back in Storyblok, open the Home story to start editing.

Happy building!

• To learn more about what you can do with Storyblok, visit our documentation and learning hub.
• To learn more about the integration between Storyblok and Angular, check our dedicated developer tutorials.
• To learn more about Angular, check the official documentation.

• Have questions, need help, want to chat with other users? Join our Discord community.
• Visit the Storyblok Help Center.