Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moappi/json2html
Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js.
https://github.com/moappi/json2html
Last synced: 11 days ago
JSON representation
Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js.
- Host: GitHub
- URL: https://github.com/moappi/json2html
- Owner: moappi
- License: mit
- Created: 2011-12-29T06:13:25.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2023-12-19T00:04:37.000Z (11 months ago)
- Last Synced: 2024-05-19T14:34:59.372Z (6 months ago)
- Language: JavaScript
- Homepage: https://www.json2html.com
- Size: 149 KB
- Stars: 619
- Watchers: 33
- Forks: 104
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-htmx - json2html
- awesome-client-side - json2html - Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js - [Try it!](https://www.json2html.com/visualizer/#json-tab) (Template Engine / Video)
README
json2html
------------------
json2html is an open source javascript library that uses json templates to render JSON objects into HTML.
Build lightning fast, interactive client side templates using nothing but javascript.
Free to use under the MIT license.
www.json2html.com for full documentation.
Features
--------------
+ Native JS templates that work both the client and server
+ Interactive with embedded events directly in your templates
+ Dynamically update parts of your rendered templates when changes occur
+ 100% Javascript so no need to learn any new syntax: use inline js functions for complex logic
Example
--------------
```javascript
json2html.render(
[
{"name": "Sasha", "age":27},
{"name": "Bobby", "age":45}
],
{"<>": "li", "html":[
{"<>": "span", "text": "${name} (${age} years old)"}
]});
```
Will render the following html
```html
Sasha (27 years old)
Bobby (45 years old)
```
jQuery
=========
Use seemlessly with jQuery, oh did we also mention that you can embed events in your template? Forget attaching your events after you've rendered your templates.
```javascript
{"<>":"button","text":"Click Me","onclick":(e)=>{
alert("You just clicked this");
}};
```
Will render into the following html and will alert when clicked :)
```html
Click Me
```
Node.js
=========
Use your temlpates seemlessly on Node.js
Installation
------------
npm install node-json2html
Usage
-----
```javascript
const json2html = require('node-json2html');
let html = json2html.transform([{'name':'Bob','fruit':'Bananas'},{'name':'Rick','fruit':'Apples'}],{"<>":"div","text":"${name} likes ${fruit}"});
```
TypeScript:
```javascript
import json2html from 'node-json2html'; //Import module
const { render, component } = json2html; // Import methods from Json2html
```
www.json2html.com for full documentation.