@pixldocs/canvas-renderer 0.3.28 → 0.4.0

package/README.md

@@ -89,6 +89,41 @@ function TemplatePreview({ templateId, formSchemaId, sectionState, themeId }) {
 **Pros**: Lightweight DOM (just `<img>` tags), canvas is disposed after capture, fast for multi-page  
 **Cons**: Not interactive, requires re-render to update
 
+### Approach C: Vector PDF Export
+
+Renders all pages as SVGs and assembles them into a vector PDF using jsPDF + svg2pdf.js. Best for print-quality exports.
+
+```tsx
+import { PixldocsRenderer } from '@pixldocs/canvas-renderer';
+
+const renderer = new PixldocsRenderer({
+  supabaseUrl: 'https://xxx.supabase.co',
+  supabaseAnonKey: 'eyJ...',
+});
+
+// From form data (V2 sectionState)
+const { blob, totalPages } = await renderer.renderPdfFromForm({
+  templateId: 'your-template-id',
+  formSchemaId: 'your-schema-id',
+  sectionState: { section_abc: { name: 'John' } },
+  title: 'My Document',
+});
+
+// Download the PDF
+const url = URL.createObjectURL(blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = 'document.pdf';
+a.click();
+URL.revokeObjectURL(url);
+
+// Or from a pre-resolved config
+const result = await renderer.renderPdf(templateConfig, { title: 'My Doc' });
+```
+
+**Pros**: Vector output (infinite zoom), small file size, print-quality  
+**Cons**: No interactivity, requires jsPDF/svg2pdf.js (bundled as dependencies)
+
 ---
 
 ## API Reference