DEV Community

idktoast
idktoast

Posted on AI-assisted

I built a small programming language that runs inside HTML (no eval)

Most page interactions are simple: open a menu, switch a tab, check a form.
In JavaScript that still means selecting elements, adding listeners, and
remembering the DOM API. I wanted to see how short it could be.

So I built Nobelium, a tiny language you write directly in your HTML:

<button id="b">Menu</button>
<ul id="menu" style="display:none"><li>Home</li></ul>

<nobelium>
  when click "#b" {
    toggle "#menu"
  }
</nobelium>
Enter fullscreen mode Exit fullscreen mode

How it works

It isn't a JavaScript framework. It has its own lexer, parser and a
tree-walking interpreter, all written in vanilla JavaScript. It never calls
eval() or Function(), so it works under a strict Content Security Policy.
One script tag, no build step.

What it can do

let n = saved("visits") or 0
save n + 1 as "visits"
set text "#v" to "you've been here {n + 1} times"

post "/api/items" with { name: "pen" } into item
every 1s { log "tick" }
animate "#box" to { left: 200 } over 600ms
Enter fullscreen mode Exit fullscreen mode

Events, lists and objects, text interpolation, http requests and streaming,
localStorage, timers, animation, tabs and accordions, importing between
files, and a built-in test runner.

Try it

Honest limits

It's a young project. No lambdas yet, imports need a web server, and it's not
meant to replace JavaScript for real apps. I'd love feedback on the syntax,
especially anything that feels confusing.

Top comments (0)