zoijs

Quick Start

Build a working Zoijs app in about a minute — no install and no build step.

1. Create an HTML file#

Load Zoijs from a CDN with an import map, then point at your script:

<!DOCTYPE html>
<html>
  <head>
    <script type=class="tok-string">"importmap">
      { "imports": { "@zoijs/core": "https://esm.sh/@zoijs/core@1" } }
    </script>
  </head>
  <body>
    <div id=class="tok-string">"app"></div>
    <script type=class="tok-string">"module" src=class="tok-string">"./app.js"></script>
  </body>
</html>

2. Write the app#

Create app.js next to it:

import { html, mount, createState } from "@zoijs/core";

function Counter() {
  const count = createState(0);

  return html`
    <button onclick=${() => count.set(count.get() + 1)}>
      Clicked ${() => count.get()} times
    </button>
  `;
}

mount(Counter, "#app");

3. Run it#

Any static file server works:

npx serve .

Open the printed URL and click the button — that's a complete, working Zoijs app.

What just happened#

  • createState(0) is a reactive value.
  • ${() => count.get()} is a live binding — wrapping it in () => is what makes the text update.
  • mount(Counter, "#app") runs the component once and inserts it into the page.

That's the whole model. Next, walk through Getting Started for a fuller tour, or read Core Concepts to go deeper.

Pin a version (@zoijs/core@1) in production — never ship @latest to users.