# Can Archify Diagrams Be Exported as WebM Animation? Technical Implementation Guide

> Learn if Archify diagrams export as WebM animations. Discover technical requirements like active trace-animation and browser support for MediaRecorder API.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-07-21

---

**Yes, Archify diagrams can be exported as WebM animations**, but only when the diagram contains an active trace-animation (the "guided-story" effect) and the browser supports the MediaRecorder API.

Archify’s export subsystem supports generating WebM video files to capture dynamic visualizations as shareable video clips. This capability is implemented in the core prototype and requires specific runtime conditions to function correctly.

## Prerequisites for WebM Export in Archify

### Trace Animation Requirement

WebM export is exclusively available for diagrams that include a **trace animation**. This animation creates the "guided-story" effect where the diagram draws itself sequentially. If you attempt to export a static diagram without this feature enabled, the export routine will throw an error.

### MediaRecorder API Support

The browser must implement the **MediaRecorder API** to encode the video stream. According to the source code in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) (lines 1527‑1532), the system validates this support before initialization. If the API is missing, Archify displays the error: *"WebM motion export requires a trace animation and browser MediaRecorder support"*.

## How to Export Archify Diagrams as WebM Animation

### Using the Export Menu UI

The simplest method uses the built-in export interface:

1. Press **E** (or click the export button) to open the export menu.
2. Select **WebM** from the format list.
3. The browser automatically downloads the video file via a generated blob URL.

The underlying HTML structure for the menu is defined in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html):

```html
<!-- Export button and menu (simplified) -->
<div class="export-wrap">
  <button id="btn-export" type="button" aria-controls="export-menu">Export</button>
  <div class="export-menu" id="export-menu" role="menu" aria-label="Export">
    <button data-format="png">PNG</button>
    <button data-format="jpeg">JPEG</button>
    <button data-format="webm">WebM</button>
  </div>
</div>

```

### Programmatic WebM Export

For automation or custom workflows, invoke the export pipeline directly via the global `Archify` object:

```js
// Archify is exposed globally as `Archify`
if (Archify.exportMenu) {
  // Runs the export pipeline for the chosen format
  Archify.exportMenu.run('webm')
    .then(blob => {
      // Create a downloadable link
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'diagram.webm';
      a.click();
      URL.revokeObjectURL(url);
    })
    .catch(err => console.error('WebM export failed:', err));
}

```

### Checking Browser Compatibility

Before attempting export, verify that the environment meets all requirements:

```js
function canExportWebM() {
  // Must have a trace animation and MediaRecorder support
  const hasTrace = Archify.trace && Archify.trace.isActive;
  const hasRecorder = typeof MediaRecorder !== 'undefined';
  return hasTrace && hasRecorder;
}

if (canExportWebM()) {
  Archify.exportMenu.run('webm');
} else {
  console.warn('WebM export unavailable – either no animation or MediaRecorder unsupported.');
}

```

## Internal Implementation and Error Handling

The export pipeline in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) handles WebM generation by constructing a temporary `canvas` element that replays the trace animation frame-by-frame. It streams these frames to a `MediaRecorder` instance configured to output the WebM container format.

Error handling is strict: if `Archify.trace.isActive` evaluates to false or `MediaRecorder` is undefined, the system halts immediately and returns the error message defined at lines 1527‑1532. This prevents generation of empty or corrupted video files.

The production-ready UI demonstrating this workflow is available in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html), which includes the full export toolbar with theme toggles and format selection.

## Summary

- **WebM export requires** an active trace animation and browser support for the MediaRecorder API.
- **Access the feature** via the UI (press **E**) or programmatically using `Archify.exportMenu.run('webm')`.
- **Implementation resides** in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html), using a temporary canvas and MediaRecorder streaming.
- **Error handling** at lines 1527‑1532 prevents export attempts when prerequisites are missing.

## Frequently Asked Questions

### Why is the WebM export option disabled in my Archify diagram?

The export routine checks for two conditions: an active trace animation (`Archify.trace.isActive` must be true) and the presence of the MediaRecorder API. If either condition fails, the option is suppressed or an error is thrown to prevent invalid output.

### Can I export WebM from Archify in Safari or older browsers?

No. Safari and legacy browsers that do not implement the MediaRecorder API cannot generate WebM files. The source code explicitly checks `typeof MediaRecorder !== 'undefined'` and aborts the operation if this evaluates to false.

### How do I automate WebM exports for multiple Archify diagrams?

Use the programmatic API `Archify.exportMenu.run('webm')`, which returns a Promise that resolves to a video Blob. Wrap this call in a batch script or loop, ensuring you call `canExportWebM()` (or equivalent checks) for each diagram to verify trace animation availability before initiating the export.

### Where is the WebM export logic implemented in the Archify source code?

The core implementation is located in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html), specifically around lines 1527‑1532 for error handling and MediaRecorder initialization. The user interface components are demonstrated in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html), which showcases the export toolbar used in production deployments.