PDF Export

One-click PDF Export

The PDF export turns a project into a print-ready document that includes the project summary, scaled technical drawings, the material layout, the cut list, per-panel cutting diagrams and installation instructions — everything a workshop or installer needs on site.

Feature line from the README: 📄 One-click PDF export with technical drawings and instructions.

Triggering the export

• Editor toolbar → PDF button. Disabled while an export is running.
• The export hook (useExportPdf) shows progress as Exporting… and dispatches a toast on success or failure.
• If the PDF is configured to include Material layout and the current layout entries are still previews, the toolbar first runs Generate material layout so the exported cut list, cutting diagrams and layout pages are based on persisted optimiser output instead of the transient preview.
• The output file is named <project name>.pdf, with all unsafe path characters (\ / : * ? " < > |) replaced by underscores so the download works on every OS.

The pipeline:

1. Read the live project from the store.
2. Build the cut list from materialCutList.
3. Build a CuttingDiagram for every persisted MaterialLayout using the project's blade kerf.
4. Compute project-wide statistics (computeProjectStats).
5. Build the PDF via buildPdfDocument (powered by pdf-lib).
6. Trigger a browser download for the generated Uint8Array.

The Project Overview page prefers a live stage thumbnail so the PDF matches the editor preview. Thumbnail capture now runs one at a time, which prevents autosave, manual save and PDF export from racing each other and occasionally producing a blank overview image.

Pages produced

buildPdfDocument always renders the Summary page first and then conditionally appends pages based on the project's pdfSettings:

Page	Toggle	Contents
Summary	always	Project name, totals, per-material stats, waste percentage.
Final appearance	includeFinalAppearance	High-fidelity render of every surface as it will look once finished.
Technical drawing	includeTechnicalDrawing	Dimensioned, scaled engineering drawing.
Material layout	includeMaterialLayout	Per-surface drawing with placement pattern overlays.
Cut list	includeCutList	Tabular list of every piece, grouped by code, with sizes and notes.
Cutting diagrams	includeCuttingDiagrams	One page per purchased panel showing the slices.
Installation instructions	includeInstallationInstructions	Step-by-step text with annotated references back to the drawings.

A common footer (project name, page number, page total) is drawn on every page at the very end so pagination stays consistent.

Export settings

PdfExportSettings live on every project and survive autosave / JSON export:

• paperSize — A4 or A3.
• orientation — portrait or landscape.
• scaleMode — auto (fit the page), fixed (1:5, 1:10, 1:20) or custom (any positive numeric scale).
• Drawing toggles — includeDimensions, includeSurfaceNames, includePieceIds, includePieceDimensions, includeOverlapZones.
• Section toggles — includeFinalAppearance, includeTechnicalDrawing, includeMaterialLayout, includeCutList, includeCuttingDiagrams, includeInstallationInstructions.

Defaults from defaultPdfSettings() produce a complete report with the final appearance, technical drawing, material layout, cut list, cutting diagrams and instructions all turned on.

What is drawn vs. what is exported

The PDF is rendered server-side-style — entirely in JavaScript, using pdf-lib to lay out fonts and svg.ts to convert canvas geometry to PDF primitives. That gives crisp vector output (no rasterisation) for the drawings, scales correctly for A4 and A3, and keeps file sizes small.

The cutting diagram pages are derived from buildCuttingDiagram, which takes the optimised MaterialLayout, the active material and the project's bladeKerfMm — so the diagrams perfectly match what the cut list says you will use.

Where this lives in the codebase

• Toolbar trigger and pre-export generation gate — src/features/editor/EditorToolbar.tsx
• Export hook — src/features/editor/useExportPdf.ts
• Document builder — src/domain/pdf/pdfDocument.ts
• Page renderers — renderSummaryPage.ts, renderDrawingPages.ts, renderCutListPages.ts, renderInstructionsPage.ts
• Overview thumbnail capture — src/features/editor/canvas/activeStage.ts
• Shared layout helpers — src/domain/pdf/layout.ts, text.ts, svg.ts
• Settings schema — src/types/pdf.ts
• Defaults — src/types/defaults.ts

Related pages

• Auto-generated Cut Lists and Layouts
• Local Storage and JSON Import-Export