A 33‑Line JavaScript Implementation of a Minimal React‑like Library

A London‑based Python engineer, Oliver Russell, recently built a playful 33‑line JavaScript library that "implements" React, demonstrating that a tiny amount of code can reproduce the core ideas of a modern UI framework.

The implementation revolves around four abstractions:

We pass a function that returns a virtual DOM representing the current state.

The library renders the virtual DOM into a real DOM in the browser.

When the state changes, the function is re‑executed to produce a new virtual DOM.

The library efficiently patches the real DOM so that it matches the new virtual DOM.

Because of its brevity, the library only supports virtual‑DOM creation, diffing, and rendering; advanced features such as lifecycle hooks, context, or a rich component model are omitted.

The source code (both commented and uncommented versions) is available on GitHub:

Uncommented: https://github.com/leontrolski/leontrolski.github.io/blob/master/33-line-react.js

Commented: https://github.com/leontrolski/leontrolski.github.io/blob/master/33-line-react-with-comments.js

The library draws inspiration from Mithril’s syntax and mainly exposes two functions:

m() : a Mithril‑style hyperscript helper that creates virtual DOM nodes.

m.render() : the mounting and rendering logic that patches the real DOM.

m() accepts three parameters:

A tag name (e.g., 'tr' ) optionally followed by dot‑separated class names.

An optional attribute object ( {string: any} ) containing all DOM attributes.

Any number of nested children, which can be other virtual DOM nodes or plain strings.

For example, a virtual DOM node looks like:

{
  tag: 'div',
  attrs: {},
  classes: [],
  children: [
    { tag: 'h3', attrs: {}, classes: [], children: ['current player: x'] },
    { tag: 'table', attrs: {}, classes: [], children: [
        { tag: 'tr', attrs: {}, classes: [], children: [ /* … */ ] }
      ] }
  ]
}

A simple ToDo demo built with the library is shown below (the full code is wrapped in ... to preserve formatting):

class toDoDemo {
  constructor() {
    this.todos = [];
    this.render = () => m.render(document.getElementById('example'), {children: [this.showToDos()]});
    this.render();
  }
  showToDos() {
    return m('div', [
      m('h3', 'ToDo示例'),
      m('input', {placeholder: '添加todo'}),
      m('button', {onclick: (e) => this.addTodo(e)}, '+'),
      m('ul', this.todos.map((item, i) => m('li', [
        m('span', item),
        m('button', {onclick: () => this.removeTodo(i)}, '-')
      ])))
    ]);
  }
  removeTodo(i) {
    this.todos.splice(i, 1);
    this.render();
  }
  addTodo(e) {
    const input = e.target.previousSibling;
    const todo = input.value;
    if (!todo.trim()) return;
    input.value = '';
    this.todos.push(todo);
    this.render();
  }
}
new toDoDemo();

Oliver also created a few example applications using the 33‑line library:

Noughts and Crosses – demo link

Calendar Picker – demo link

Snake – demo link

Readers are encouraged to study the 33‑line implementation and the accompanying examples to understand how a minimal virtual‑DOM system can be built from scratch.