File Formats

Open, import, place, and install

Varve uses precise actions for local files. Open makes a Varve document the active document. Import converts artwork into the active document. Place positions an image or reference on the canvas. Install adds a reusable resource such as an icon pack or brush. These core actions read local files; they do not require an account or a file upload.

• Desktop: native file dialogs and operating-system drops preserve the path boundary where a path is needed.
• Browser: file pickers and canvas drops use browser file APIs and keep the working copy in local browser storage.
• Drag and drop: empty, oversized, unsupported, or over-limit selections are reported before format-specific parsing.
• Batch selection: files stay in selection order, duplicate names are allowed, and one failed file does not discard successful files.

“Upload” is reserved for an explicit, consented remote service such as diagnostic reporting. It is not the mechanism used by core document or artwork import.

Native Format: .varve

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

• Document schema version — an integer used by the migration pipeline (migrateDocument() upgrades older supported schemas)
• 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
• Typography dependencies — Font manifest v2 records exact SHA-256 face/member references when known, requested settings, and missing/substituted status; legacy family-only requests remain recoverable and are never turned into an arbitrary embedded face during package export
• 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 .varve format is versioned (current document schema 2.33). Published v0.6.0 includes these migrations. The published v0.2.1 application used schema 2.21; this build migrates documents through the intervening versions when they are opened. The 2.32-to-2.33 migration removes the unwanted outline across existing pointed comic-balloon tails. The app version (0.5.0) and document schema version (2.33) are separate numbers. Keep a backup before opening important files so you can restore the original if a migration exposes an issue. Files saved with schema 2.33 are not backward-compatible with v0.2.1 or other older builds: those versions may warn that the file is newer and cannot promise to preserve newer features. Use a compatible 0.5.0 or later build to continue editing a schema-2.33 file. The Document.variableStore field remains the source of truth for variable data. Documents with the legacy .strata extension (from before the project's rename from Strata to Varve) remain openable through the same migration pipeline.

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 reports material losses during import.

SVG

SVG import via a bounded recursive descent parser. The supported editable subset includes:

• 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
• Hidden SVG content and explicit visible overrides are preserved; inline display="none" content is omitted

Imported SVG keeps the source's ordered sibling roots and nested groups as logical artifacts. Their transforms (including nested scale and rotation), viewBox origin, and relative spacing are resolved once before placement, so separate groups are not pasted as an unordered stack or given independent offsets. Unsupported effects and semantics remain visible in Import Results instead of being silently flattened.

Inkscape live path effects keep their visible SVG path geometry on import, but Varve does not retain the Inkscape-only original path or effect controls. Import Results marks these files as partial so you can keep the source SVG when you may need to adjust those effects later.

.svgz uses the same bounded parser after gzip decompression. The encoded and decoded source budgets are checked before parsing, and malformed or external references are rejected with a report rather than being handed to the browser as active markup. A malformed declared vector file is reported as a parse failure for that format, rather than as an unknown importer.

Figma design data

Varve accepts supported native Figma .fig archives, official Figma REST file JSON, and compatible plugin-export JSON for semantic, editable conversion. Native archives are decoded locally when the runtime decoder supports their schema; packaged desktop CSP verification remains a separate validation lane. REST/plugin JSON is the documented high-fidelity route. Ordinary Figma Copy uses a private clipboard envelope and is not claimed; use Figma's Copy as SVG route for clipboard interoperability.

• Editable text: Text remains text, including mixed rich-text runs where the source data provides them
• Font recovery: Missing families are reviewed through ranked local replacement candidates; the original family and replacement remain in the document manifest
• Native semantics: Auto Layout, components, variants, direct component slots, variables, and interactions are converted only when the target model can preserve their meaning
• Safe degradation: Unsupported effects, missing dependencies, and approximations appear in the structured Import Report

Native .fig conversion is local-first and does not require Figma credentials. Source schema versions and resource maps evolve, so Varve reports unsupported effects, missing dependencies, and degraded semantics in its Import Report. Packaged desktop CSP verification for the native decoder remains a separate validation lane. When maximum documented Figma resource fidelity is required, use an authorized REST or plugin export; SVG and PDF remain useful visual fallbacks but cannot preserve Figma-specific components, variables, Auto Layout, or prototype semantics. Read the missing-font replacement workflow and typography documentation for details.

Figma Auto Layout maps to Varve's responsive stack model when the source exposes a verified direction, padding, gap, wrapping, alignment, and sizing value. Literal zero bounds and the grow axis are preserved. Unsupported grid functions or target-specific constraints stay in the report instead of being rewritten as a misleading fixed size; see the Auto Layout guide for the target behavior.

Direct Figma slot properties on a component root become editable Varve slots with their default content. Nested slot areas stay visually editable but are reported when Varve cannot map them into the component slot contract; Figma-only preferred-instance and child-count guidance is not preserved. Varve does not export Figma .fig files.

PDF

PDF import uses a bounded local parser with %PDF- header detection. It reads the page tree and each page's content stream rather than pattern-matching text:

• Text positioned by the text matrix composed with the CTM, with /Rotate and inherited page boxes applied, so a line lands where the page puts it
• Character codes resolved through the font's /ToUnicode map, or its named base encoding plus /Differences, so accented and non-Latin text survives
• Vertical writing (/Identity-V, or a CMap with /WMode 1) imported as vertical columns with the writing mode set, including producers that position one glyph per text-showing operator
• Plain axis-aligned rectangle fills
• One Varve page per PDF page, in /Kids order, up to 50 pages; the remainder is named in Import Results

Content the page does not show is not imported: text in an invisible or clip-only render mode (3 Tr / 7 Tr, the shape of a searchable OCR layer over a scan), and content inside an optional-content group the document's default configuration hides (a PDF layer, as layered CAD exports ship). Both are counted, and hidden layers are named in Import Results. Images, form XObjects, curves, strokes, gradients, CMYK and pattern paints are reported rather than approximated. Import Results also lists what the parser did rather than what it lost, such as page rotation being applied or vertical runs becoming editable columns.

An encrypted PDF (password-protected or permission-restricted) is refused with an explanation instead of being imported as a blank page: Varve does not implement the PDF security handler. Export an unencrypted copy from a PDF reader, then import that.

PSD and PSB (Photoshop)

PSD and PSB import via @webtoon/psd. The shared 8BPS signature is distinguished by its header version (1 for PSD, 2 for PSB). The bounded parser keeps the editable layer tree and reports any material loss before insertion. It supports:

• Layer and group names, order, bounds, visibility, opacity, and blend modes
• Representable layer masks as native Varve masks
• Document dimensions, editable layer metadata, and decoded layer pixels as embedded PNG fills

Adjustment layers, layer effects, clipping masks, smart objects, and exact Photoshop text styling are not a round-trip promise. Supported layer pixels are materialized as embedded PNG image fills so the imported artwork is visible, while the layer metadata remains editable; text pixels remain rasterized. These losses remain in the Import Results report so a partial layer import is distinguishable from a fully preserved Photoshop document. Header, dimension, encoded-size, and pixel budgets are checked before parsing; truncated or over-budget files fail without inserting placeholder layers. Invalid or sentinel mask rectangles are omitted with a warning instead of hiding decoded layer pixels. There is no PSD/PSB export path.

AI (Adobe Illustrator)

Adobe Illustrator files use a PDF-compatible wrapper in current releases and may use a legacy PostScript wrapper. The importer:

• Keeps the .ai route ahead of the generic PDF parser even when the bytes begin with %PDF-
• Extracts embedded SVG content where it is present and safe
• Falls back to the maintained EPS subset for legacy PostScript AI files
• Reports losses for gradients, meshes, transparency effects, fonts, and other native Illustrator semantics

A PDF-compatible header alone is not treated as artwork: if the bounded adapter cannot find supported SVG, text, or basic path content, Import Results reports a failure and inserts nothing. This keeps a corrupt or truncated .ai from appearing as a successful placeholder import.

EPS

Encapsulated PostScript import with:

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

Raster Images

Direct import of PNG, JPG, WebP, AVIF, GIF, BMP, and TIFF files where the active runtime and normalization path support them. Images are loaded into the ImageCache and can be used as image fills on shapes or imported as ImageNodes. GIF and other animated containers are inspected for media metadata, while editor placement is currently first-frame.

TIFF is decoded from its first image file directory and normalized to an embedded PNG before browser rendering. Multi-page, layered, CMYK, and high-bit-depth TIFF semantics are reported as losses; the source is not silently advertised as a TIFF round trip. Raster inspection enforces encoded-byte, dimension, and pixel budgets before decoding.

For local raster transcoding, use Image Conversion. It is a normalized canvas workflow and does not promise metadata-preserving or layered round trips.

Export Formats

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

• PNG — Configurable scale (1x-3x)
• SVG — Editable supported subset; fidelity warnings are reported
• 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, GIF, TIFF, PSD/PSB, PDF, AI, or EPS 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 decodes at most two files concurrently, restores selection order, and reports progress per completed file

Each picker and drop is bound to the document and session that started it. A newer transfer cancels an older decode before commit, so stale artwork cannot appear in a different tab or overwrite the current report. SVG artifacts keep their source order, grouping, and relative spacing; unsupported features are listed in Import Results.