or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

browser-integration.mdcomponents.mdindex.mdrendering.mdutilities.md
tile.json

tessl/npm-node-json2html

HTML templating in pure javascript that transforms JSON objects into HTML using JavaScript template objects

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/node-json2html@3.3.x

To install, run

npx @tessl/cli install tessl/npm-node-json2html@3.3.0

index.mddocs/

json2html

json2html is a pure JavaScript templating library that transforms JSON objects into HTML using JavaScript template objects. It provides both client-side and server-side rendering capabilities with embedded event handling, reusable components, dynamic template updates, and inline JavaScript functions for complex logic.

Package Information

  • Package Name: node-json2html
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install node-json2html

Core Imports

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

For TypeScript:

import json2html from 'node-json2html';
const { render, component } = json2html;

Basic Usage

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

// Basic template rendering
const data = [
  {"name": "Sasha", "age": 27},
  {"name": "Bobby", "age": 45}
];

const template = {
  "<>": "li", 
  "html": [
    {"<>": "span", "text": "${name} (${age} years old)"}
  ]
};

const html = json2html.render(data, template);
console.log(html);
// Output: <li><span>Sasha (27 years old)</span></li><li><span>Bobby (45 years old)</span></li>

Architecture

json2html is built around several key components:

  • Template Engine: Core rendering system that processes JSON templates and data objects
  • Interactive HTML (iHTML): Internal object type that combines HTML with event handlers and triggers
  • Component System: Reusable template components with registration and retrieval
  • Event System: Embedded event handling within templates for client-side interactivity
  • String Interpolation: ${property} syntax for dynamic data binding
  • Browser Extensions: jQuery and native DOM integration for client-side usage

Capabilities

Template Rendering

Core template rendering functionality that transforms JSON data into HTML using JavaScript template objects.

/**
 * Renders JSON object to HTML string using template
 * @param {object|string} obj - JSON object, array, or JSON string to render
 * @param {object} template - json2html template (object/array/JSON string)
 * @param {object} [options] - Optional configuration
 * @param {object} [options.props] - Properties for template rendering
 * @param {object} [options.components] - Local component definitions
 * @param {string} [options.output="html"] - Output type: "html" or "ihtml"
 * @returns {string|iHTML} Rendered HTML string or iHTML object
 */
function render(obj, template, options);

Template Rendering

Component Management

System for creating and managing reusable template components that can be referenced by name in templates.

/**
 * Add a single component or multiple components
 * @param {string|object} name - Component name or object with name:template pairs
 * @param {object} [template] - Template object (required when name is string)
 */
function add(name, template);

/**
 * Retrieve a component template by name
 * @param {string} name - Component name
 * @returns {object|undefined} Component template or undefined if not found
 */
function get(name);

Component Management

Browser Integration

Client-side DOM manipulation and jQuery integration for interactive web applications.

/**
 * Render template and append/prepend/replace DOM element content
 * @param {object} obj - JSON object to render
 * @param {object} template - json2html template
 * @param {object} [options] - Options including method: "append", "prepend", "replace"
 * @returns {Element} The element for chaining
 */
Element.prototype.json2html(obj, template, options);

/**
 * jQuery version of render with DOM manipulation
 * @param {object} obj - JSON object to render
 * @param {object} template - json2html template
 * @param {object} [options] - Options including method for DOM insertion
 * @returns {jQuery} jQuery object for chaining
 */
$.fn.json2html(obj, template, options);

Browser Integration

Utility Functions

Helper functions for text encoding, DOM hydration, and component updates.

/**
 * Encodes HTML string to text by escaping HTML entities
 * @param {string} html - HTML string to encode
 * @returns {string} Text with HTML entities escaped
 */
function toText(html);

/**
 * Hydrates DOM elements with their events and update triggers
 * @param {Element|Element[]} parent - Element(s) to hydrate
 * @param {object} events - Event handlers object
 * @param {object} triggers - Update triggers object
 * @returns {object} this for chaining
 */
function hydrate(parent, events, triggers);

/**
 * Triggers component update by ID
 * @param {string} id - ID of component to update
 * @param {object} [obj] - Optional object to use for update
 */
function refresh(id, obj);

Utility Functions

Types

/**
 * Interactive HTML object that contains HTML and associated events/triggers
 */
class iHTML {
  constructor(html);
  
  /** HTML content string */
  html: string;
  
  /** Associated event handlers */
  events: object;
  
  /** Associated update triggers */
  triggers: object;
  
  /**
   * Append another iHTML object or HTML string
   * @param {iHTML|string} obj - Object to append
   * @returns {iHTML} This object for chaining
   */
  append(obj): iHTML;
  
  /**
   * Append HTML string to content
   * @param {string} html - HTML string to append
   * @returns {iHTML} This object for chaining
   */
  appendHTML(html): iHTML;
  
  /**
   * Returns object representation
   * @returns {object} Object with html, events, and triggers
   */
  toJSON(): object;
}