# uhtml
**Repository Path**: mirrors_WebReflection/uhtml
## Basic Information
- **Project Name**: uhtml
- **Description**: A micro HTML/SVG render
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2025-12-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# uhtml
[](https://www.npmjs.com/package/uhtml) [](https://github.com/WebReflection/uhtml/actions) [](https://coveralls.io/github/WebReflection/uhtml?branch=main) [](https://webreflection.github.io/csp/#-csp-strict)
**Social Media Photo by [Andrii Ganzevych](https://unsplash.com/@odya_kun) on [Unsplash](https://unsplash.com/)**
- - -
## Warning ⚠️
I'm on vacation! The fastest version and most battle tested version of this library is **v4**.
If you are using **v4**, please keep doing that!
If you're happy to try **v5** please file issues in here, don't expect me to react out of tweets, and thank you for helping me out with use cases I couldn't even think about.
**v5** is a rewrite from scratch based on another library (which is *Python based*) that works perfectly fine **but** it doesn't have a reactivity story fully attached yet.
This rewrite feels good, it avoids unnecessary loops, but it's also naively based on *signals* for everything that was way easier to control before ... *a whole render* each time, never atomic, never considering edge cases around conditional arrays and what not.
I understand, now that signals are in, everyone is going to use signals for everything, as a distributed shared state of everything you are doing, but as a person that alaywas provided libraries to keep it simple, I couldn't even think about some of the scenarios you are "*abusing*" (no offence, my shortsighting) signals for, so my deepest apologies if the current state of **v5** cannot meet your expectations, I've tried my best, and unfortunately rushed a little bit, with this release, but all the ideas behind represent where I want to go from now on.
Again, apologies for not delivering like I've done before but be assured all the dots will be soon connected in a better way, or at least one that works reliably 👋
P.S. **v4** is right here: https://github.com/WebReflection/uhtml/tree/v4
- - -
A minimalistic library to create fast and reactive Web pages.
```html
```
*uhtml* (micro *µ* html) offers the following features without needing specialized tools:
* *JSX* inspired syntax through template literal `html` and `svg` tags
* *React* like components with *Preact* like *signals*
* compatible with native custom elements and other Web standards out of the box
* simplified accessibility via `aria` attribute and easy *dataset* handling via `data`
* developers enhanced mode runtime debugging sessions
test in [codepen](https://codepen.io/WebReflection/pen/VYvbddv?editors=0010)
```js
import { html, signal } from 'https://esm.run/uhtml';
function Counter() {
const count = signal(0);
return html`
`;
}
document.body.append(
html`<${Counter} />`
);
```
- - -
## Syntax
If you are familiar with *JSX* you will find *uhtml* syntax very similar:
* self closing tags, such as ``
* self closing elements, such as `...`
* object spread operation via `<${Component} ...${{any: 'prop'}} />`
* `key` attribute to ensure *same DOM node* within a list of nodes
* `ref` attribute to retrieve the element via effects or by any other mean
The main difference between *uhtml* and *JSX* is that *fragments* do **not** require `<>...` around:
```js
// uhtml fragment example
html`
first element
...
last element
`
```
### Special Attributes
On top of *JSX* like features, there are other attributes with a special meaning:
* `aria` attribute to simplify *a11y*, such as ``
* `data` attribute to simplify *dataset* handling, such as ``
* `@event` attribute for generic events handling, accepting an array when *options* are meant to be passed, such as `