🧩 lightweight & powerful framework
FEATURES:
- Packed
main.js
only<~ 13kb
(gzip) - Not extras syntax, all in js.
- Less virtual dom, always real dom.
- Hooks without any restrictions.
- Extremely high performance, most renders do not require diff.
- Develop applications in any style,
react
vue
solid
rxjs
evenelm
style. - Ubiquitous responsiveness, even across clients and across endpoints (WIP)
<script type="importmap">
{
"imports": {
"@rhjs/core": "https://unpkg.com/@rhjs/core@latest/dist/main.module.mjs",
"@rhjs/hooks": "https://unpkg.com/@rhjs/hooks@latest/dist/main.module.mjs",
"@rhjs/tag": "https://unpkg.com/@rhjs/tag@latest/dist/main.module.mjs"
}
}
</script>
<div id="app"></div>
<script type="module">
import { html } from "@rhjs/tag";
document.body.append(
html`
<h1>Hello world, @rhjs 🎉</h1>
`
)
</script>
<script type="importmap">
{
"imports": {
"@rhjs/core": "https://unpkg.com/@rhjs/core@latest/dist/main.module.mjs",
"@rhjs/hooks": "https://unpkg.com/@rhjs/hooks@latest/dist/main.module.mjs",
"@rhjs/tag": "https://unpkg.com/@rhjs/tag@latest/dist/main.module.mjs"
}
}
</script>
<div id="app"></div>
<script type="module">
import { mount } from "@rhjs/core";
import { createState } from "@rhjs/hooks";
import { html } from "@rhjs/tag";
const [count, setCount] = createState(0);
mount(
"#app",
html`
<h1>Hello world, @rhjs 🎉</h1>
<button onclick=${() => setCount((c) => c + 1)}>
count: ${count}
</button>
`
);
</script>
online in codesandbox
- playground: https://zhzluke96.github.io/rhjs-playground/
- template hub: 🚧
- component hub: 🚧
Feel free to dive in! Open an issue or submit PRs.
Code is licensed under the Apache License 2.0.