Interactive HTML,
in plain sentences.

Nobelium is a small language that lives inside your HTML. It has its own parser and interpreter, and it never uses eval(). Write what you want to happen and skip the boilerplate.

<!-- index.html -->
<button id="menuButton">Open menu</button>

<nobelium>
  when click "#menuButton" {
    toggle "#menu"
  }
</nobelium>

Getting started

1. Download nobelium.js from the download section and put it next to your html file.

2. Add it to your page, then write a block:

<script src="nobelium.js"></script>
<h2 id="n">0</h2>
<button id="inc">+1</button>

<nobelium>
  let count = 0
  when click "#inc" {
    count = count + 1
    set text "#n" to count
  }
</nobelium>

3. Open the page. Click the button. That is the whole setup. Selectors are always strings in quotes, like css: "#id", ".class".

Tip: if your code uses < or &, put it in <script type="text/nobelium"> instead of <nobelium> so the html parser leaves it alone. Standalone files work too: <nobelium src="app.nbm"></nobelium> (needs a web server or github pages).

Examples

Download

nobelium.js is the whole language in one file (about 15 kb, no dependencies). Or copy the four files in src/ (lexer, parser, interpreter, runtime). Works in any modern browser, nothing to install.

Roadmap