Export & Code Generation

Export Dialog

Press Ctrl+E or go to File > Export to open the Export Dialog. This batch processing interface lets you export multiple nodes in one operation:

• Batch Job List — Add export jobs for any node or page
• Export Progress Bar — Visual progress with cancel support
• Destination Picker — Choose target folder
• Sequential processing — Jobs process one at a time for reliability

Image Export

PNG

Raster export with configurable scale (1x, 2x, 3x). Uses the canvas rendering pipeline to produce pixel-perfect output at any resolution. Ideal for web assets, app icons, and social media graphics.

SVG

Vector export via exportDocumentToSvg() and exportDocumentToSvgAdvanced(). The SVG output preserves:

• Shape geometry (rect, circle, ellipse, line, polygon, path)
• Text elements with font family and styling
• Gradient and solid fills
• Stroke properties (dash, cap, join, weight)
• Transform matrices (position, rotation, scale)

SVG export supports optional boundsOverride for focused sub-region export and multi-page document support.

PDF Export

Varve's PDF export is powered by the Rust varve-print crate, which uses lopdf for direct PDF content stream generation. PDF export features:

• Standard PDF — Path operators for all primitive types (rect, circle, ellipse, line, polygon, star, arrow, bezier paths)
• PDF/X-1a — Print-ready PDF with CMYK color, crop marks, registration marks, and color bars
• PDF/X-4 — Modern PDF/X with transparency and color management support
• Font outlining — Text converted to vector paths using ab_glyph for reliable rendering (optional)
• ICC profile embedding — Bundled sRGB, Adobe RGB, Fogra39, GRACoL, and SWOP profiles
• Color bars and registration marks — Print production marks with 5-crosshair registration targets

Code Generation

Varve can generate production-ready code from your designs. All generated code is standalone and doesn't require any Varve runtime.

React + Tailwind CSS

Generate a React component using Tailwind CSS utility classes. The output uses semantic class names, responsive layout, and preserves all styling from your design. Each frame becomes a styled container, shapes become divs with proper styling, and text elements become HTML with typography classes.

CSS Modules

Standard CSS output with BEM-inspired class naming and modular style sheets. Includes all color values as CSS custom properties where token bindings are detected.

Flutter

Generate a Flutter widget tree using Container, Positioned, Text, and Stack widgets. Frames with flex layout become Row/Column widgets. Frames with absolute positioning use Stack + Positioned. The output uses proper Flutter idioms (EdgeInsets, BorderRadius, Colors, TextStyle) and respects token bindings.

SwiftUI

Generate SwiftUI views using ZStack, HStack, VStack, Text, and Rectangle/ Circle shapes. Frames become containers with the appropriate stack type. Dimensions use CGFloat, colors use Color, and typography uses Font/Text styling. Token bindings generate Color and Font references.

Spec Export

The Spec Panel provides developer handoff information:

• Measurement readouts — Position, dimensions, rotation, corner radius for selected node
• Style specifications — Complete fill, stroke, effect, and typography properties in a structured format
• Diff-on-change — When you modify the design, the spec panel highlights changed values with +/- badges
• Syntax highlighting — Code block display with PrismJS-based highlighting for 6 languages
• File save — Save spec output as a file via the Tauri save_file_bytes bridge

Export Settings

Configure default export preferences in Settings:

• Default format — Preferred export format (PNG, SVG, PDF)
• Scale — Default output scale (1x, 2x, 3x)
• ICC profile — Default color profile for PDF export
• Bleed — Default bleed width for print documents
• Outline text — Whether to convert text to paths by default
• Naming template — Output file naming pattern