Export & Code Generation

Export Controls in Inspector

Selecting any node or frame opens the Export tab in the right inspector panel. The tab is organized for zero-clutter, rapid workflows:

• Quick-Add Presets — One-click buttons to instantly arm + PNG 1x, + PNG 2x, or + SVG configurations without opening menus.
• Format Badges — Uppercase format labels (PNG, SVG, JPG, WEBP, PDF) with live filename preview and suffix editing.
• Inline Preflight Diagnostics — Automatic warnings for low-effective-resolution raster assets and duplicate output path collisions right inside the inspector.
• Multi-Selection & Empty States — Clear selection guidance when nothing is selected, and batch counter headers with direct routes to advanced export.

Batch Export Workspace (Export Dialog)

Press Ctrl+E, click File > Export, or select Open export workspace from the inspector to open the redesigned two-column batch workspace:

• Master-Detail Two-Column Layout — The left column manages the export queue; the right column configures output destinations, naming rules, and format-specific settings.
• Real-Time Search & Format Filters — Search jobs by filename or toggle format filter pills (All, PNG, SVG, PDF) to focus on specific deliverables in complex documents.
• Clickable Template Token Chips — Insert tokens like +{name}, +{suffix}, +{ext}, +{width}, and +{height} into your filename template with a single click.
• Real-Time Path Preview — Visual file and directory tree preview shows exact generated filenames and folders before running the batch, preventing accidental overwrites.
• Safe names on every platform — Object, page, preset, and variant names are flattened to one path segment, so a name containing a slash cannot create an unexpected folder in the archive or escape the output folder. Invalid filename characters become underscores, reserved Windows device names are prefixed, trailing dots and spaces are dropped, and a folder template's own separators remain the only ones that create directories. A single-file save dialog suggests just the file name, because one dialog cannot create folders.
• Estimated Batch Size — Live calculation in the dialog footer displays total estimated size for selected outputs before export starts.
• Dedicated Settings Cards — Contextual options for PDF/X bleed and crop marks, raster output PPI overrides, on-device AI background removal, and timeline motion export (CSS, Lottie, video).
• Actionable Empty State — When nothing is configured yet, the dialog explains how files join the batch and links straight to the Inspector Export tab.

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, weight, style and size. Every exportedfont-family list ends in a generic family (serif, sans-serif or monospace), so a viewer without the design face keeps the intended classification instead of falling back to its default serif
• 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.

SVG text is referenced by name; the exporter does not embed or subset fonts. A recipient without the design face will substitute it — the generic fallback keeps the substitution in the right classification, but glyph metrics can still change. Expand text to outlines when exact metrics matter, and open the exported file in a viewer that lacks the font when the result will be published.

Text is written as well-formed XML. Characters XML 1.0 cannot represent — the control characters that can arrive with text pasted from another application — are removed instead of being written raw, so the exported file still opens in browsers, Illustrator and other XML consumers. An unpaired surrogate becomes U+FFFD, the visible replacement character.

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. The next desktop release will stop export when artwork uses transparency or blend modes it cannot preserve.
• PDF/X-4 — Modern PDF/X with live transparency, supported blend modes, and color management in the next desktop release
• 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

Pattern fills in print output currently support axis-aligned grid repeats with positive independent gaps. Standard PDF preserves tile transparency and fill opacity. The next desktop release will have PDF/X-4 preserve transparency, while PDF/X-1a requires opaque artwork and stops when object or fill opacity, image alpha, pattern-tile alpha, or blend modes cannot be represented. Make the artwork opaque and flatten the full composite against its background, or choose PDF/X-4 before exporting. Shifted repeats, mirror, phase, rotation, negative gaps, and repeats estimated above 100,000 tiles are omitted with an embedded warning. Linked pattern fills are raster tile images in PDF, not reusable PDF pattern objects. See the pattern workflow guide for source-tile and SVG limits.

Presentation delivery in Design is a separate local workflow: export an ordered deck or selected slides as a compressed raster screen PDF or numbered PNG archive. The PDF keeps visual appearance but does not provide editable vectors, searchable text, or tagged reading order. See the presentation guide for slide order, private notes, and delivery limits.

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.

Accessibility of exported output

Export preserves the semantic intent that the target format can carry, but it does not certify the final experience. The host application, email client, document viewer, and the content you add after export all affect accessibility. Use the following review boundary before publishing.

• Web code: inspect generated headings, landmarks, labels, roles, focus order, image alternatives, contrast, responsive reflow, and reduced-motion behavior in the integrated page. Run an automated scan and a keyboard plus screen-reader pass.
• Email: resolve preflight warnings for missing image alternatives, decorative images, invalid or nested links, and compatibility fallbacks. Review the plain-text version and test the delivery clients used by your audience.
• SVG: treat standalone artwork as visual content unless the consuming document supplies an accessible name, appropriate role, and interaction semantics where needed.
• PDF/PDF-X: print fidelity and colour management do not imply tagged-PDF reading order. If accessibility is required, check language, tags, headings, reading order, alternate text, and outlined text with a PDF accessibility checker.
• Raster: PNG, JPEG, WebP, AVIF, and similar files contain pixels only. Add alt text, a caption, or a nearby text alternative where the asset is used, and mark decorative use in the consuming content system.

See the public accessibility information statement for Varve's authoring-tool evidence and limitations. Generated output still requires an author or integrator review.

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

Inspector export tab

The Export tab in the Inspector handles single-object output without leaving the canvas. It has two sub-tabs:

• Format — Quick export with an advised starting format (PNG, JPEG, WebP, SVG, or PDF), a 1x/2x/3x or custom scale for raster formats, and one primary action. On the desktop app the button reads Export and writes through the native save dialog; in the browser it reads Download. SVG output also offers a copy action that produces the exact markup the save would write.
• Code — generated SVG, CSS, Tailwind, CSS Modules, Flutter, and SwiftUI for the selected object, with copy-to-clipboard and a change indicator when the object is edited. The code view is keyboard-scrollable.

Export configurations are the saved outputs that run whenever the object is batch exported: enable or disable each one, edit its filename suffix, and add new ones from the quick-add buttons, the built-in preset library (including bundles such as a web asset set), or a custom format — including PDF/X print standards and code targets. Formats a deployment cannot encode (for example PDF/X in the browser) are shown disabled with the reason instead of being silently accepted.

The tab exports one object at a time. When several layers are selected it names the object that will be exported and offers a route to the export workspace for the batch path, which also carries destination, naming-template, and per-run resolution options.

Preflight findings for the saved configurations appear above the list before you export (oversized output, missing fonts, format or platform mismatches), and every export reports its result — including a cancelled save dialog — in a status line that is also announced to assistive technology.

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