Visual Preview in Angular

Enhance your editorial and development experience by connecting your local project with Storyblok’s visual editor.

Set the Default Environment

Go to Settings → Visual Editor and set the default environment to the URL of the local development server. Angular’s default is localhost:4200, for example.

Caution

The preview area requires an https secure connection. Learn more in the Visual Editor concept.

Angular CLI provides built-in HTTPS support. To enable HTTPS in development, use the --ssl flag. Update the start script in package.json to ng serve --ssl.

package.json

{
  "scripts": {
    "start": "ng serve --ssl"
  }
}

Restart the dev server if necessary.

To render the home story correctly in the Visual Editor, select the Config section and type / in the Real path field.

You may have to open the URL in a separate browser tab and accept the certificate first.

Enable live preview in the Visual Editor

To enable real-time visual editing in the Storyblok Visual Editor, add withLivePreview provider in app.config.ts file.

src/app/app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

 import { provideStoryblok, withStoryblokComponents, withLivePreview } from '@storyblok/angular';
 import { provideStoryblok, withStoryblokComponents } from '@storyblok/angular';
import { storyblokComponents } from './storyblok.components'

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { environment } from '../environments/environment'


export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes, withComponentInputBinding()), provideClientHydration(withEventReplay()),
     provideStoryblok(
      {
        accessToken: environment.accessToken,
        region: 'eu',
      },
      withStoryblokComponents(storyblokComponents),
      withLivePreview(),
    ),
  ]
};

Update the home.component.ts file to use LivePreviewService from Storyblok Angular package.

src/app/routes/home.component.ts

import { Component, ChangeDetectionStrategy, inject, signal, OnInit } from '@angular/core';
 import { StoryblokService, StoryblokComponent, type SbBlokData, LivePreviewService} from '@storyblok/angular';
 import { StoryblokService, StoryblokComponent, type SbBlokData} from '@storyblok/angular';

@Component({
  selector: 'app-home',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [StoryblokComponent],
  template: `
    <div>
      <sb-component [sbBlok]="storyContent()" />
    </div>
  `,
})
export class HomeComponent implements OnInit {
  private readonly storyblok = inject(StoryblokService);
  readonly storyContent = signal<SbBlokData | null>(null);
  private readonly livePreview = inject(LivePreviewService);

  async ngOnInit() {
    const client = this.storyblok.getClient();
    const { data } = await client.stories.get('home', {
      query: { version: 'draft' },
    });
    this.storyContent.set(data?.story?.content ?? null);

    // Enable live preview updates
    this.livePreview.listen((story) => {
      this.storyContent.set(story.content as SbBlokData);
   });
  }
}

LivePreviewService.listen() listens for content updates from the Storyblok Visual Editor and updates the content in real time.

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

Deploy the preview environment

Make sure to fetch the draft version of the content and use a preview access token. Deploy in client-side or server-side rendering mode so the application fetches updated content after changes are saved. Client-side rendering updates content after a page reload, while server-side rendering updates content on the next request.

For the production environment, fetch the published version of the content and use a public access token.

Note

Learn more about preview and production environments in this tutorial.

Related resources

Concept: Visual Editor

@storyblok/angular Package Reference