# json2html: HTML templating from JSON in plain JavaScript

> json2html renders JSON objects into HTML using templates that are themselves JSON, written in ordinary JavaScript, with events embedded in the template and components that can be reused. The payoff is one codebase that runs in the browser and on the server, and the cost is a template format nobody else speaks.

**moappi/json2html** — Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js. 

- Repository: https://github.com/moappi/json2html
- Website: https://www.json2html.com
- Stars: 641 · Forks: 102
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/moappi-json2html

## A template is a JSON object, not a markup file

The README describes json2html as an open source javascript library that uses json templates to render JSON objects into HTML, with the aim of building fast, interactive client side templates using nothing but javascript. The feature list makes the design explicit: native JS templates that work both the client and server, interactive with embedded events directly in your templates, reusable components, the ability to dynamically update parts of your rendered templates when changes occur, simple inline js functions for complex logic, and 100% javascript so there is no need to learn a special syntax.

That last point is the one to weigh. A templating system normally asks you to learn its own language, with its own delimiters, its own escaping rules and its own control flow. Here the template is a JSON object, the values are JavaScript, and the logic is a function inside the object. The payoff is that a template is data, which means it can be built at runtime, sent over a wire, stored, and validated by the same code that handles your other JSON.

The cost is that the output is a description of HTML rather than HTML. There is no markup to read, and the structure of a page is expressed in nested objects. Whether that is a better way to work depends entirely on whether your team already thinks in JSON.

The library is free to use under the MIT license, and the full documentation lives on json2html.com rather than in the repository, which is worth knowing before you start.

## The <> key names the tag, text and html fill it

The rendering call in the README shows the whole shape of the format:

```javascript
json2html.render(
    [
        {"name": "Sasha", "age":27},
        {"name": "Bobby", "age":45}
    ], 
    {"<>": "li", "html":[
    	{"<>": "span", "text": "${name} (${age} years old)"}
      ]});
```

The first argument is the data, an array of two objects. The second is the template, and the convention is that the `<>` key holds the tag name, so `<>` set to `li` means a list item. The `html` key holds child content, and `text` holds a text node, and the `${name}` syntax interpolates from the data.

The output is correspondingly plain:

```html
<li>
	<span>Sasha (27 years old)</span>
</li>
<li>
	<span>Bobby (45 years old)</span>
</li>
```

Two details in that example are worth noting. The template is applied per item of the array, so the same template renders one list item for each record. And the interpolation is inside a plain string, so the value is placed in the text node rather than parsed as markup, which is the safe default and the reason the format does not need a separate escaping story for the common case.

## Events are part of the template, not an afterthought

The jQuery section of the README makes the strongest claim in the project, and it is a claim about workflow rather than about performance. You can embed events directly in your templates, and the instruction is to forget attaching your events after you have rendered your templates.

The example is short:

```javascript
 {"<>":"button","text":"Click Me","onclick":(e)=>{
	alert("You just clicked this");
```

The `onclick` key holds an actual JavaScript function, arrow function syntax included, so the template is executable rather than merely declarative. That is the difference between a template that produces a document and a template that produces a wired-up document, and it removes the class of bug where the handler is attached to an element that a later re-render replaces.

The rendered result is deliberately ordinary:

```html
<button>Click Me</button>
```

What makes that work is the same inline-function approach as the template itself. Complex logic goes in an inline js function, so there is one place to look for behaviour, and the trade is that a template with behaviour in it is no longer a pure description of markup.

## Two packages, one template format

The npm distribution is `node-json2html`, and the installation is a single command:

```bash
	npm install node-json2html
```

The server-side usage from the README is a require and a call:

```javascript
	const json2html = require('node-json2html');

	let html = json2html.transform([{'name':'Bob','fruit':'Bananas'},{'name':'Rick','fruit':'Apples'}],{"<>":"div","text":"${name} likes ${fruit}"});
```

Note the method name. On the server the call is `transform`, and the result is a string of HTML. In the browser the entry point is `render`, which takes the same template and produces DOM, which is why the feature list can promise templates that work both the client and server with the same template object.

TypeScript is covered too, with a default import and a destructured one:

```javascript
  import json2html from 'node-json2html'; //Import module
  const { render, component } = json2html; // Import methods from Json2html
```

The `component` export in that line is the reusable component piece of the feature list, exposed alongside the two render functions. The package manifest has a main entry of node.json2html.js, an engines field of `*` for node, and an empty dependencies object, so the runtime footprint is the library itself and nothing else. There is a separate TypeScript declaration file, node.json2html.d.ts, in the repository root.

## Partial updates, components and the examples directory

The feature list claims that you can dynamically update parts of your rendered templates when changes occur, and the repository's examples directory is where that is demonstrated.

