Playground

The live playground is the fastest way to compare Canvas and selectable-text rendering and exercise the package without installing it.

What you can exercise

Upload an existing PDF to try page composition and compare first, last and both insertion. Switch headers and footers between typed objects and Vue slots, inspect smart splitting with table fixtures, show pagination boundaries with the debug toggle, and try different paper sizes. The playground works on desktop, tablet and mobile. Its demo controls and fixtures are not npm exports.

Choose a renderer and paper size

Compare Canvas visual capture with selectable-text output, then choose A/B/C, Letter, Legal or other paper formats and orientation. Use the smart-split and table fixtures to inspect real pagination, including repeated headings.

Try headers, footers and composition

Switch between the typed header object and Vue slot and footer object and Vue slot. Upload a real PDF for composition, then compare first/last/both insertion and component-prop, imperative or legacy configuration. Check the generated page count because optional media and authored breaks change the report length.

Inspect output and document options

Try Blob, ArrayBuffer and Base64 output, PDF preview, download and print. Test auto-fit and export-only styling, passwords and permissions, watermarks, metadata and compression. The debug toggle shows pagination boundaries; its overlay is not embedded in the PDF.

The playground has an optional four-chart ApexCharts sample (bar, line, area and donut), a custom font picker, image controls and watermark design presets for v1.3.0. Numeric labels and fixed chart callouts can appear in exported PDFs; live browser hover tooltips do not persist. The chart packages are demo-only. See media and typography.

• Canvas and selectable-text rendering modes
• selectable/searchable/copyable PDF text
• preview, download and native browser print
• Blob, ArrayBuffer, raw Base64 and PDF data-URL output
• manual and automatic pagination
• headers, footers and logos
• watermarks and page targeting
• passwords, permissions, metadata and compression
• clickable links
• progress stages and page-aware progress
• opt-in total, stage and per-page generation timings
• cancellation and recovery
• data-pdf-ignore
• export-only page/body backgrounds, classes and styles
• per-page styling callbacks
• scoped custom PDF CSS
• external print stylesheets
• forced current/light/dark themes
• width auto-fit
• generated usage code

Stress playground

The interactive /stress.html presets configure a run; selecting a preset does not start PDF generation. Start a run explicitly and review browser memory and output for your device.

The dedicated stress page exposes page-count presets for large-document validation:

• 5
• 10
• 25
• 50
• 100
• 200
• 500
• 1000

Heavy and extreme presets can consume significant browser CPU and memory. The stress UI includes warnings and preserves cancellation/recovery behavior.

The package default remains Canvas mode for backwards compatibility even if the playground chooses text mode for demonstration.