Preview bridge
Add source mapping, visual selection, and unsaved document updates.
The Preview bridge connects an embedded frontend to Jetrepo’s Admin UI. It carries view state and source selection; the Admin UI remains responsible for authorization, validation, mutation, and audit.
Embed requirements
Allow framing from the exact Admin origin with CSP frame-ancestors, and do not set an incompatible X-Frame-Options. Use protocol jetrepo.preview major version 1 and the exact parent origin.
Message reference
| Direction | Messages |
|---|---|
| Frontend → Admin | READY, NAVIGATED, SOURCE_HOVERED, SOURCE_SELECTED, DOCUMENT_APPLIED, REFRESH_APPLIED, ERROR, PREVIEW_UNAVAILABLE |
| Admin → frontend | INIT, REFRESH, DOCUMENT, SELECT_SOURCE, NAVIGATE, DISPOSE |
Both sides validate exact origin, window source, session ID, message schema, and protocol major. Unknown same-major capabilities are dropped; incompatible majors are reported.
Start the client
After obtaining the supported bridge library through your Jetrepo distribution, configure the client and retain its cleanup callback:
const client = createPreviewClient({
sessionId: 'SESSION_ID',
parentOrigin: 'https://admin.example.com',
packageVersion: 'YOUR_PACKAGE_VERSION',
capabilities: [
'navigation',
'persistedRefresh',
'unsavedDocuments',
'sourceMapping',
'visualSelection',
'diagnostics',
],
onDocument(document) {
renderPreview(document);
},
onNavigate(url) {
router.navigate(url);
},
});
const stop = client.start();
// Call stop() when the preview route unmounts.Do not guess a package name or install command; use the library artifact supplied for your deployment.
Unsaved state and source mapping
Ignore stale DOCUMENT sequences. Acknowledge applied documents and persisted refreshes using their exact sequence and version fields.
Source descriptors identify the Backend, entity, Data Type, locale, field/Component path, persisted version, and unsaved sequence. Add preview-only source markers only while the bridge is active, and make selectable regions keyboard accessible.
The bridge grants no access. Session authorization controls data, and canEdit reflects content.update; Failed Release preview always disables editing.
Navigation cannot leave the configured target origin. Malformed messages are ignored, and diagnostics must not contain content secrets.