# 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/)**
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 `