# What Programming Languages Are Used in the Archify Project?

> Discover the programming languages powering the Archify project. Archify uses JavaScript ES Modules, HTML, JSON, Markdown, Shell scripts, and YAML. Learn more about its tech stack.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: internals
- Published: 2026-08-13

---

**Archify is built primarily with JavaScript ES Modules, complemented by HTML for UI rendering, JSON for data configuration, Markdown for documentation, and auxiliary Shell scripts and YAML for automation.**

Archify is a Node-based web-oriented toolkit developed in the `tt-a1i/archify` repository that visualizes software architecture through interactive diagrams. Understanding what programming languages are used in the Archify project reveals a modern, browser-centric stack that relies on native ES Module syntax and web standards rather than compiled languages or frameworks.

## Core Programming Languages

### JavaScript (ES Modules)

The executable logic is implemented entirely in **JavaScript ES Modules** using the `.mjs` extension. All source files utilize modern `import`/`export` syntax, including `scripts/run-tests.mjs` which orchestrates the test suite and `archify/test/layout-rules.test.mjs` which validates layout algorithms. This module system eliminates the need for bundlers during development, allowing direct execution in modern Node.js and browser environments.

### HTML and Embedded CSS

User interface templates are authored in **HTML**, with styling handled through embedded CSS rather than separate stylesheets. The [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) file demonstrates this architecture, containing both the markup structure and inline `<style>` blocks that define the presentation layer. No dedicated `.css` source files exist in the repository; visual styling is either embedded directly within HTML documents or generated programmatically by the JavaScript engine.

## Data and Configuration Formats

### JSON Architecture Descriptors

**JSON** serves as the primary data interchange format, driving the visualization engine through declarative configuration. The [`.impeccable/design.json`](https://github.com/tt-a1i/archify/blob/main/.impeccable/design.json) file contains central design parameters, while [`examples/archify-repo.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.architecture.json) defines node structures, edges, and relationship metadata for specific architecture diagrams.

### YAML for CI/CD

Continuous integration is configured using **YAML** in [`.github/workflows/ci.yml`](https://github.com/tt-a1i/archify/blob/main/.github/workflows/ci.yml). This pipeline definition automates the execution of JavaScript tests and manages build artifacts without requiring additional scripting languages for workflow orchestration.

## Documentation and Build Automation

### Markdown Documentation

Project documentation is maintained in **Markdown**, ranging from [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) for user onboarding to [`DESIGN.md`](https://github.com/tt-a1i/archify/blob/main/DESIGN.md) for architectural decision records. Research documentation such as [`docs/research-visual-evolution-round-2.md`](https://github.com/tt-a1i/archify/blob/main/docs/research-visual-evolution-round-2.md) also utilizes Markdown for version-controlled technical writing.

### Shell Scripts

Packaging and release processes utilize **Shell (Bash)** scripts, specifically [`scripts/build-zip.sh`](https://github.com/tt-a1i/archify/blob/main/scripts/build-zip.sh), which automates the creation of distribution archives for library releases.

## Implementation Examples

### Initializing an Archify Instance

The following ES Module code demonstrates how to instantiate the core Archify class within a browser context:

```javascript
// examples/web-app.html embeds this script
import { Archify } from '../archify/archify.mjs';

// Initialise a simple Archify instance
const arch = new Archify({
  root: document.getElementById('canvas')
});
arch.render();   // draws the default architecture diagram

```

This pattern appears in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html), importing the module from `archify/archify.mjs`.

### HTML Template Structure

The web application entry point combines semantic HTML with module script loading:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Archify Demo</title>
  <style>
    body { margin:0; font-family:sans-serif; }
    #canvas { width:100vw; height:100vh; }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <script type="module" src="./demo.mjs"></script>
</body>
</html>

```

This markup is located at [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) and references the ES Module directly via the `type="module"` attribute.

### JSON Configuration Schema

Architecture diagrams are data-driven through JSON configuration files:

```json
{
  "nodes": [
    { "id": "frontend", "label": "Web UI" },
    { "id": "backend", "label": "Node API" }
  ],
  "edges": [
    { "from": "frontend", "to": "backend", "label": "REST" }
  ]
}

```

This structure is defined in [`examples/archify-repo.architecture.json`](https://github.com/tt-a1i/archify/blob/main/examples/archify-repo.architecture.json) and consumed by the JavaScript rendering engine to generate interactive visualizations.

## Summary

- **JavaScript ES Modules** form the core executable codebase, utilizing `.mjs` files with modern `import`/`export` syntax in `scripts/run-tests.mjs` and test suites.
- **HTML** with embedded **CSS** handles browser-based UI rendering without separate stylesheet files.
- **JSON** files such as [`.impeccable/design.json`](https://github.com/tt-a1i/archify/blob/main/.impeccable/design.json) define architecture diagrams and engine configuration.
- **Markdown** provides version-controlled documentation in [`README.md`](https://github.com/tt-a1i/archify/blob/main/README.md) and [`DESIGN.md`](https://github.com/tt-a1i/archify/blob/main/DESIGN.md).
- **YAML** and **Shell** scripts automate CI/CD pipelines via [`.github/workflows/ci.yml`](https://github.com/tt-a1i/archify/blob/main/.github/workflows/ci.yml) and packaging via [`scripts/build-zip.sh`](https://github.com/tt-a1i/archify/blob/main/scripts/build-zip.sh).

## Frequently Asked Questions

### Is Archify built with TypeScript or plain JavaScript?

Archify is implemented in vanilla **JavaScript** using ES Module syntax (`.mjs` files), not TypeScript. The source code in `scripts/run-tests.mjs` and `archify/test/layout-rules.test.mjs` relies on native browser and Node.js JavaScript features without requiring transpilation or type definitions.

### Why does Archify use the `.mjs` file extension instead of `.js`?

The `.mjs` extension explicitly signals **ES Module** usage to both Node.js and browsers, ensuring these files are treated as modules supporting `import`/`export` statements. This distinguishes them from legacy CommonJS `.js` files and guarantees correct module resolution without additional configuration.

### Where is the CSS styling defined if there are no dedicated CSS files?

All styling is embedded within **HTML** files using inline `<style>` blocks or generated programmatically by the JavaScript engine at runtime. The [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) file demonstrates this approach, defining viewport-relative dimensions and typography directly within the document head rather than in external stylesheets.

### How does Archify define its continuous integration pipeline?

The CI/CD configuration lives in [`.github/workflows/ci.yml`](https://github.com/tt-a1i/archify/blob/main/.github/workflows/ci.yml), written in **YAML**. This workflow file automates the execution of the JavaScript test suite defined in `scripts/run-tests.mjs` and manages build artifacts for releases.