Overview

domstatejsx is a web frontend library that lets you build applications with the following features:

1. Render DOM elements with JSX
2. Keep your application’s state in the DOM. No need to constantly react to state changes by re-rendering parts of your application
3. Structure your application with (reusable) components that contain their behaviour and expose methods so that they can be interacted with

Quickstart

JSX expressions return native DOM elements:

document.body.append(<h1>hello world</h1>);

The above is roughly equivalent to:

const element = document.createElement('h1');
element.textContent = 'hello world';
document.body.append(element);

JSX expressions can also render components, which are simply functions that return DOM elements:

A counter Copy

Source

import { useIntContent, useRefs } from 'domstatejsx';

export default function Counter() {
  const [countSpan] = useRefs();
  const [, setCount] = useIntContent(countSpan);

  function handleClick() {
    setCount((prev) => prev + 1);
  }

  return (
    <>
      <div>
        <button onClick={handleClick}>Click me</button>
      </div>
      <div>
        Count: <span ref={countSpan}>0</span>
      </div>
    </>
  );
}