The example files are named after the features they show: arrays.html, assign.html, components.html, events.html, index.html, jquery.html, props.html, refresh.html, simple.html, table.html and wrapper.html. The names are a compact index of what the library is for. `simple` and `table` are the basic cases, `events` and `jquery` are the interaction cases, `components` and `wrapper` are the reuse cases, `props` and `assign` are about where values come from, `refresh` is the partial update case, and `arrays` is the iteration case.

That last cluster is the one with real architectural weight. Updating one part of a rendered template without re-rendering everything is the difference between a UI that resets its scroll position on every data change and one that does not, and it is the kind of capability that is much easier to provide when the template is data rather than a string of markup. Once the template is an object you can hold a reference to, re-rendering a subtree is a smaller problem than re-rendering a document.

The examples are plain HTML files in the repository, so they can be opened directly in a browser, which is also how the browser test package is run.

## Mocha for tests, a benchmark script, and no runtime dependencies

The project ships its own quality tooling in a small way, and the README describes it in two short paragraphs.

The test command runs mocha:

```bash
	npm run test
```

and it will run 90 or more tests. The README also mentions a browser test package that can be run by opening the test page at /test/browser/index.html, which is the way to exercise the DOM-producing side of the library, since the mocha run covers the logic.

The benchmark command is separate:

```bash
	npm run benchmark
```

and it will run 5 simple benchmarks with up to 200,000 iterations, using the benchmark.js file at the repository root.

The package manifest shows the scale of the dependency footprint. The dependencies object is empty and the optional dependencies object is empty, and the only development dependency is mocha, at the latest tag. The scripts section is two entries, `test` running mocha and `benchmark` running node on the benchmark file. The repository root holds json2html.js for the browser, node.json2html.js for the server, the declaration file, and directories for test, examples and the benchmark.

A library with no runtime dependencies and a single dev dependency is unusual for a project of this age, and it is the main reason the same template code can run in a browser without a build step.

## Version 3.4.0, MIT licensed, and documentation that lives elsewhere

The licence is MIT, with the LICENSE file at the repository root, and the README states that the library is free to use under it.

The recent releases are 3.4.0 from 2026-08-14, 3.3.3 from 2025-02-22 and 3.3.2 from 2025-02-05. The repository is not archived and the last push was on 2026-08-14, the same day as the newest release, so the branch and the published version are in step.

The version number is the one thing to check before you write code against it. This is a 3.x library, and the API in the README, with `render`, `transform` and `component`, is the 3.x API. A tutorial written against a 2.x release of this project will not match.

The documentation situation is the other thing to note. The README says the full documentation is on json2html.com, and the repository itself is deliberately thin on prose: an example, the installation, the usage snippets and the two commands for testing and benchmarking. There is no changelog file at the root and no architecture document, so if you need to understand a corner of the format, the keyword documentation on the site is the place to look rather than the source, and the examples directory is the other source of truth.

The package manifest names the author as Chad Brown and the homepage as json2html.com, and the repository url points at the git remote for the project.

## Conclusion

json2html fits a team that already works with JSON everywhere and wants one templating mechanism on both the client and the server, and that wants events bound inside the template rather than attached afterwards. It is the wrong choice if you need a templating language people can read in another role, since the template is a JSON object and not markup, and the wrong choice for a project that has standardised on a framework's own templating. Verify first that you are on the 3.x line, since the published version is 3.4.0 and the API is the 3.x one, and read the keyword documentation on json2html.com, because the README deliberately defers most detail to that site.

## FAQ

### How do I install json2html for Node.js?

The npm package is node-json2html and the installation command is npm install node-json2html. On the server you then require the module and call the transform method, while the browser build exposes render, which produces DOM.

### How are templates written in json2html?

A template is a JSON object in which the <> key holds the tag name, the html key holds child content and the text key holds a text node, with ${name} style interpolation from the data. The README example renders a li containing a span with the name and age of each record in an array.

### Can I attach event handlers in a json2html template?

Yes. The README shows an onclick key holding an inline JavaScript function, and states that you can forget attaching your events after you have rendered your templates, with the library usable alongside jQuery.

### How do I run the json2html tests and benchmarks?

npm run test runs 90 or more tests using mocha, and there is a browser test package that can be run by opening /test/browser/index.html. npm run benchmark runs 5 simple benchmarks with up to 200,000 iterations using the benchmark.js file in the repository root.

### What licence is json2html released under?

MIT, with the LICENSE file at the repository root, and the README states the library is free to use under it. The published version is 3.4.0, and the package has no runtime dependencies.

## Sources

- [License: MIT](https://github.com/moappi/json2html/blob/master/LICENSE)
- [moappi/json2html on GitHub](https://github.com/moappi/json2html)
- [Project website](https://www.json2html.com)
- [README](https://github.com/moappi/json2html/blob/master/README.md)
- [Releases](https://github.com/moappi/json2html/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/moappi-json2html