Edge PDF — Documentation

Quick Start

Browser SDK

Import the SDK, call renderPdfFromXml(xml), and receive browser-rendered PDF bytes as a Uint8Array. The Worker parses XML; WebAssembly renders the PDF in the browser.

<script type="module">
  import EdgePdf from "https://edge-pdf.arodos.com/sdk.js";

  const xml = `
  <document title="Hello PDF">
    <page size="A4">
      <view style="padding: 48; flexDirection: column;">
        <text style="fontSize: 24; fontWeight: 700; color: #111827;">Hello PDF</text>
        <text style="fontSize: 10; color: #4b5563; marginTop: 8;">Parsed by the Worker, rendered in the browser.</text>
      </view>
    </page>
  </document>
  `;

  const pdfBytes = await EdgePdf.renderPdfFromXml(xml);
  const blob = new Blob([pdfBytes], { type: "application/pdf" });
  window.open(URL.createObjectURL(blob), "_blank", "noopener");
</script>

Parse API

Post base64-encoded XML to POST /api/parse. It returns renderer JSON for the browser WASM renderer.

const response = await fetch("https://edge-pdf.arodos.com/api/parse", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "document.pdf", xmlbase64: btoa(xml) })
});
const { document, contentType, filename } = await response.json();

Try it in the Playground →

Supported Tags

document page view text qrcode svg canvas table row cell barchart linechart piechart areachart dotplot

<document>

Root element. Sets defaults for all pages and provides PDF title metadata.

Attribute	Values	Description
title	string	PDF document title (metadata).
size	A3 · A4 · A5 · Letter · Legal · Tabloid · [w,h]	Default page size for pages that omit it.
width	number	Default custom page width in PDF points.
height	number	Default custom page height in PDF points.
orientation	portrait · landscape	Default page orientation.
margin	number · "v h" · "t r b l" · [t,r,b,l]	Default page margin in points.
wrap	true · false	Default text wrapping behavior.

<document title="Invoice INV-2026-001" size="A4" margin="40">
  <page>
    <view style="padding: 40;">
      <text>Invoice content…</text>
    </view>
  </page>
</document>

<page>

Defines a PDF page. All attributes are optional and override document-level defaults.

Attribute	Values	Description
size	A3 · A4 · A5 · Letter · Legal · Tabloid · [w,h]	Page size. Preset name or [width, height] in points.
width	number	Custom page width in PDF points.
height	number	Custom page height in PDF points.
orientation	portrait · landscape	Page orientation.
margin	number · "v h" · "t r b l" · [t,r,b,l]	Page margin in points.
wrap	true · false	Text wrapping behavior.

<page size="A4">…</page>
<page size="A4" orientation="landscape">…</page>
<page size="[300,500]">…</page>
<page width="300" height="500">…</page>

Margin shorthand

Margins follow CSS shorthand — one value (all sides), two (vertical horizontal), three (top horizontal bottom), four (top right bottom left).

<page margin="48">           <!-- all sides -->
<page margin="24 48">       <!-- vertical horizontal -->
<page margin="20 30 40 50"> <!-- top right bottom left -->
<page margin="[20,30,40,50]"> <!-- array form -->

<view>

Layout container. Acts as a flex row or column for panels, sections, and spacing groups. Self-closing is supported.

<view style="flexDirection: row; justifyContent: space-between; marginBottom: 24;">
  <text>Left</text>
  <text>Right</text>
</view>

<text>

Text content. Provide inner text or use the content attribute. Self-closing is supported.

Attribute	Values	Description
content	string	Text content as attribute (alternative to inner text).

<text style="fontSize: 24; fontWeight: 700;">Invoice</text>
<text content="Invoice INV-2026-001" style="fontSize: 10; color: #6b7280;" />

<qrcode>

QR code from a string payload. Self-closing.

Attribute	Values	Description
value	string	QR payload (alias: data).
data	string	QR payload (alias: value).
size	number	QR size in points. Falls back to style width, style height, or 80.

<qrcode style="width: 72; height: 72;" value="https://arodos.com/pay/INV-2026-001" />

<svg>

Renders inline SVG graphics. Use nested SVG markup directly, provide full escaped SVG via content, or use shorthand with viewBox, fill, and path.

Nested SVG supports rect, circle, ellipse, line, polyline, polygon, and path. Use <g> for grouping. Paint attributes such as fill, stroke, stroke-width, opacity, fill-opacity, and stroke-opacity are preserved, with inherited paint attributes propagated through groups.

