# What Programming Language Is Hallmark Written In? ES Modules, HTML, and CSS Explained

> Discover Hallmark's tech stack. Learn how it uses JavaScript ES Modules, HTML, and CSS for its client-side static web application. Explore the code on GitHub.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: explanation
- Published: 2026-07-26

---

**TLDR:** Hallmark is written primarily in **JavaScript (ES 2020+)**, with **HTML** for markup and **CSS** for styling, functioning as a client-side static web application with no server-side components.

Hallmark is an open-source project by **Nutlope** that generates interactive web experiences entirely through client-side rendering. If you are investigating what programming language Hallmark is written in, the answer centers on modern web standards—specifically ECMAScript modules driving the logic, semantic HTML providing structure, and CSS handling the presentation layer.

## Core Technology Stack

Hallmark operates entirely in the browser as a static site, relying on native browser capabilities rather than server-side frameworks or heavy build steps.

### JavaScript (ES 2020+ Modules)

The interactive logic resides in ECMAScript modules, as declared in [[`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)](https://github.com/Nutlope/hallmark/blob/main/package.json) with `"type": "module"`. The main entry point, [[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), implements theme management, copy interpolation, keyboard shortcuts, and UI state handling using modern JavaScript features.

### HTML Markup

Static HTML pages provide the structural foundation for each theme variant. The primary interface is defined in [[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)](https://github.com/Nutlope/hallmark/blob/main/site/index.html), which loads the JavaScript bundle and renders the landing interface. Supplementary example pages live under the `site/examples/` directory.

### CSS Styling

Visual design and layout are handled through standard stylesheets, with [[`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css) serving as the foundational file. Theme-specific aesthetics rely on CSS custom properties manipulated by the JavaScript layer, while the View Transitions API enables smooth visual state changes.

## Key Implementation Details

The JavaScript implementation in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) leverages modern browser APIs to handle dynamic behavior without external framework dependencies.

### Theme Switching with View Transitions

The **`applyTheme()`** function manages visual theme changes, optionally utilizing the View Transitions API for smooth animations when motion reduction is not enabled:

```javascript
function applyTheme(theme) {
  if (!THEMES[theme]) return;
  const apply = () => {
    root.dataset.theme = theme;        // set CSS custom property
    swapArchetypes(theme);             // load theme‑specific markup
    setPressed(theme);                 // update UI controls
    localStorage.setItem(STORAGE_KEY, theme);
  };
  // Use view‑transition if available and motion isn’t reduced
  if (!reduced && document.startViewTransition) {
    document.startViewTransition(apply);
  } else {
    apply();
  }
}

```

### Dynamic Copy Interpolation

Hallmark processes template variables through the **`interpolate()`** function, which uses `document.createTreeWalker` to traverse the DOM and replace `{{variable}}` placeholders with actual content:

```javascript
function interpolate(node, copy) {
  const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
  const textNodes = [];
  let n; while ((n = walker.nextNode())) textNodes.push(n);
  for (const t of textNodes) {
    if (t.nodeValue.includes("{{")) {
      t.nodeValue = t.nodeValue.replace(/\{\{(\w+)\}\}/g, (_, k) => copy[k] ?? "");
    }
  }
}

```

## Project File Structure

Understanding the repository layout clarifies how these languages interact within the Nutlope/hallmark codebase:

- **[[`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)](https://github.com/Nutlope/hallmark/blob/main/package.json)** – Declares the project as an ES module (`"type": "module"`), defines the `serve` script for local development, and lists entry points.
- **[[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** – Central JavaScript bundle implementing `applyTheme`, `interpolate`, and UI interaction handlers.
- **[[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)](https://github.com/Nutlope/hallmark/blob/main/site/index.html)** – Main HTML entry point that loads scripts and renders the interface.
- **[[`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css)](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css)** – Core stylesheet providing layout foundations and theme variables.
- **[[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – Metadata file in Markdown format consumed by AI coding assistants.

## Summary

- Hallmark is built with **JavaScript (ES 2020+)**, **HTML**, and **CSS** as a static client-side application.
- The project uses **ES modules** (`"type": "module"`) for modern JavaScript dependency management.
- Core functionality—including theme switching and copy interpolation—resides in [[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js).
- No server-side runtime is required; the repository ships as a static site servable via any HTTP server.

## Frequently Asked Questions

### Is Hallmark built with a JavaScript framework like React or Vue?

No, Hallmark uses **vanilla JavaScript** without React, Vue, or Angular. It relies on native browser APIs such as `document.startViewTransition` and `document.createTreeWalker` to minimize dependencies and bundle size.

### Can Hallmark run without a backend server?

Yes. Hallmark is a **static site** that requires only a basic HTTP server to serve HTML, CSS, and JavaScript files. The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) includes a `serve` script for local development, but production deployment can use any static hosting solution.

### What version of JavaScript does Hallmark target?

Hallmark targets **ES 2020 and later**, utilizing modern features like optional chaining, nullish coalescing, and ES modules. The [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) explicitly declares `"type": "module"` to enable native ES module support without transpilation.

### Where is the main application logic located?

The primary application logic lives in **[[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)**, which contains functions for theme management (`applyTheme`), content interpolation (`interpolate`), and keyboard shortcut handling. This file serves as the central orchestration point for all client-side interactions.