https://github.com/hcodes/jstohtml
Render HTML using JavaScript objects
https://github.com/hcodes/jstohtml
html-template javascript nodejs
Last synced: about 1 year ago
JSON representation
Render HTML using JavaScript objects
- Host: GitHub
- URL: https://github.com/hcodes/jstohtml
- Owner: hcodes
- License: mit
- Created: 2014-09-03T08:52:05.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T15:10:21.000Z (over 3 years ago)
- Last Synced: 2025-03-22T06:51:15.108Z (about 1 year ago)
- Topics: html-template, javascript, nodejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/jstohtml
- Size: 699 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
jstohtml
========
[](https://www.npmjs.com/package/jstohtml)
[](https://www.npmjs.com/package/jstohtml)
[](https://bundlephobia.com/result?p=jstohtml)
[](https://packagephobia.com/result?p=jstohtml)
Compact record format HTML at JavaScript.
## Usage
### Browser
```HTML
console.log(jstohtml({c: 'Hello world!'}));
// <div><Hello world!</div>
```
### Node.js
```
npm install jstohtml --save-dev
```
```js
import jstohtml from 'jstohtml';
console.log(jstohtml({c: 'Hello world!'}));
```
## Examples
### Elementary
| Input | Output |
| ----------- | ----------- |
|`jstohtml('Hello world!');`|`Hello world!`|
|`jstohtml({});`|`
`|
|`jstohtml({cl: 'main'});`|``|
|`jstohtml({cl: ['main', 'red']});`|``|
|`jstohtml({title: 'My title', 'data-a': 123, style: 'font-size: 2em'});`|``|
|`jstohtml({t: 'p', cl: ['main', 'red'], c: 'Content'});`|`Content
`|
|`jstohtml([]);`| |
|`jstohtml([{}, {}]);`|``|
|`jstohtml([{c: {c: 'Content'}}]);`|`Content`|
|`jstohtml([{c: [{c: 'Content1'}, {c: 'Content2'}] }]);`|`
Content1
Content2
`|
### BEM
| Input | Output |
| ----------- | ----------- |
|`jstohtml({b: 'example'}); // block`|`
`|
|`jstohtml({b: 'example', e: 'elem'}); // block, elem`|``|
|`jstohtml({b: 'example', m: {a: true, b: 'val'}}); // block, mod`|``|
|`jstohtml({b: 'example', e: 'elem', m: {a: true, b: 'val'}}); // block, elem, mod`|``|
### Complex
```JavaScript
jstohtml([
{
c: 'Menu:'
},
{
t: 'ul', // tag
cl: ['menu', 'menu_theme-normal'], // class attribute
c: [ // content or children
{
t: 'li',
cl: 'menu-option',
title: '1', // attribute
'data-first': 'yes', // data attribute
//...
c: '1'
}, {
t: 'li',
cl: 'menu-option',
title: '2'
c: '2'
}, {
t: 'li',
cl: 'menu-option',
title: '3',
c: '3'
}
]
}
]);
```
```HTML
Menu:
```
## [License](./LICENSE)