# Prerequisites for Using Archify: Complete Setup Guide for 2024

> Discover Archify prerequisites. Get started with Archify using just a modern web browser. Learn about Node and static-file server recommendations for development.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: getting-started
- Published: 2026-08-11

---

**Archify requires only a modern web browser to run—no backend, database, or API keys needed—though Node ≥ 16 and a static-file server are recommended for development.**

**Archify** is a client-side, interactive documentation tool that renders architecture diagrams directly in the browser. Because it ships as pure static assets (HTML, CSS, JavaScript), the barrier to entry is intentionally low. This guide covers every **prerequisite for using Archify**, from essential browser requirements to optional development tooling.

## Browser Requirements for Archify

Archify is built with **ES‑2022 JavaScript**, **CSS Grid**, and the **Web Components API**. These technologies require up-to-date browser engines.

| Browser | Minimum Version |
|---------|---------------|
| Chrome | ≥ 80 |
| Firefox | ≥ 75 |
| Edge | ≥ 85 |
| Safari | ≥ 13 |

The [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) "Getting Started" section confirms these requirements. All rendering happens client-side, so server-side processing is never needed.

## Optional Development Prerequisites

While Archify runs without any build step, the repository includes helper scripts for developers. These add optional but convenient capabilities.

### Node.js ≥ 16 for Helper Scripts

The `scripts/` folder contains utilities written for Node 16+:

- `run-tests.mjs` — test harness for sanity checks
- [`build-zip.sh`](https://github.com/tt-a1i/archify/blob/main/build-zip.sh) — bundles assets for deployment

These are **not required** for the core viewer. The [`archify/package-lock.json`](https://github.com/tt-a1i/archify/blob/main/archify/package-lock.json) file pins the exact dependency versions used by these scripts.

### Static-File Server for Local Development

Archify examples load JSON architecture files via `fetch()`. Browsers enforce CORS restrictions on `file://` URLs, so a local server is needed during development.

Any of these work:

- `npx serve` (Node-based, recommended)
- Python: `python3 -m http.server`
- `php -S localhost:8000`
- VS Code Live Server extension

The [`docs/start.html`](https://github.com/tt-a1i/archify/blob/main/docs/start.html) guide documents this requirement explicitly.

### Git for Repository Access

Clone the source from GitHub:

```bash
git clone https://github.com/tt-a1i/archify.git

```

### Internet Connection for External Assets

Some examples in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) reference external resources:

- Google Fonts
- Font Awesome icons

These load via CDN and require connectivity unless you vendor them.

## What Archify Does NOT Require

- **No backend service** — pure client-side rendering
- **No database** — data lives in plain JSON files
- **No API keys** — authentication-free operation
- **No build step for basic usage** — CDN bundle works immediately

This zero-dependency design means Archify deploys to any static-hosting platform: GitHub Pages, Netlify, Vercel, or basic S3 hosting.

## Quick Start: Three Ways to Use Archify

### 1. CDN Embed (Zero Setup)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Archify Demo</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/archify/dist/archify.js"></script>
</head>
<body>
  <archify-view src="examples/archify-repo.architecture.json"></archify-view>
</body>
</html>

```

The `<archify-view>` Web Component loads and renders the JSON architecture definition automatically.

### 2. Local Development Server

```bash

# Clone and enter repository

git clone https://github.com/tt-a1i/archify.git
cd archify

# Install optional helper scripts

npm ci

# Serve examples folder

npx serve examples

```

Open `http://localhost:3000/web-app.html` for the full-featured demo.

### 3. Build Custom Distribution

```bash

# From repository root

node scripts/build-zip.sh

```

This creates `archify.zip` with minified, deployment-ready assets.

## Key Source Files

| File | Purpose |
|------|---------|
| [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) | Primary documentation with prerequisites section |
| [`docs/start.html`](https://github.com/tt-a1i/archify/blob/main/docs/start.html) | Quick-start embedding guide |
| [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) | Full-featured example with theming |
| [`archify/package-lock.json`](https://github.com/tt-a1i/archify/blob/main/archify/package-lock.json) | Node dependency locking |
| `scripts/run-tests.mjs` | Test runner (Node ≥ 16) |
| [`scripts/build-zip.sh`](https://github.com/tt-a1i/archify/blob/main/scripts/build-zip.sh) | Distribution builder |

## Summary

- **Minimum requirement**: Modern browser (Chrome ≥ 80, Firefox ≥ 75, Edge ≥ 85, Safari ≥ 13)
- **Recommended for development**: Node ≥ 16 and any static-file server
- **Deployment target**: Any static-hosting platform
- **Not needed**: Backend, database, API keys, or build step for basic usage

Archify's design prioritizes portability—you can go from zero to interactive architecture diagrams in minutes.

## Frequently Asked Questions

### Do I need to install Node.js to use Archify?

No. Node ≥ 16 is only required if you want to run the helper scripts in `scripts/` or build custom distributions. The CDN bundle in [`dist/archify.js`](https://github.com/tt-a1i/archify/blob/main/dist/archify.js) works in any modern browser without installation.

### Can I run Archify without a web server?

Not reliably. Browser CORS policies block `fetch()` requests from `file://` URLs. Use any static server—even Python's `http.server` one-liner—to serve the `examples/` folder locally.

### What file format does Archify use for architecture data?

Plain JSON. All architecture definitions are human-readable JSON files bundled with the repository. No proprietary formats or external data sources are required.

### Is Archify suitable for private/internal documentation?

Yes. Because Archify requires no backend or API keys, you can host it entirely on internal static hosting with no external dependencies beyond optional fonts/icons.