File Formats

Native Format: .strata

The Varve native file format (.strata) is a JSON-based document that stores the complete design state. Each file contains:

• Format version — Semver string for forward compatibility with document migration (migrateDocument() supports version upgrades)
• Document metadata — Name, creation date, last modified date
• Pages — Array of Page objects with dimensions, bleed, safe area, and content root
• Node tree — Recursive tree of scene nodes (shape, text, frame, group, image, adjustment)
• Styles — Reusable color, text, effect, and layout style definitions
• Variable store — Variable collections with modes and groups
• Component definitions — Reusable components with slots and property definitions
• Installed libraries — References to shared library packages
• Prototype data — Interactions, triggers, actions, and flow graph
• Color mode — RGB, CMYK, or Grayscale with profile metadata

The .strata format is versioned. When opening an older file, Varve automatically migrates it to the current format version. The Document.variableStore field is the sole source of truth for all variable data.

Import Formats

Varve can import designs from a variety of formats through the File > Import dialog (Ctrl+I). The import pipeline validates each file, estimates node count, detects unsupported features, and provides a preview before import.

SVG

Full SVG import via recursive descent parser. Supports:

• Primitive shapes: <rect>, <circle>, <ellipse>, <line>, <polygon>, <polyline>
• <path> with M, L, C, S, Q, T, A, Z commands
• <g> groups with transforms
• <text> elements
• <image> embedded images
• <use> and <defs> references
• Transform attributes (matrix, translate, rotate, scale, skew)
• Fill, stroke, opacity, and style attributes

PDF

PDF import via pdf.js with %PDF- header detection. Extracts:

• Text content from BT...ET blocks
• Rectangle path operators
• Multi-page conversion (each page becomes a Varve frame)

PSD (Photoshop)

PSD import via @webtoon/psd with 8BPS header detection. Supports:

• Layer tree extraction (groups, text layers, image layers)
• Text layer content and styling
• Image layer pixel data

AI (Adobe Illustrator)

Adobe Illustrator files use a PDF wrapper with embedded SVG content. The importer:

• Detects the PDF wrapper via header
• Extracts embedded SVG content where available
• Falls back to EPS header parsing for legacy files
• Reports fidelity warnings for AI-specific features

EPS

Encapsulated PostScript import with:

• BoundingBox extraction
• Basic rectangle and text conversion
• Unsupported feature warnings

Raster Images

Direct import of PNG, JPG, WebP, and GIF files. Images are loaded into the ImageCache and can be used as image fills on shapes or imported as ImageNodes.

Export Formats

See the full Export & Code Generation guide for complete details. Quick summary:

• PNG — Configurable scale (1x-3x)
• SVG — Full vector preservation
• PDF, PDF/X-1a, PDF/X-4 — Print-ready with CMYK, marks, profiles
• CSS @keyframes — Animation as CSS keyframes
• SVG animate — Animation as SMIL SVG
• Lottie — Animation as Lottie JSON
• React + Tailwind — React component with Tailwind classes
• CSS Modules — Modular CSS with BEM naming
• Flutter — Flutter widget tree (Container, Text, Stack, Row/Column)
• SwiftUI — SwiftUI views (ZStack, HStack, VStack)

Drag and Drop Import

You can also import files by dragging them directly onto the canvas:

• Drag SVG, PNG, JPG, WebP, or GIF files from your file manager
• Files are placed at the drop position with proper world-coordinate conversion
• Multiple files are tiled with spacing
• Batch import processes files sequentially with progress indication