# What Utilities Are Shared Across Archify Renderers? A Deep Dive into the Rendering Architecture

> Discover the five core utility modules powering Archify's HTML, PDF, and image renderers. Explore render-utils, color-utils, font-utils, svg-utils, and animation-utils for efficient rendering.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-08-29

---

**TLDR:** Archify’s HTML, PDF, and image-export renderers rely on five core utility modules—[`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js), [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js), [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js), [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js), and [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js)—located in the `archify/renderers` namespace to normalize layout logic, color handling, and animation timing across every output format.

The tt-a1i/archify repository implements a modular rendering architecture where high-level format-specific renderers delegate low-level operations to shared utility modules. Understanding what utilities are shared across Archify renderers is essential for customizing output or debugging rendering inconsistencies. These shared modules eliminate code duplication while ensuring that DOM manipulation, color parsing, and font metrics behave identically whether generating HTML, PDF, or static images.

## Core Shared Utilities in the `archify/renderers` Namespace

The rendering layer centralizes common functionality in five distinct files within `archify/renderers`. Each module encapsulates specific technical concerns that would otherwise be duplicated across renderer implementations.

### [`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js) – Layout and Coordinate Conversion

The [`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js) module provides **DOM manipulation helpers**, **element sizing calculations**, and **coordinate conversion functions** that standardize how renderers calculate positions. According to the source code in [`archify/renderers/render-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/render-utils.js), utilities like `computeLayout()` and `convertCoords()` allow both the HTML renderer and PDF exporter to share identical layout logic despite targeting different output formats.

### [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js) – Color Normalization

Colors are parsed and normalized through [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js), which exports functions like `parseColor()` to handle **hex, RGB, and HSL conversions**. As implemented in [`archify/renderers/color-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/color-utils.js), this ensures that color values specified in design tokens render identically in vector PDFs, rasterized images, and CSS-based HTML outputs.

### [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js) – Typography and Font Management

The [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js) module manages **web font loading**, **text metrics measurement**, and **fallback font handling**. Located at [`archify/renderers/font-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/font-utils.js), these utilities guarantee that text measurements taken during the layout phase match the final rendered output, regardless of whether the target format supports web fonts natively or requires embedding.

### [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js) – Vector Graphics Construction

For renderers generating scalable graphics, [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js) contains routines for **constructing and serializing SVG elements**. The source code in [`archify/renderers/svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/svg-utils.js) is consumed by both the HTML-and-SVG renderer and the PDF exporter, allowing both formats to reuse identical path generation and shape rendering logic.

### [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js) – Timing and Frame Interpolation

Animation functionality is standardized through [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js), which provides **timing functions**, **easing equations**, and **frame interpolation helpers**. As defined in [`archify/renderers/animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/animation-utils.js), these utilities drive animated visualizations consistently across renderers that support motion, ensuring that easing curves and durations remain identical between interactive HTML exports and rendered video frames.

## Implementation Examples: Consuming Shared Utilities

Renderers import these utilities directly from the shared namespace, allowing high-level code to focus on format-specific serialization while delegating complex calculations to the common modules.

### HTML Renderer Integration

The HTML renderer utilizes `computeLayout()` from [`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js) and `parseColor()` from [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js) to prepare elements before DOM insertion:

```javascript
// Example: Using the shared render utilities in the HTML renderer
import { computeLayout, convertCoords } from '../renderers/render-utils.js';
import { parseColor } from '../renderers/color-utils.js';

function renderNode(node, container) {
  const layout = computeLayout(node);
  const color  = parseColor(node.style.color);
  // … render using the computed layout and normalized color …
}

```

### PDF Renderer Integration

The PDF renderer reuses the same color normalization logic while applying it to PDF-specific drawing operations:

```javascript
// Example: PDF renderer re‑using the same color utility
import { parseColor } from '../renderers/color-utils.js';
import { drawPath } from '../pdf-helpers.js';

function renderShape(shape, pdfDoc) {
  const color = parseColor(shape.fill);
  pdfDoc.setFillColor(color.r, color.g, color.b);
  drawPath(shape.path, pdfDoc);
}

```

## Summary

- **Five core modules**—[`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js), [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js), [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js), [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js), and [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js)—constitute the shared utility layer in `archify/renderers`.
- These utilities provide **layout calculation**, **color normalization**, **font metrics**, **SVG serialization**, and **animation timing** used by HTML, PDF, and image-export renderers.
- By centralizing low-level operations in the `tt-a1i/archify` repository, the architecture eliminates duplication and ensures **consistent rendering behavior** across all output formats.

## Frequently Asked Questions

### What utilities are shared across Archify renderers?

Archify renderers share five utility modules located in `archify/renderers`: [`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js) for layout, [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js) for color parsing, [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js) for typography, [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js) for vector graphics, and [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js) for timing functions. These modules ensure consistent behavior between HTML, PDF, and image-export renderers.

### How does Archify normalize colors between different output formats?

The [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js) module exports `parseColor()` and related functions that convert hex, RGB, and HSL values into standardized internal representations. Both the HTML renderer and PDF renderer import these utilities from [`archify/renderers/color-utils.js`](https://github.com/tt-a1i/archify/blob/main/archify/renderers/color-utils.js), ensuring identical color rendering regardless of the target format's native color model.

### Where are the shared renderer utilities located in the codebase?

All shared utilities reside in the `archify/renderers` directory within the tt-a1i/archify repository. Specifically, the files are [`render-utils.js`](https://github.com/tt-a1i/archify/blob/main/render-utils.js), [`color-utils.js`](https://github.com/tt-a1i/archify/blob/main/color-utils.js), [`font-utils.js`](https://github.com/tt-a1i/archify/blob/main/font-utils.js), [`svg-utils.js`](https://github.com/tt-a1i/archify/blob/main/svg-utils.js), and [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js), each handling distinct aspects of the rendering pipeline.

### How do Archify renderers handle animation timing consistently?

The [`animation-utils.js`](https://github.com/tt-a1i/archify/blob/main/animation-utils.js) file provides shared **easing functions** and **frame interpolation** logic that all renderers utilize when processing animated visualizations. This ensures that timing curves and duration calculations remain identical whether exporting to interactive HTML or rendered video frames.