--- title: @storyblok/preview-bridge description: @storyblok/preview-bridge is Storyblok's official JavaScript bridge, enabling real-time preview in the Visual Editor. url: https://storyblok.com/docs/libraries/js/preview-bridge --- # @storyblok/preview-bridge `@storyblok/preview-bridge` enables real-time preview of an iframe-embedded website within the [Visual Editor](/docs/concepts/visual-editor). ## Requirements `StoryblokBridge` can only run in a browser environment. - **Modern web browser** (latest versions of Chrome, Firefox, Safari, Edge, etc.) ## Installation To add the package to a project, run this command in the terminal: ```bash npm install @storyblok/preview-bridge@latest ``` Access `StoryblokBridge` in the global scope, either directly or as a property of `window`: ```html ``` ## Usage Following is a minimal implementation of the `StoryblokBridge` class. This webpage loads within the editor’s iframe and logs the story’s unsaved state each time the input in the Visual Editor changes. ```html ```