Your application can display a resource in a panel, onboarding surface, article view, or help drawer. Fetch the resource through a content snapshot, then mount its HTML in a container you own.
Available since 0.1.0-alpha.13.
Mount the result
import { mountContent, openManifestContentSource } from '@shoalrun/cli/content';
const snapshot = await openManifestContentSource({
manifestUrl: '/content/revisions/r1/manifest.json',
});
const result = await snapshot.get(
{ kind: 'section', documentId: 'guide.billing', sectionId: 'refunds' },
{ format: 'html' },
);
const container = document.querySelector('#content-panel');
if (!container) throw new Error('Missing content panel');
const mounted = mountContent(container, result);
Mounting assigns a unique prefix to IDs and rewrites local fragments, footnote references, and supported ID-reference attributes. This allows separate instances of the same resource without duplicating those DOM IDs. An explicit instanceId must be unique where the content is mounted.
Own the interface
Apply your application's CSS to passive elements. The mount helper does not install the documentation theme or recreate interactive components. Preserve headings, link labels, image alternatives, and other semantic content when styling.
Your app owns loading and failure states, navigation history, focus management, close controls, keyboard behavior, and announcements when content changes. Preserve heading levels from the content; arrange the surrounding page so those levels make sense.
The helper inserts trusted compiler output. It is not a sanitizer for arbitrary HTML from users or unknown publishers.
Route links and clean up
mounted.links records each exported link's kind and target. Resource links include a typed ref; canonical and external links have ordinary URLs. Intercept a resource link only when the app can open that target and preserve its fragment or query. Other links should retain their normal destination.
Use the returned mounted.anchors for instance-specific fragment targets. Do not guess DOM IDs from headings. When the view closes, call mounted.unmount() and dispose the snapshot when it is no longer shared by another view.
HTML, Markdown, and agents
HTML fragments retain static content but omit component browser enhancements. The application supplies the interface around them. Markdown consumers receive the readable representation without mount IDs or application controls. Agents should use resource references and manifest links rather than inspect a rendered drawer to find the original content.