Tiny wrapper that imports uhtml in the browser and uhtml/ssr in Node.js/Bun for quick & easy client and server-side rendering (SSR/SSG). With a few extra niceties.

All credits to Andrea Giammarchi for creating this mighty lib.

Example project using isum: ANSI.tools

The Main Idea™

Plain and web standards-based JS library, i.e. not a (meta) framework
Use render and html to render template literals
Use fine-grained reactivity with isum/reactive and @preact/signals-core

Use the provided document of isum and Vite (or something else that builds/bundles) and get SSG for free.

App

This runs in both browsers and runtimes like Node.js:

import { document, html, render } from 'isum';

export class App {
  constructor() {
    this.render();
  }

  handleClick(event) {
    console.log(event);
  }

  render() {
    const view = html`<button @click=${this.handleClick}>Hello!</button>`;

    render(document.getElementById('app'), view);
  }
}

Please refer to the µhtml docs for details.

Reactivity with Signals

Introduced in v1.1.0

Import the same from isum/reactive and get @preact/signals-core's fine-grained reactivity for free:

import { document, reactive } from 'isum/preactive';

const count = signal(0);

export function renderApp() {
  const render = reactive(effect); // must not call at root module level

  render(
    document.body,
    () =>
      // second argument must be a function
      html`<button onclick=${() => count.value++}>
        Clicks: ${count.value}
      </button>`
  );
}

This will render the initial values during SSG.

Please refer to the the µhtml docs for details.

Client-side

Bootstrap in index.js:

import { App } from './app.ts';

new App();

Browser

Initial template/container index.html:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id="app"></main>
    <script type="module" src="index.js"></script>
  </body>
</html>

SSG

Read template, render application, write result:

import { readFileSync, writeFileSync } from 'node:fs';
import initSSR from 'isum'; // must import same as in rest of app (e.g. 'isum/preactive')
import { renderApp } from './app.js';

const pages = {
  'index.html': () => renderApp()
};

for (const [filePath, render] of Object.entries(pages)) {
  const template = readFileSync(filePath, 'utf-8');
  const { document } = init(template);
  render();
  writeFileSync(filePath, document.toString());
}

This renders the <button> inside <main>.

This should scale well due to ESM live bindings. Here's an example build script.

Look ma, no bundler!

Run the app in the browser without a build step:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script type="importmap">
      {
        "imports": {
          "isum": "https://unpkg.com/isum@1.0.0/browser.js",
          "udomdiff": "https://unpkg.com/udomdiff@1.1.2/min.js",
          "uhtml": "https://unpkg.com/uhtml@4.7.1/keyed.js"
        }
      }
    </script>
  </head>
  <body>
    <main id="app"></main>
    <script type="module" src="index.js"></script>
  </body>
</html>

CSS imports?

Ignore any CSS imports in JS modules:

node --import isum/no-css build.js

Useful when using e.g. Vite. isum pairs great with Vite.

Keywords

isomorphic

uhtml

FAQs

What is isum?

Is isum well maintained?

Package last updated on 01 Jul 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

isum