internals

What Programming Languages Are Used in the Archify Project?

August 13, 2026 tt-a1i/archify ↗

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 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 file contains central design parameters, while 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. 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 for user onboarding to DESIGN.md for architectural decision records. Research documentation such as 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, 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:

// 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, importing the module from archify/archify.mjs.

HTML Template Structure

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

<!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 and references the ES Module directly via the type="module" attribute.

JSON Configuration Schema

Architecture diagrams are data-driven through JSON configuration files:

{
  "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 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 define architecture diagrams and engine configuration.
Markdown provides version-controlled documentation in README.md and DESIGN.md.
YAML and Shell scripts automate CI/CD pipelines via .github/workflows/ci.yml and packaging via 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 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, 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}

Ask your agent:

"Use Instagit MCP to understand how tt-a1i/archify works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →