Beeswax

Compile .wax files (React/JSX source bundles) to PDF, PNG, and JPG.

A .wax file is a zip archive containing React components, assets, and a manifest. Beeswax handles the build tooling (esbuild), rendering (Playwright), and output generation (pdf-lib) so you just write standard React.

Install

npm install @agent-hive/beeswax

Then install the browser engine:

npx playwright install chromium

Quick Start

# Scaffold a new project
npx beeswax init my-doc
cd my-doc

# Compile to PDF
npx beeswax compile .

This creates a manifest.json and index.jsx with a single page, then compiles it to PDF.

The <Page> Component

Wrap each page of your document in a <Page> component. Everything inside is standard HTML/CSS rendered in a real browser.

import { Page } from '@agent-hive/beeswax';

export default function Document() {
  return (
    <>
      <Page name="cover">
        <div style={{
          width: '100%', height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white', fontFamily: 'system-ui, sans-serif',
        }}>
          <h1 style={{ fontSize: '72px' }}>Annual Report</h1>
        </div>
      </Page>
      <Page name="summary">
        <div style={{ padding: '60px', fontFamily: 'system-ui, sans-serif' }}>
          <h2>Executive Summary</h2>
          <p>Content here...</p>
        </div>
      </Page>
    </>
  );
}

Each <Page> becomes one page in the PDF or one image file for PNG/JPG output. The optional name prop controls output filenames for image formats.

Manifest

Every .wax project needs a manifest.json:

{
  "version": "1.0",
  "format": "jsx",
  "entry": "index.jsx",
  "output": {
    "type": "pdf",
    "dimensions": { "width": 1920, "height": 1080 }
  }
}

Common dimensions:

| Use case | Width | Height | |----------|-------|--------| | Presentation (16:9) | 1920 | 1080 | | Letter portrait | 816 | 1056 | | Letter landscape | 1056 | 816 | | A4 portrait | 794 | 1123 | | Social media square | 1080 | 1080 |

CLI

beeswax compile <dir|file.wax> [options]
  -o, --output <format>    pdf, png, or jpg (default: from manifest)
  -f, --filename <name>    Output base filename
  -d, --outdir <dir>       Output directory (default: cwd)

beeswax pack [dir] [-o output.wax]
  Pack a directory into a .wax archive

beeswax unpack <file.wax> [dir]
  Unpack a .wax archive

beeswax init [dir]
  Scaffold a new .wax project

beeswax setup-skill [agent-type]
  Install the beeswax skill for Claude Code

Library API

import { compile, pack, unpack, Page } from '@agent-hive/beeswax';

// Compile a directory or .wax file
const result = await compile('./my-doc', {
  output: 'pdf',        // 'pdf' | 'png' | 'jpg'
  filename: 'report',   // output base name
  outdir: './output',   // output directory
});
console.log(result.files);    // ['/path/to/report.pdf']
console.log(result.duration); // ms

// Pack/unpack .wax archives
await pack('./my-doc', 'report.wax');
await unpack('report.wax', './unpacked');

How It Works

.wax source directory
  → esbuild transpiles JSX (milliseconds)
  → Playwright loads compiled output in headless Chromium
  → Each <Page> is rendered at exact viewport dimensions
  → Pages are merged into a single PDF (pdf-lib) or saved as individual images
  → Thumbnail generated from first page

Assets

Put images, fonts, and other assets in your project directory and import them:

import logo from './assets/logo.png';

export default function Document() {
  return (
    <Page>
      <img src={logo} alt="Logo" />
    </Page>
  );
}

Supported asset types: .png, .jpg, .svg, .gif, .woff, .woff2, .ttf — all bundled as data URLs.

License

MIT