Images

Holocron processes images at build time to prevent layout shifts and generate placeholders.

Markdown images

Use standard Markdown image syntax:

1![Alt text](/images/screenshot.png)

Place image files in your public/ directory and reference them with absolute paths. Public images keep their original URL.

HTML img tags

You can also use <img> tags:

1<img src="/images/diagram.png" alt="Architecture diagram" />

Holocron's remark plugin converts <img> tags to its internal image component with dimensions when it can read the image metadata.

Build-time processing

For local images outside public/, Holocron:

Reads dimensions from the file so the rendered <img> has explicit width and height, preventing layout shift.
Generates placeholders for a smooth loading experience.
Copies images to a generated Holocron image directory during build for consistent serving.

Images already in public/ are served from their public path and are not copied again.

Remote images

Remote image URLs (https://...) are supported. Remote URLs in JSX <img> tags can be fetched for metadata at build time. Markdown remote images still render, but they do not get build-time dimensions or placeholders.

1<img src="https://example.com/photo.jpg" alt="Remote photo" />

Frames

Wrap images in a <Frame> component for a styled border and optional caption:

123<Frame caption="Dashboard overview">
  ![Dashboard](/images/dashboard.png)
</Frame>

See Frames for more options.

Ask AI about this page