HTML-first reactive library

Live interfaces from plain HTML and JSON.

ElectricHTML is a tiny browser library for wiring JSON responses straight into the DOM with declarative attributes. It is meant for dashboards, operational tools, simple status views, and HTML-first interfaces that should stay small.

See the markup Open repository

https://api.wheretheiss.at/v1/satellites/25544

ISS Live Tracker

Live API data

Current position

Latitude

Longitude

Altitude

Velocity

Visibility

Timestamp

Waiting for data...

Station:

NORAD ID:

<section>
  <div eh-data="latitude" eh-round="2"></div>
  <div eh-data="longitude" eh-round="2"></div>
  <div eh-data="altitude" eh-round="0" eh-postfix=" km"></div>
  <div eh-data="velocity" eh-round="0" eh-postfix=" km/h"></div>
</section>

<script
  eh-source="https://api.wheretheiss.at"
  eh-data-route="/v1/satellites/25544"
  src="./electric-html.js"
></script>

Live demo: this is real ISS telemetry updating on the page through ElectricHTML bindings.

Bind Use eh-data with nested JSON paths.

Format Apply eh-prefix, eh-postfix, eh-round, and eh-mult.

Trigger Use eh-get for lightweight GET-based actions.

Repeat Render arrays with a template child and eh-li bindings.

Principles

Small enough to understand at a glance.

ElectricHTML is most compelling when the goal is clarity. You can inspect the page, inspect the JSON, and see how the two map together without digging through framework abstractions.

HTML stays primary

The page remains normal markup. ElectricHTML adds a binding vocabulary instead of replacing the authoring model.

Good for server-rendered pages

JSON becomes the interface contract

A simple API response can drive headlines, status values, metrics, lists, and lightweight user actions.

Nested paths supported

Useful before a full SPA is justified

There is a wide middle ground between static HTML and a large app shell. ElectricHTML is aimed squarely at that space.

Especially for dashboards and tools

Example

Markup you can still read quickly.

The point is not novelty. The point is staying close to the metal: plain HTML, a small script, and values flowing in from JSON.

Actions eh-get, eh-triggers, and eh-provides support simple request flows.

Lists Point eh-data at an array and fill row fields with eh-li.

system-panel.html

<section>
  <h2 eh-data="name"></h2>
  <p eh-data="status"></p>
  <p
    eh-data="cpu.load"
    eh-postfix="%"
    eh-round="0"
  ></p>
</section>

<button eh-get="/api/refresh" eh-provides>
  Refresh now
</button>

For the pages that want live data, not a giant app shell.

ElectricHTML fits operational UIs, monitoring pages, internal tools, wallboards, and focused prototypes where the simplest path from backend state to UI is usually the best one.