---
title: "Preview"
url: "https://rigelcms.dev/docs/preview"
description: "Prepare editable HTML and separate the editor canvas from draft and live website links."
---
Rigel updates prepared HTML from the current in-memory draft. It does not need a Save or a website rebuild for each edit. The host still has to provide the HTML, CSS and `data-rigel-*` field bindings.
## RC1 route mappings
This configuration works with `1.0.0-rc.1`:
```
preview: {
liveUrl: "https://example.com/",
draftUrl: "https://drafts.example.com/",
documents: {
page: { url: "/{slug}/", index: "/" },
},
pages: {
about: "/about/",
},
collections: {
news: { url: "/news/{slug}/", new: "/preview/news/" },
},
}
```
`documents` maps schema type names. `index` maps the `home` document to `/`. `pages` maps existing copy-page slugs. `collections` maps collection names; `{slug}` becomes the content slug in the public route.
In RC1, collections use the prepared `new` route as their editor canvas, including after Save and when reopening saved articles. Build `/preview/news/` with the article layout and empty bound fields. It does not need a saved article file. Other content uses its mapped page route. Both real routes and prepared routes must exist on the selected host.
`liveUrl` supplies View live page links. `draftUrl` supplies the editor canvas and Preview on website destination. Omitting either base independently keeps that destination on the editor’s origin. Bases support HTTPS and optional path prefixes; HTTP is allowed only on loopback for development. Routes remain root-relative. RC1 does not allow routes inside `/rigel/` as preview mappings.
## Bind your HTML
Use paths into the current document’s data:
```
Saved title
Rendered article body
Read more
```
`data-rigel-richtext` also accepts a schema Markdown field path. `$body` is reserved for an article’s block body. Anchors without `data-rigel-doc` use the selected document’s draft. When a page combines documents, put the owning ID, such as `data-rigel-doc="page:about"`, directly on each bound element. RC1 does not inherit this attribute from a wrapper.
Structural preview supports keyed object and section arrays, not primitive lists such as tags. Paths use stable `_key` values rather than positions that change on reorder. Each item needs a string `_key`; section items also use `_type` to select a matching template. Prepare a template per section type for unsaved structural changes:
```
```
Render saved sections as direct children using their real `data-rigel-key` and `data-rigel-section`. The editor clones only the first element child of a matching template, substitutes each stable key and patches the bound fields, so give each template one root element. Ordinary keyed object rows use `data-rigel-item` rather than section markers; untyped objects match `data-rigel-item-template=""`. Keep public and prepared markup in shared Astro components so the two layouts agree.
For optional regions, use `data-rigel-if="fieldPath"` and an initial `hidden` attribute when empty. Include `[data-rigel-if][hidden] { display: none !important; }` in the host CSS. The condition uses JavaScript truthiness, so an empty array or object does not hide a region. Shared reference regions use `data-rigel-reference` and explicit descendant `data-rigel-doc` bindings to identify the referenced content.
## A separate draft host
A same-origin preview loads directly in a sandboxed iframe. For a cross-origin draft host, Rigel fetches public HTML without credentials and displays a sanitized snapshot. The response must be HTML, and its CORS header must allow the editor’s origin:
```
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Origin: https://example.com
```
Use the origin where `/rigel/` opens, not the preview host or a URL with a path. A fully public preview host can allow `*`. Use final URLs with the right trailing slash; redirected HTML is rejected. For collection canvas editing, the draft host needs the prepared `new` route. Individual article routes, including draft articles, must also exist if their Preview on website links are to work; missing article routes do not prevent the prepared collection canvas from working.
Allow the draft origin in the editor’s `connect-src` CSP directive if the site sets one. Styles, images and fonts must also be reachable and permitted by the applicable CSP and CORS rules. Unsaved draft values are patched locally, not sent to the draft host to render.
## Unreleased: independent editor templates
The `template` property on preview mappings was added after RC1 and is not part of the published `1.0.0-rc.1` API. Do not copy it into an RC1 configuration.
In unreleased source, `preview.collections.news.template`, `preview.documents.page.template` and object-valued `preview.pages.about.template` select static HTML on the editor’s own origin, independently of draft and live website URLs. This is a per-mapping property, not a top-level `preview.template` setting. Existing collection `new` mappings remain supported there. Use the RC1 example above until upgrading to a release that includes independent templates.
## Editing limits
The preview is inert: site scripts, hydration, forms and normal link navigation do not run. Keep `sandbox="allow-same-origin"` without `allow-scripts`; loosening it is not a fix for an interactive widget. A script-driven layout needs a different preview design.
Unbound regions keep the deployed content. A missing field in an available document clears its bound value; declare only paths your template actually uses. Image bindings update `img.src` and `alt`, not `srcset` or `` sources. The preview does not rerun Astro queries, collection listings or arbitrary component logic when a draft changes.
RC1 disables the canvas for a newly created page document until its first Save, even if a matching HTML route already exists. After saving, that mapped route must exist for the canvas to load. Collection articles can use the prepared `new` route before Save. Shared records use standalone forms, not page canvases. Article bodies default to Inline preview in RC1; Settings also offers Sidebar. Unsaved changes remain in memory until explicit Save.
Documentation
On this page