Data display

Preview frame

A sandboxed live preview of a rendered resume, scaled to fit.

import { PreviewFrame } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Rendered resume

preview-frame/resume.tsx

'use client';

import { PreviewFrame } from '@jsonresume/ui';

const html = `<!doctype html><html><body style="font-family: Georgia, serif; padding: 48px 56px; color: #202020">
<h1 style="text-align:center; font-weight:600; margin:0">Richard Hendriks</h1>
<p style="text-align:center; color:#4b4b4b">Programmer · richard@piedpiper.com</p>
<h2 style="font-size:18px; border-bottom:1px solid #b8b8b2; padding-bottom:4px">Experience</h2>
<p><strong>CEO</strong> · Pied Piper · 2013 – 2014</p>
<p>Built a middle-out compression algorithm.</p></body></html>`;

// In the registry, srcDoc is the rendered theme or src is the resume URL.
export default function PreviewFrameResume() {
  return (
    <PreviewFrame
      title="Resume preview, Pro theme"
      srcDoc={html}
      height={420}
    />
  );
}

Accessibility

The iframe has a title; scripts are off unless allowScripts is set.

Props

Also accepts the attributes of the element PreviewFrame renders.
Prop	Type	Default	Description
title required	string	–	Accessible name: "Resume preview, Pro theme".
allowScripts	boolean	false	Rendered themes don't need scripts; enable only for trusted content.
height	number	560	Visible height in px.
pageWidth	number	794	Page width the content is laid out at (A4 at 96dpi by default); it scales to fit.
src	string	–	A URL to load…
srcDoc	string	–	…or an HTML document to render.