Attribute	Values	Description
content	string	Escaped full SVG markup. Optional when using nested SVG children.
viewBox	string	SVG view box for shorthand icons.
fill	string	Path fill color.
path	string	SVG path data.
width	number	Icon width.
height	number	Icon height.

<svg style="width: 12; height: 12; marginRight: 6;" viewBox="0 0 24 24" fill="#10b981" path="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6Z" />

<svg width="200" height="100" viewBox="0 0 200 100">
  <g opacity="0.5" fill-opacity="0.9" stroke="#111827" stroke-width="3">
    <rect x="10" y="10" width="80" height="80" fill="#3b82f6" />
    <circle cx="150" cy="50" r="40" fill="#ef4444" />
    <ellipse cx="100" cy="50" rx="24" ry="12" fill="#10b981" />
    <line x1="20" y1="90" x2="180" y2="90" stroke-opacity="0.6" />
    <polyline points="20,70 55,45 90,70" fill="none" />
    <polygon points="150,25 175,75 125,75" fill="#f59e0b" />
  </g>
</svg>

<canvas>

Vector drawing via a JSON array of operations. Use for badges, separators, and custom shapes. Self-closing.

Attribute	Values	Description
width	number	Canvas width in points.
height	number	Canvas height in points.
operations	JSON array	Array of canvas draw commands (see below).

Supported canvas commands

SetFillColor SetStrokeColor SetLineWidth MoveTo LineTo Rect Circle Ellipse Arc Fill Stroke FillAndStroke ClosePath Save Restore

<canvas style="width: 42; height: 20;"
  operations='[
    {"cmd":"SetFillColor","color":"#10b981"},
    {"cmd":"Rect","x":0,"y":0,"width":42,"height":20},
    {"cmd":"Fill"},
    {"cmd":"SetFillColor","color":"#ffffff"},
    {"cmd":"Circle","cx":14,"cy":10,"r":5},
    {"cmd":"Fill"},
    {"cmd":"SetStrokeColor","color":"#ffffff"},
    {"cmd":"SetLineWidth","width":2},
    {"cmd":"MoveTo","x":24,"y":7},
    {"cmd":"LineTo","x":34,"y":7},
    {"cmd":"MoveTo","x":24,"y":13},
    {"cmd":"LineTo","x":34,"y":13},
    {"cmd":"Stroke"}
  ]' />

Color commands accept r, g, b as 0–255 numbers (0–1 also accepted and scaled), or color as a hex string.

<table>

Renders tabular content. Define columns with width rules, then add rows and cells.

Attribute	Values	Description
columns	JSON array	Column definitions with `width` using fraction, fixed, or auto.

Column width forms

{ "width": { "fraction": 0.5 } }  // fraction of available space
{ "width": { "fixed": 120 } }      // fixed width in points
{ "width": { "auto": true } }       // auto-sized

<table columns='[{"width":{"fraction":0.52}},{"width":{"fraction":0.16}},{"width":{"fraction":0.16}},{"width":{"fraction":0.16}}]'>
  <row header="true" style="backgroundColor: #1e293b;">
    <cell style="padding: 8;"><text style="color: #ffffff; fontWeight: 700;">Item</text></cell>
    <cell style="padding: 8;"><text style="color: #ffffff; fontWeight: 700;">Qty</text></cell>
    <cell style="padding: 8;"><text style="color: #ffffff; fontWeight: 700;">Price</text></cell>
    <cell style="padding: 8;"><text style="color: #ffffff; fontWeight: 700;">Total</text></cell>
  </row>
  <row>
    <cell style="padding: 8;"><text>Widget</text></cell>
    <cell style="padding: 8;"><text>5</text></cell>
    <cell style="padding: 8;"><text>$10.00</text></cell>
    <cell style="padding: 8;"><text>$50.00</text></cell>
  </row>
</table>

<row>

Defines a table row. Mark as a header with header="true".

Attribute	Values	Description
header	true · false	Marks the row as a header row.

<cell>

Defines a table cell. Can span multiple columns with colSpan.

Attribute	Values	Description
colSpan	number	Number of columns to span (alias: col-span).

<cell colSpan="2" style="padding: 8; backgroundColor: #f1f5f9;">
  <text>This spans two columns</text>
</cell>

Charts

