contents/h3.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
-----
id: h3
github: h3
home: /h3/
title: "H3"
site: "https://h3.js.org"
subtitle: "A tiny, extremely minimalist JavaScript microframework"
summary: "A tiny, extremely minimalist JavaScript microframework"
content-type: project
active: true
download: "https://github.com/h3rald/h3/releases/download/"
version: 0.11.0
versionLabel: "Jittery Jem'Hadar"
docs: /h3/H3_DeveloperGuide.htm
-----
**H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.
H3 is also:
- **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js).
- **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar).
- **easy** to learn, its API is comprised of only seven methods and two properties.
### I'm sold! Where can I get it?
Here, look, it's just one file:
<a href="https://raw.githubusercontent.com/h3rald/h3/v{{$version}}/h3.js" target="_blank" class="button primary">Download v{{$version}} ({{$versionLabel}})</a>
Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.
### Hello, World?
Here's an example of an extremely minimal SPA created with H3:
```js
import { h3, h } from "./h3.js";
h3.init(() => h("h1", "Hello, World!"));
```
This will render a `h1` tag within the document body, containing the text `"Hello, World!"`.
### Something more complex?
Have a look at the code of a [simple todo list](https://github.com/h3rald/h3/tree/master/docs/example) ([demo](https://h3.js.org/example/index.html)) with several components, a store and some routing.
|