> From the [Strife developer docs](https://strife.app/docs/reference/live-preview). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt). # Live preview Live Preview allows editors to instantly visualize changes on the live website as they edit content within Strife Studio. To enable live preview, import the Strife package to let Strife know that you are ready to receive updates from the Strife Studio. ### Use npm Live preview is available as the `@strifeapp/strife` package via npm. ```bash npm install @strifeapp/strife ``` Then import the Strife SDK Import in script file ```javascript import '@strifeapp/strife'; ``` Import in HTML ```html ``` ### Use CDN The Live Preview package is also available via CDN. ```html ``` > [!NOTE] > Once you have activated the live preview choose between using [Strife Web Components ](https://strife.app/docs/reference/live-preview/web-components.md)or building your own [custom live preview implementation](https://strife.app/docs/reference/live-preview/custom-live-preview-implementation.md) to receive and update content. ### Full-height preview (Chrome 154+) Strife Studio shows your page at its full height. By default the SDK measures the page and reports the height; in browsers that support [responsive iframes](https://developer.chrome.com/blog/responsive-iframes) (Chrome 154+) the browser sizes the preview frame from your page's own layout instead. That needs one line in your page's `` — it is ignored once `` has opened: ```html ``` `@strifeapp/astro`'s `` adds it for you in edit mode. You can narrow `allow-origins` to Strife Studio's origin. Without the tag, or in other browsers, the SDK's own measurement is used as before. ### Accessibility in the preview While a page is open in Strife Studio's live preview, `@strifeapp/astro`'s [``](../../../../src/sdk/js/src/packages/astro/README.md#telemetry-insights-) runs an [axe-core](https://github.com/dequelabs/axe-core) accessibility audit on it and the preview SDK hands the result to Studio. The preview toolbar then shows the number of failing rules; opening it lists every rule by impact (critical, serious, moderate, minor) with its explanation, a link to the guideline and the failing elements — hover one to see it outlined in the preview, and click one to open the field it renders (the SDK names each element by its `data-field` or the stega code in its text, the same answer the hover highlight uses). The audit runs at page load, again 1.5 s after your last edit, and on the panel's rerun button. The page never sends the audit anywhere itself: Studio stores the result of the page load and of the rerun button, per locale, for the content list's Accessibility filter. A site without `` reports nothing and Studio shows no button. Requires `@strifeapp/astro` 1.9.0 and `@strifeapp/strife` 1.16.0. ### Performance in the preview The preview SDK also measures what the page weighs, after it loads and again after each edit (once the new images have loaded). It needs nothing from the site. It checks the images and third-party embeds against a budget: total image weight, one heavy image, images loaded eagerly, images far larger than they are drawn, and embeds. The preview toolbar shows the page's level (Poor, Needs improvement or Great) in its own tool, with the findings split into **Your content** and **Template and code**. An image or embed counts as content when it renders a field (its `data-field`, or the stega code in its `alt` or text). Everything else is the template's. Only content findings set the level, so a heavy image in your layout never marks every page Poor. Checks only a developer can fix (missing `width`/`height`, JPEG or PNG instead of AVIF or WebP, page weight, number of requests) are always listed under Template and code. Sizes come from the browser's Resource Timing. A cross-origin image discloses its size only when its response carries `Timing-Allow-Origin`; without it the size is estimated from the image's pixels and format, and the panel marks it ≈. Requires `@strifeapp/strife` 1.17.0. ### Troubleshooting **Live preview doesn't load when running my site locally.** When Strife Studio (a public HTTPS site) loads your local dev server (`http://localhost:...`) inside its preview panel, your browser's local-network-access protection kicks in — this is standard browser security, unrelated to Strife, and not a mixed-content (HTTPS/HTTP) issue (`localhost` over plain HTTP has long been exempt from that). The prompt looks different per browser: * **Safari** shows a dialog asking to allow the Studio domain to access your "loopback network." * **Chrome** doesn't prompt at all — instead, click the site info icon (the padlock) next to the address bar while on Strife Studio and enable **Apps on device**. If live preview silently doesn't work and no permission dialog ever appeared, this is the most likely cause — check your browser's site permissions directly rather than waiting for a prompt.