# vidom

> Library to build UI

Latest version **0.12.1** (published 2021-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vidom
pnpm add vidom
yarn add vidom
bun add vidom
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.1 |
| Published | 2021-10-22 |
| First published | 2015-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 247.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dmitry Filatov |
| Maintainers | dfilatov |
| Keywords | virtual, dom, component, ui, react, ssr, reactive |

## Links

- npm: https://www.npmjs.com/package/vidom
- Repository: https://github.com/dfilatov/vidom
- Homepage: https://github.com/dfilatov/vidom#readme
- Issues: https://github.com/dfilatov/vidom/issues
- npm.io page: https://npm.io/package/vidom

## Dependencies (1)

- [csstype](https://npm.io/package/csstype.md) 3.0.7

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.12.1 (latest) — 2021-10-22
- 0.11.0-rc.5 (next) — 2018-12-05
- 0.12.0 — 2021-10-22
- 0.11.5 — 2021-04-16
- 0.11.4 — 2020-11-02
- 0.11.3 — 2019-12-10
- 0.11.2 — 2019-07-09
- 0.11.1 — 2019-07-05
- 0.11.0 — 2018-12-20
- 0.11.0-rc.4 — 2018-12-04
- 0.11.0-rc.3 — 2018-11-22
- 0.11.0-rc.2 — 2018-11-22
- 0.11.0-rc.1 — 2018-11-12
- 0.10.13 — 2018-11-07
- 0.10.12 — 2018-09-13
- … 177 more at https://npm.io/package/vidom/versions

## README

# vidom
[![Build Status](https://img.shields.io/travis/dfilatov/vidom/master.svg?style=flat-square)](https://travis-ci.org/dfilatov/vidom/branches)
[![NPM Version](https://img.shields.io/npm/v/vidom.svg?style=flat-square)](https://www.npmjs.com/package/vidom)
[![Dependencies](https://img.shields.io/david/dfilatov/vidom.svg?style=flat-square)](https://david-dm.org/dfilatov/vidom)
[![NPM Downloads](https://img.shields.io/npm/dm/vidom.svg?style=flat-square)](https://www.npmjs.org/package/vidom)
<!---[![Sauce Test Status](https://saucelabs.com/browser-matrix/dfilatov81.svg)](https://saucelabs.com/u/dfilatov81)/]-->

Vidom is just a library to build UI. It's highly inspired from [React](https://facebook.github.io/react/) and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React.

## Main features
  * Fast virtual DOM builder and patcher under the hood
  * Update batching and synchronization with browsers rendering lifecycle by default
  * Fast server-side rendering with ability to reuse existing DOM in the browsers also known as isomorphism
  * Easy and clear way to subscribe to DOM Events
  * API to build your own high-level components  
  * Namespaces support (e.g., SVG, MathML)
  * Ability to render multiple components without unwanted DOM wrappers
  * No extra markup in the result HTML
  * JSX support via [babel plugin](https://github.com/dfilatov/babel-plugin-vidom-jsx)
  * TypeScript support
  * Small footprint, 9KB after gzip
  * Zero dependencies
  
## Benchmarks
  * [repaint rate challenge](http://mathieuancelin.github.io/js-repaint-perfs/)
  * [vdom-benchmark](http://vdom-benchmark.github.io/vdom-benchmark/)
  * [uibench](https://localvoid.github.io/uibench/)
  * server-side rendering (nodejs 8.8.1)
```
                   mean time ops/sec
  vidom v0.9.23    0.505ms   1981
  inferno v3.10.1  0.511ms   1958
  preact v8.2.6    1.414ms   707
  react v16.0.0    1.479ms   676
  vue v2.5.2       8.883ms   113
```

## Playground
Try [live playground](http://dfilatov.github.io/vidom/playground/) to play with Vidom in your browser.

## Documentation
  * [Getting started](../../wiki/Getting-started)
  * [Tutorial](../../wiki/Tutorial)
  * [Top-level API](../../wiki/Top-Level-API)
  * [DOM Events API](../../wiki/DOM-Events-API)
  * [Component properties](../../wiki/Component-properties)
  * [Component lifecycle](../../wiki/Component-lifecycle)
  * [Component methods](../../wiki/Component-methods)
  * [Function component](../../wiki/Function-Component)
  * [JSX](../../wiki/JSX)
  * [Isomorphism](../../wiki/Isomorphism)
  * [FAQ](../../wiki/FAQ)
  * [Changelog](../../releases)

## Tools
  * [Vidom inspector](https://github.com/dfilatov/vidom-inspector) developer tool which helps debug vidom-based applications
   
## Addons
  * [vidom-css-animation-group](https://github.com/dfilatov/vidom-css-animation-group) API for "appearance", "entering" and "leaving" animation via CSS transitions and animation
  * [vidom-ui](https://dfilatov.github.io/vidom-ui/) Set of basic UI components
  * [vidom-redux](https://github.com/dfilatov/vidom-redux) Redux bindings 
 
## Examples
  * [TodoMVC](http://dfilatov.github.io/vidom-todomvc/) ([source](https://github.com/dfilatov/vidom-todomvc))
  
## Thanks
  * [cdnjs](https://github.com/cdnjs/cdnjs) for library is avalaible on CDN.

---
_Source: https://npm.io/package/vidom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._