Preview

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:

<h1 data-rigel-text="title">Saved title</h1>
<div data-rigel-richtext="$body">Rendered article body</div>
<img data-rigel-image="image" data-rigel-alt="alt" src="/images/cover.jpg" alt="Saved description">
<a data-rigel-href="href">Read more</a>

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:

<div data-rigel-each="sections" data-rigel-doc="page:about">
  <template data-rigel-item-template="hero">
    <section data-rigel-doc="page:about" data-rigel-section="hero" data-rigel-key="__item__">
      <h1 data-rigel-doc="page:about" data-rigel-text="sections.__item__.heading"></h1>
    </section>
  </template>
</div>

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 <picture> 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.