# How Archify's Export Options Produce Portable Artifacts
> Discover how Archify's export options create portable, self-contained artifacts for easy sharing and embedding. View, share, or embed without external dependencies.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: best-practices
- Published: 2026-08-09
---
**Archify generates every export as a self-contained, single-file artifact that requires no external resources, servers, or dependencies to view, share, or embed.**
Archify is an open-source diagramming tool designed so that every export you generate remains fully functional without pulling in additional assets. According to the `tt-a1i/archify` repository, the tool achieves true portability by bundling all geometry, styling, and interactive logic into standalone files that work offline and across platforms.
## Single-File HTML Output Architecture
The foundation of Archify's portability lies in its **single-file output format**. When you export a diagram, the primary artifact is one HTML file that contains the complete SVG geometry, CSS styling, and JavaScript interactivity.
In [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) at lines 79-84, the project explicitly states: *"Portable by default — the result is one HTML file; exports remain full-diagram and free of temporary viewer state."* This means the artifact can be opened in any browser without a server connection, and it will render identically to how it appeared during editing.
The HTML includes:
- **Inline CSS** defining theme variables and UI styles
- **Embedded JavaScript** powering the toolbar, export logic, and viewer interactions
- **Self-contained SVG** representing the diagram geometry
Because everything is bundled internally, the artifact cannot accidentally depend on a CDN or external library, ensuring it works offline and remains future-proof.
## Export Formats and the Viewer Interface
Archify provides a built-in **Export menu** accessible via the viewer toolbar or the **E** keyboard shortcut. This menu triggers the internal `Archify.exportMenu.run` routine, which serializes the current diagram into multiple portable formats.
In [`examples/archify-repo.html`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.html) at lines 920-930, the export interface is implemented as:
```html
```
The supported export formats include:
- **PNG** – Raster image for documentation and presentations
- **SVG** – Scalable vector graphics for lossless scaling
- **WebM** – Animated video format for motion diagrams
- **Share Card** – A 1200×630 PNG optimized for social sharing and README embeds
Because all rendering happens client-side, the resulting files contain only the visible diagram without hidden viewer state or temporary UI layers.
## Programmatic Export Control
The viewer exposes a lightweight JavaScript API for automating exports. You can trigger downloads programmatically using the `Archify.exportMenu.run()` method, as implemented in [`examples/archify-repo.html`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.html) at lines 925-931:
```javascript
// Download specific formats
Archify.exportMenu.run('png') // Standard PNG
Archify.exportMenu.run('svg') // Vector SVG
Archify.exportMenu.run('webm') // Animated WebM
Archify.exportMenu.run('share-card') // 1200×630 social card
```
The **share card** function copies the PNG directly to your clipboard for instant pasting into documentation, releases, or social posts, while simultaneously triggering a download for version control.
## Deterministic Metadata and Rendering
To ensure repeatable visual output across different browsers and platforms, Archify embeds **deterministic metadata** directly into the exported artifacts. The root `` element carries attributes such as:
- `data-theme` – Preserves the color scheme (light/dark)
- `data-preset` – Maintains the layout configuration
This metadata guarantees that when you reopen a file later or share it with collaborators, it renders with the exact visual style and layout that existed at export time. The deterministic approach eliminates "works on my machine" rendering discrepancies.
## Build Pipeline and Asset Bundling
The [`scripts/build-zip.sh`](https://github.com/tt-a1i/archify/blob/main/scripts/build-zip.sh) script ensures that all generated artifacts remain self-contained by bundling the viewer and all assets into a single distribution package. This build process validates that the HTML, PNG, SVG, and WebM outputs require no external references.
Additionally, [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md) defines the contract for output formats and metadata handling, enforcing the requirement that all artifacts must be portable and free of external dependencies.
## Summary
- **Single-file HTML exports** bundle all CSS, JavaScript, and SVG geometry into one portable document
- **Multiple format support** includes PNG, SVG, WebM, and 1200×630 share cards via the `Archify.exportMenu.run` API
- **Zero external dependencies** ensure artifacts work offline without CDN requirements
- **Deterministic metadata** (`data-theme`, `data-preset`) guarantees consistent rendering across platforms
- **Clipboard integration** allows instant sharing of PNG share cards for documentation
- **Client-side generation** produces clean files without temporary UI state or hidden viewer elements
## Frequently Asked Questions
### Can Archify exports be viewed without an internet connection?
Yes. Every exported artifact from Archify is completely self-contained. The HTML files include inline CSS and JavaScript rather than linking to external resources, making them fully functional offline. As documented in the repository's README, the single-file output contains all necessary geometry and logic, requiring no server or network access to render properly.
### How do I programmatically export a diagram to PNG using Archify?
Use the viewer's JavaScript API by calling `Archify.exportMenu.run('png')` from the browser console or a custom script. This method is exposed in the generated HTML viewer (found in [`examples/archify-repo.html`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.html)) and triggers an immediate download of the current diagram state as a PNG file. You can substitute `'png'` with `'svg'`, `'webm'`, or `'share-card'` to access other formats.
### What is the difference between a standard PNG export and a share card?
A standard PNG export captures the diagram at its native resolution, optimized for documentation and editing workflows. The **share card** is a specifically formatted 1200×630 PNG designed for social media embeds and README headers. The share card automatically copies to your clipboard when generated (via `Archify.exportMenu.run('share-card')`) and includes the full diagram plus caption area, making it ready for immediate posting without additional image editing.
### Does Archify preserve my theme settings when exporting?
Yes. Archify embeds metadata attributes including `data-theme` and `data-preset` directly on the root HTML element of exported files. This ensures that when you reopen an exported HTML file or share it with others, it maintains the exact visual style—light mode, dark mode, or custom themes—that was active during export, guaranteeing consistent rendering across different browsers and operating systems.