# How to Export Share Cards and Route Cards (1200×630) from Archify

> Easily export 1200x630 share and route cards from Archify using the export menu and recordExportReceipt() helper. Download PNGs directly from your browser for seamless sharing.

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

---

**Archify generates 1200×630 PNG share cards through its export menu, with route cards available when a route overlay is active, using the `recordExportReceipt()` helper in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) to handle PNG generation and browser downloads.**

The Archify diagramming library provides built-in export functionality for creating social-media-ready images. These **share cards** capture your diagram at a fixed 1200×630 pixel resolution, while **route share cards** include the active route overlay. Both are implemented in the example web application shipped with the repository.

## Using the Export Menu in the UI

The simplest way to export cards is through the built-in toolbar. The export menu is defined in the main example file at [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html).

### Standard Share Card

Click the **Export** button (☰) in the top-right toolbar of any rendered diagram. Select **"Share Card"** — this option is always available and produces a clean PNG of the current view.

The button definition appears at line 4477:

```html
<button data-format="share-card" type="button">
  Share Card <span class="hint">1200×630 PNG</span>
</button>

```

*Source: [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) line 4477*

### Route Share Card

The **"Route Share Card"** option appears only when a route is active. It renders the same 1200×630 PNG with the route overlay included.

```html
<button data-action="route-share-card" type="button" hidden disabled>
  Route Share Card <span class="hint">1200×630 PNG</span>
</button>

```

*Source: [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) line 4478*

The `hidden` and `disabled` attributes are removed by JavaScript when `activeRoute` is populated.

## The Export Implementation

When a user selects an export option, Archify calls `recordExportReceipt()` followed by `download()`. These functions are implemented around line 6520 of [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html).

### Standard Share Card Flow

```js
recordExportReceipt(
  'share-card',                // format identifier
  blob,                        // PNG data as Blob
  true,                        // canonical (full diagram capture)
  { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT } // 1200×630
);
download(blob, base + '-share-card.png');

```

*Source: [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) lines 6520–6527*

### Route Share Card Flow

When a route is active, the same helper receives additional parameters:

```js
recordExportReceipt(
  'share-card',
  blob,
  false,                       // not canonical (has overlay)
  { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT },
  'route',                     // variant
  true                         // routeStateClean — render overlay
);
download(blob, diagramFilename() + '-route-share-card.png');

```

*Source: [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) lines 6481–6482*

The **variant** parameter (`'route'`) and **routeStateClean** flag instruct the renderer to include the route overlay before PNG generation.

## Programmatic Export Examples

You can trigger share card exports directly from JavaScript using the Archify renderer's `exportAsPng()` method.

### Export a Standard Share Card

```js
function exportShareCard(diagram) {
  const pngBlob = diagram.exportAsPng({ width: 1200, height: 630 });
  
  recordExportReceipt(
    'share-card',
    pngBlob,
    true,
    { width: 1200, height: 630 }
  );
  
  download(pngBlob, 'my-diagram-share-card.png');
}

```

### Export a Route Share Card

```js
function exportRouteShareCard(diagram) {
  const pngBlob = diagram.exportAsPng({ 
    width: 1200, 
    height: 630, 
    includeRoute: true 
  });
  
  recordExportReceipt(
    'share-card',
    pngBlob,
    false,
    { width: 1200, height: 630 },
    'route',
    true
  );
  
  download(pngBlob, 'my-diagram-route-share-card.png');
}

```

The `includeRoute: true` option ensures the route overlay is rendered into the PNG before export.

## Key Source Files

| File | Purpose |
|------|---------|
| [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) | Primary implementation with export menu UI, button definitions (`data-format="share-card"`, `data-action="route-share-card"`), and `recordExportReceipt()` helper |
| `examples/*-rendered.html` | Live examples demonstrating the export functionality in rendered diagrams |
| `archify/renderers/*` | Core rendering engines; PNG generation uses browser canvas API after SVG/HTML rendering |
| `scripts/build-gallery.mjs` | Gallery generator referencing share card export actions |

## Summary

- **Share cards** are 1200×630 PNG exports available via the Export menu or `recordExportReceipt('share-card', ...)`
- **Route share cards** add the active route overlay using the `'route'` variant parameter
- Both use fixed dimensions (`SHARE_CARD_WIDTH` / `SHARE_CARD_HEIGHT`) optimized for social sharing
- The implementation lives primarily in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) with helper functions at lines 6481–6527
- Programmatic exports use `diagram.exportAsPng()` with dimension and overlay options

## Frequently Asked Questions

### What are the exact dimensions of Archify share cards?

Archify share cards are fixed at **1200×630 pixels**, defined by the `SHARE_CARD_WIDTH` and `SHARE_CARD_HEIGHT` constants in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html). This 1.91:1 aspect ratio matches Open Graph standards for social media previews.

### Why is the Route Share Card option disabled?

The **Route Share Card** button remains `hidden` and `disabled` until a route is active in the diagram. The UI checks for `activeRoute` state and enables the button via JavaScript when a valid route exists. Without an active route, the export would produce identical output to the standard share card.

### Can I customize the share card dimensions?

The built-in export menu enforces 1200×630 pixels. For custom dimensions, use `diagram.exportAsPng()` directly with your preferred `width` and `height` values, then call `download()` manually. Note that `recordExportReceipt()` expects dimension metadata matching your actual blob size.

### Where is the PNG generation handled?

Archify renders diagrams to SVG/HTML internally, then uses the **browser canvas API** to rasterize at the target resolution. The actual pixel data creation happens within the renderer's `exportAsPng()` method, not in `recordExportReceipt()`, which only handles receipt logging and download triggering.