---
title: Visual Preview in Angular
description: Discover Storyblok's documentation with comprehensive developer guides, user manuals, API references, and examples to help you get the most out of the headless CMS platform.
url: https://storyblok.com/docs/guides/angular/visual-preview
---

# 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.

> [!WARNING]
> The preview area requires an `https` secure connection. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor).

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

```plaintext
{
  "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

```typescript
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

```typescript
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](https://www.storyblok.com/tp/create-preview-production-environments-and-deploy).

## Related resources

[Concept: Visual Editor](/docs/concepts/visual-editor)

[@storyblok/angular Package Reference](https://www.storyblok.com/docs/libraries/js/angular-sdk)

  

## Pagination

-   [Previous: Integrate Angular with Storyblok](/docs/guides/angular)
-   [Next: Dynamic Routing in Angular](/docs/guides/angular/dynamic-routing)