@jeevandev/flow-canvas-export

Universal PDF export for flow-canvas with automatic chart detection.

Features

✅ Zero configuration - works immediately
✅ Universal chart support (Chart.js, Recharts, Highcharts, D3, etc.)
✅ Automatic detection (canvas, SVG, DOM)
✅ Multi-page PDFs
✅ High DPI support
✅ Progress tracking

Installation

npm install @jeevandev/flow-canvas-export

Usage

import { PdfExporter } from "@jeevandev/flow-canvas-export";
import { useEditor } from "@jeevandev/flow-canvas";

function ExportButton() {
  const pages = useEditor((state) => state.pages);
  const pageOrder = useEditor((state) => state.pageOrder);
  const nodes = useEditor((state) => Object.values(state.nodes));

  const handleExport = async () => {
    const exporter = new PdfExporter();

    await exporter.export(pages, pageOrder, nodes, {
      filename: "report.pdf",
      scale: 2,
      onProgress: (p) => console.log(`${p.percentage}%`),
    });
  };

  return <button onClick={handleExport}>Export PDF</button>;
}

Supported Elements

Headings, paragraphs, text ✅
Tables ✅
Images ✅
Buttons, forms ✅
Charts (any library) ✅
Custom CSS elements ✅

License

MIT