Generates engine-native vector charts. Supported tags are barchart, linechart, piechart, areachart, and dotplot. All are self-closing.

Attribute	Values	Description
width	number	Chart width in points.
height	number	Chart height in points.
data	JSON array	`barchart` and `piechart`: `{ "label": string, "value": number, "color"?: string }`.
series	JSON array	`linechart` and `areachart`: `{ "name": string, "data": number[], "color"?: string }`.
labels	JSON array	X-axis labels for `linechart` and `areachart`.
groups	JSON array	`dotplot`: `{ "name": string, "color"?: string, "data": [[x,y], ...] }`.
title	string	Optional chart title where supported.
showGrid	true · false	Show horizontal grid lines for bar, line, and area charts.
showLabels	true · false	Show category labels on `barchart`.
showValues	true · false	Show value labels on `barchart`.
showPoints	true · false	Show dots on `linechart`.
donut	true · false	Render `piechart` as a donut chart.
showLegend	true · false	Show legend for `piechart` and `dotplot`.
xLabel · yLabel	string	Axis labels for `dotplot`.
xMin · xMax · yMin · yMax	number	Optional axis ranges for `dotplot`.
dotSize	number	Dot radius for `dotplot`.

<barchart
  style="width: 450; height: 220; marginBottom: 30;"
  data='[{"label":"Q1","value":12000},{"label":"Q2","value":19000},{"label":"Q3","value":15000}]'
  showLabels="true"
  showGridlines="true"
/>

<linechart
  style="width: 500; height: 220;"
  series='[{"name":"Active Users","data":[1200,1800,2400],"color":"#3b82f6"}]'
  labels='["Jan","Feb","Mar"]'
  showPoints="true"
  showGrid="true"
/>

<piechart
  style="width: 240; height: 220;"
  data='[{"label":"Subscriptions","value":62,"color":"#3b82f6"},{"label":"Enterprise","value":28,"color":"#0f172a"}]'
  donut="true"
  showLegend="true"
/>

<areachart
  style="width: 500; height: 220;"
  series='[{"name":"Organic","data":[500,800,1200],"color":"#3b82f6"}]'
  labels='["Jan","Feb","Mar"]'
  showGrid="true"
/>

<dotplot
  style="width: 420; height: 250;"
  groups='[{"name":"API v1","color":"#3b82f6","data":[[10,45],[50,120],[100,230]]}]'
  xLabel="Concurrent Requests"
  yLabel="Latency (ms)"
  showLegend="true"
/>

Style Attribute

Use inline CSS-like declarations in the style attribute on any element. Both camelCase and kebab-case are accepted.

<view style="padding: 16; backgroundColor: #f9fafb; borderRadius: 6;">
  <text style="fontSize: 12; fontWeight: 700; color: #111827;">Summary</text>
</view>

Numeric values can be written with or without px. Colors are hex strings.

Layout

padding paddingTop paddingRight paddingBottom paddingLeft margin marginTop marginRight marginBottom marginLeft display flex flexDirection row · column justifyContent space-between · center · flex-end · space-around alignItems flex-start · center · flex-end · stretch flexWrap wrap · nowrap gap · rowGap · columnGap position relative · absolute top · right · bottom · left flexGrow · flexShrink · flexBasis

Typography

fontFamily fontSize number (points) fontWeight 400 · 700 fontStyle normal · italic lineHeight textAlign left · center · right letterSpacing textDecoration underline · line-through color #hex direction ltr · rtl · auto textOverflow ellipsis · clip

Visual

backgroundColor #hex opacity 0–1 borderRadius

Page Sizes

Supported presets — A3, A4 (default), A5, Letter, Legal, Tabloid. Page sizes use PDF points (72 points = 1 inch). Custom sizes via size="[width,height]" or width + height attributes.

Notes

Keep these rules in mind when writing XML by hand or generating it from your application.

Quote every attribute

XML attributes must always be quoted, including numeric-looking values like width="300" and boolean values like showGrid="true".

Use single quotes around JSON

Use single quotes for JSON-style attributes that contain double quotes, for example columns='[{"width":{"fraction":0.5}}]'.

Escape embedded XML text

Inside attribute values, use XML entities such as ", <, and & when literal characters would break the XML.

Self-close leaf components

Leaf nodes can be self-closing: text, shorthand svg, canvas, qrcode, barchart, linechart, piechart, areachart, and dotplot.

Try it in the Playground →