# velements
> Minimalistic JSX elements that do not require React
Latest version **1.0.3** (published 2019-08-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install velements
pnpm add velements
yarn add velements
bun add velements
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-08-24 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Zoran Ravic |
| Maintainers | zoranravic |
| Keywords | velement, element, virtual, jsx, react, node, ssr, vnode, dom, vdom |
## Links
- npm: https://www.npmjs.com/package/velements
- Repository: https://github.com/ZoranRavic/VElements
- Homepage: https://zoranravic.com/
- Issues: https://github.com/ZoranRavic/VElements/issues
- npm.io page: https://npm.io/package/velements
## Alternatives
- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2019-08-24
- 1.0.2 — 2019-08-24
- 1.0.1 — 2018-08-13
## README
# Virtual Elements
Use the power of JSX in your app without React!
Create elements using JSX:
```jsx
/* @jsx h */
import h from 'velements'; // es6
const {h} = require('velements'); // commonjs
const virtualElement = ;
```
Or in plain JavaScript:
```js
const virtualElement = h('div', { id: 'my-div' }, h('p', null, 'text'));
```
Then use them like regular DOM elements:
```js
document.getElementById('container').appendChild(virtualElement.toElement());
```
### Boost your templates
Handlebars templates are very limiting in terms of logic you can do inside of them
and writing helpers for every peace of logic can be challenging and time consuming.
Why not just write plane javascript functions:
```jsx harmony
/* @jsx h */
const myPage = (title, text) =>
{
return (
);
};
const app = (loggedIn, title, text) =>
{
return (
{header()}
{loggedIn ? loginPage() : myPage(title, text)}
);
}
const virtualElement = app(/*...*/);
```
You can treat a virtual element like a regular string:
```js
const str = virtualElement.toString();
const html = `${virtualElement}`;
```
This removes the need to compile templates and the resulting HTML is already minified.
This greatly improves server response time when doing Server Side Rendering.
### React Compatible
Make your code usable by both Vanilla JavaScript apps as well as React apps.
When you want to switch to React world you simply convert your element:
```js
const reactElement = virtualElement.toReactElement();
```
Or in your component:
```jsx
const MyReactComponent = (props) =>
{
return (
{virtualElement.toReactElement()}
);
}
```
It can also be rendered by react-dom:
```js
ReactDOM.render(
virtualElement.toReactElement(),
document.getElementById('container')
);
```
You can also inject React into the converter.
The default value is `React = require('react')`
```js
const reactElement = virtualElement.toReactElement(React);
```
---
_Source: https://npm.io/package/velements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._