SvenJS 3

A page in one file

You do not need npm. Save this as hello.html, open it in a browser, click the button.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/svenjs@3"></script>
  <script>
    const { create, render, html } = Svenjs;

    const App = create({
      initialState: { clicks: 0 },
      render() {
        return html`
          <button onClick=${() => this.setState({ clicks: this.state.clicks + 1 })}>
            ${this.state.clicks}
          </button>
        `;
      },
    });

    render(App, document.getElementById("app"));
  </script>
</body>
</html>

html\…`is a tagged template. It builds the same tree JSX would, without a compiler.${value}interpolates.onClick=${fn}` binds an event.

The playground edits this kind of file and has Copy HTML / Download .html.

Using a bundler and JSX instead? See Bundler.