Native UI with ink markup

REDnode gives you two ways to put UI in front of the player. Overlay apps are web pages that REDnode draws over the game. Native UI is made of the game’s own widgets, the same ones its HUD and menus use, so the game draws it as part of its UI. This page is about native UI, written as ink markup: an HTML-style file that lists the widgets and where your data goes.

Ink is the name of the game’s UI system. A piece of ink UI is a tree of widgets: panels that hold other widgets, texts, images, shapes. The game spawns them, lays them out and draws them in its own fonts and colours.

Status: ink markup is released in REDnode 0.56.1 (2026-11-03). It passed in game on 2026-11-02 with the Ink markup sample. It is experimental: panels go on the HUD only, and the markup’s on... events are checked but don’t fire until input comes (phase I3).

The optional UI Tools pack’s UI Workbench writes, checks and runs ink markup for you in the game, and can copy a piece of the game’s own HUD into markup to start from. This page teaches the markup itself, so you can read and change what the Workbench writes.

Your first panel

A native panel is a normal Node mod with one more file. Make a folder in REDnode’s apps folder (or a development folder) with three files.

hello-panel/rednode-app.json:

{
  "id": "hello-panel",
  "name": "Hello panel",
  "version": "0.1.0",
  "main": "mod.mjs",
  "open": true,
  "requires": { "codeware": ">=1.16" }
}

hello-panel/panel.ink.html:

<!-- A small panel at the left of the HUD. -->
<mount layer="hud" anchor="left" x="80" y="-60">
  <column gap="10">
    <text style="label">Hello, Night City</text>
    <text style="body" tone="dim">Level {level}</text>
  </column>
</mount>

hello-panel/mod.mjs:

import { ink } from 'rednode';

const view = await ink.load('panel.ink.html', {}, { level: 1 });

// Change the data later: only the text that reads {level} is sent again.
setTimeout(() => view.set({ level: 2 }), 5000);

Load a save. The mod starts, and a panel appears at the left of the HUD in the game’s own label style, with “Level 1” turning to “Level 2” five seconds later. Switch the mod off in the launcher and the panel goes: REDnode removes a mod’s panels when it stops.

With Hot reload on (the launcher’s Settings drawer), saving the .ink.html file restarts the mod and the panel comes back changed. A mistake in the file stops it with the file, line and column in the Mod log, for example panel.ink.html:4:11: style: "lable" is not one of: title, subtitle, heading, ....

How a file is laid out

Everything is checked when the file is read: an unknown tag or attribute, a style or tone that doesn’t exist, a number that isn’t one, a tag left open, or text outside a <text> is refused, with its line and column. Nothing reaches the game until the whole file reads.

The mount

<mount layer="hud" anchor="top-right" x="-40" y="120">
  <!-- the panel's widgets go here -->
</mount>

The HUD’s units are not the overlay’s 1080p pixels. In the developer’s tests the HUD layer measured 3840 x 2160 across the screen; the UI Workbench’s status line shows the size it reads (ink size ...) after Refresh.

The tags

Attributes every tag takes

Panels (column, row, canvas, list) also take:

Attribute names with a dash work as written in camel case too: text-align and textAlign are the same.

Text

<text> holds its text between its tags. It also takes:

Tones

A tone is one of the game’s colour roles, taken from its own style sheet, so your panel matches the HUD.

Images, shapes and bars

<mount layer="hud" anchor="bottom-left" x="80" y="-200">
  <row gap="12" align="center">
    <rect width="12" height="12" tone="highlight" />
    <text style="small" tone="dim">Charge</text>
    <bar value="0.65" tone="accent" track="dim" width="240" height="8" />
  </row>
</mount>

Data: slots

A {name} in a text or an attribute reads the named data your script gives. The script never builds widgets itself: it changes data, and REDnode sends the game only the widgets that read what changed.

Rules worth knowing:

• No expressions. {level + 1} is refused. Work the value out in the script and give it a name.
• A slot alone keeps its type. value="{fill}" passes the number itself; text="Level {level}" makes text.
• Literal braces. {{ and }} are the characters { and }. A lone } is refused.
• Tones and visibility from data. tone="{tone}" and visible="{shown}" work, so the script can turn a value red or hide a line by changing data.

<mount layer="hud" anchor="left" x="80" y="-60">
  <column gap="10">
    <text style="label">{title}</text>
    <row gap="12" align="center">
      <bar value="{fill}" tone="{tone}" track="dim" width="240" height="8" />
      <text style="value" tone="{tone}">{level}%</text>
    </row>
    <text style="small" tone="dim" visible="{hot}">Running hot</text>
  </column>
</mount>

const view = await ink.load('panel.ink.html', {}, { title: 'Heat', fill: 0.5, level: 50, tone: 'accent', hot: false });
view.set({ fill: 0.8, level: 80, tone: 'warning', hot: true });

Lists

A <list> repeats one tag for each item of a list in the data. items names the list; key names the field each item is known by, so REDnode can tell which item changed, moved or left.

<mount layer="hud" anchor="top-right" x="-40" y="120">
  <column gap="6">
    <text style="title">Bounty board</text>
    <list items="contracts" key="id" gap="4">
      <row gap="12">
        <text style="body">{name}</text>
        <text style="value">{reward} &#8364;$</text>
      </row>
    </list>
  </column>
</mount>

const board = await ink.load('board.ink.html', {}, { contracts: [] });
board.set({ contracts: [{ id: 1, name: 'Watson', reward: 1500 }, { id: 2, name: 'Kabuki', reward: 900 }] });

Inside the list, {name} reads the item’s own field first, then the outer data. A list takes direction="row" to lay its items side by side (a column by default), and gap and pad like a panel. When the list changes, only the items that changed are sent: a new item adds widgets, a removed one takes its widgets away, and the others stay.

HTML entities work in texts: € is the euro sign, & an ampersand, < a <.

Game values with no round trip

Some values change every frame, such as V’s health. Instead of sending them from your script, bind a text or a bar to one: the game reads it each frame and changes the widget only when what it shows changes. Your script sends nothing after the panel is loaded.

<mount layer="hud" anchor="left" x="80" y="200">
  <row gap="12" align="center">
    <text style="small" tone="dim">Health</text>
    <bar bind="player.health" of="player.healthMax" width="220" height="6" />
    <text style="small" tone="accent" bind="player.health" format="{{value}} HP" />
  </row>
</mount>

format says how the value shows: {value} stands for it, written {{value}} in markup so it isn’t read as a slot. decimals sets the decimals (0 by default). A bar’s of is what the value is out of: a number, or another game value (100 if left out).

Loading it from your script

Each of these answers the same view, whichever way you loaded it. ink.load and ink.parse throw an error you can catch:

try {
  view = await ink.load('panel.ink.html', {}, data());
} catch (err) {
  console.log(`The panel did not load: ${err.message}`); // panel.ink.html:7:11: ...
}

Events: checked now, firing later

An attribute starting with on, such as onclick="track", names a function of the handlers, the second argument of ink.load. REDnode checks today that the function exists, and refuses the markup if it doesn’t:

import * as handlers from './handlers.mjs'; // exports track()
const view = await ink.load('panel.ink.html', handlers, data);

No event fires yet: clicking ink widgets comes with phase I3, Input. Until then, put controls the player uses in an overlay window, as the UI Workbench’s template does with a slider in a ui window that drives the panel.

Good to know

Learn from the samples

The full reference, with every tag’s properties and the design behind them, is REDnode’s Native game UI page and the ink API reference. The example apps page shows the Ink markup sample running in a preview.

Last reviewed 2026-11-03. Something wrong or missing? Tell us on Discord or open an issue.