Export

PinePaper supports multiple export formats for different use cases.

Format Comparison

PDF Export

Export your canvas as a print-ready PDF with professional features like bleed and trim marks.

Basic Usage

// Simple PDF export
await app.exportPDF();

// With options
await app.exportPDF({
  dpi: 300,                    // 300 (default) or 600
  includeBleed: true,          // Add bleed area
  bleed: 3,                    // Bleed in mm (default: 3)
  trimMarks: true,             // Add crop marks
  filename: 'my-design.pdf'    // Custom filename
});

Convenience Method

// Quick export at 300 DPI with default settings
await app.exportPrintPDF();

PDF Export Options

Understanding Bleed and Trim Marks

Bleed is extra image area beyond the trim edge. Print shops need this because cutting isn’t perfectly precise.

Trim marks are corner lines showing where to cut. Enable these when sending to commercial printers.

// Professional print export with bleed and trim marks
await app.exportPDF({
  includeBleed: true,
  bleed: 3,        // Standard 3mm bleed
  trimMarks: true
});

High-DPI PNG Export

Export static images at print-quality resolution.

Basic Usage

// Default PNG export
await app.exportPNG();

// With DPI setting
await app.exportPNG({ dpi: 300 });  // Print quality
await app.exportPNG({ dpi: 600 });  // Ultra high resolution

Convenience Method

// Quick print-quality PNG
await app.exportPrintPNG(300);

// Ultra high resolution
await app.exportPrintPNG(600);

PNG Export Options

DPI Guidelines

Browser Memory Limits

High-resolution exports may hit browser limits:

Safari iOS has the strictest limits. Desktop browsers handle larger canvases.

Need server-side export? If you’re hitting browser limits or need guaranteed high-quality exports regardless of device, vote for the Cloud Export API feature on UserJot to help us prioritize backend export services.

Print Presets

PinePaper includes canvas presets optimized for print at 300 DPI.

Setting Canvas for Print

// Set canvas to A4 portrait
app.setCanvasSize('a4-portrait');

// Set canvas to US Letter
app.setCanvasSize('letter-portrait');

// Custom size at print resolution
app.setCanvasSize({ width: 2480, height: 3508 });  // A4 at 300 DPI

Available Print Presets

Animated SVG Export

Export your canvas as an SVG with native CSS animations.

const svgString = app.exportAnimatedSVG();

Supported Animations in SVG

Limitations

• Keyframe animations with complex easing may not match preview exactly
• Pattern rotation is not supported in SVG export
• Consider video recording for complex animations

Video Recording

Record your canvas as a WebM video using the MediaRecorder API.

// Start recording
app.startRecording();

// ... let animations play ...

// Stop recording (downloads automatically)
app.stopRecording();

Notes

• Video is saved as WebM format
• Records whatever is happening on the canvas in real-time
• Best for complex animations that don’t export well to SVG

MP4 Export

Export as H.264 MP4 video for social media platforms.

await app.exportMP4({
  duration: 5,     // Duration in seconds
  fps: 30          // Frame rate (24, 30, or 60)
});

Browser Support

• Chrome 94+
• Edge
• Safari 16.4+

GIF Export

Export as animated GIF for messaging platforms.

await app.exportGIF({
  quality: 'high'  // 'low', 'medium', or 'high'
});

Browser Support Summary