Guides · Reference · Contributing

[!WARNING]

The Optimization SDK Suite is pre-release (alpha). Breaking changes may be published at any time.

This library implements a "preview panel" compatible with the Contentful Optimization Web SDK. The preview panel is loaded into the DOM as a Web Component-based micro-frontend.

[!INFO]

The Contentful Optimization Web Preview Panel is built using the Lit framework for Web Component micro-frontends

• Getting Started
• Content Security Policy Support

Getting Started

Install using an NPM-compatible package manager, pnpm for example:

pnpm install @contentful/optimization-web-preview-panel

Import the preview-panel attach function; both CJS and ESM module systems are supported, ESM preferred:

import attachOptimizationPreviewPanel from '@contentful/optimization-web-preview-panel'

Initialize the preview panel with existing instances of the Contentful SDK and the Optimization Web SDK:

attachOptimizationPreviewPanel({ contentful: contentfulClient, optimization, nonce: undefined })

The attachOptimizationPreviewPanel function automatically attaches itself to the DOM and adds the toggle button with which the panel can be opened.

[!IMPORTANT]

The preview panel is intentionally tightly coupled to the Optimization Web SDK internals. It uses the symbol-keyed preview bridge provided by optimization.registerPreviewPanel(...) and state interceptors to read and mutate internal state for local preview overrides. This coupling is deliberate and required for preview behavior parity.

Content Security Policy Support

In order to comply with strict CSP policies, a nonce can be supplied to the attachOptimizationPreviewPanel function as its third argument.

attachOptimizationPreviewPanel({ contentful: contentfulClient, optimization, nonce })

Alternatively, the nonce can be added to the window before attaching the preview panel to the DOM.

window.litNonce = nonce
attachOptimizationPreviewPanel({ contentful: contentfulClient, optimization, nonce: undefined })