Export & Code Generation
Export to SVG, React/Tailwind, React/CSS-Modules, Flutter, and SwiftUI. PDF export with CMYK support.
What It Is
Varve's code generation system exports scene documents to multiple formats including SVG, React with Tailwind CSS, React with CSS Modules, Flutter, and SwiftUI. The print production system supports PDF export with CMYK, bleed, crop marks, and color bars for professional print workflows.
Key Capabilities
- SVG export: Full SVG export with shapes, paths, text, and transforms
- React/Tailwind: Export to React components with Tailwind CSS utility classes
- React/CSS-Modules: Export to React components with CSS Modules
- Flutter: Export to Flutter/Dart code
- SwiftUI: Export to SwiftUI code
- PDF export: PDF/X-1a and PDF/X-4 support with CMYK, bleed, crop marks, color bars
- Print production: Bleed config, safe area, slug, swatches, spot colors
- Export settings: Per-node export settings for different output formats
Technical Depth
Code generation is implemented in packages/codegen/src/index.ts with functions for SVG export (exportDocumentToSvg, nodeToSvg), React/Tailwind JSX export (exportDocumentToReact), and utility functions for color conversion (rgba), affine transformations (affineToSvg), XML escaping (escapeXml), and shape vertex conversion (shapeVerticesToPoints).
PDF export is implemented in varve-print (Rust) with lopdf-based export_pdf supporting rect, circle, ellipse, line, polygon, and star path operators. The print production system includes color management with ICC profiles and rendering intents for PDF/X compliance.
Limitations
Current limitations:
- High-DPI export not implemented
- Canvas bleed and trim visualization not implemented
- Interactive animation export is a stub (CSS, Lottie, SVG, and video work)
Status
Code generation, PDF export, multi-page documents, and facing pages are functional. High-DPI export and canvas bleed visualization are deferred.