CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-node-json2html

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

browser-integration.mddocs/

Browser Integration

Client-side DOM manipulation and jQuery integration for interactive web applications. Provides seamless integration with existing DOM elements and jQuery-based workflows with automatic event hydration and dynamic updates.

Capabilities

DOM Element Extension

Extends native DOM elements with json2html rendering capabilities for direct integration with existing web pages.

/**
 * Render template and manipulate DOM element content
 * Available on all DOM Elements when json2html is loaded in browser
 * @param {object|array|string} obj - JSON object, array, or JSON string to render
 * @param {object|array} template - json2html template
 * @param {object} [options] - Configuration options
 * @param {string} [options.method="append"] - DOM manipulation method: "append", "prepend", or "replace"
 * @param {object} [options.props] - Properties for template rendering
 * @param {object} [options.components] - Local component definitions
 * @returns {Element} The element for method chaining
 */
Element.prototype.json2html(obj, template, options);

Usage Examples:

<!DOCTYPE html>
<html>
<head>
  <script src="json2html.js"></script>
</head>
<body>
  <div id="container"></div>
  <ul id="list"></ul>

  <script>
    // Append content to element
    const container = document.getElementById('container');
    container.json2html(
      { message: "Hello World" },
      { "<>": "p", "text": "${message}" }
    );
    // Appends: <p>Hello World</p>

    // Prepend items to list
    const list = document.getElementById('list');
    list.json2html(
      [{ name: "Item 1" }, { name: "Item 2" }],
      { "<>": "li", "text": "${name}" },
      { method: "prepend" }
    );
    // Prepends: <li>Item 1</li><li>Item 2</li>

    // Replace element content
    container.json2html(
      { title: "New Content" },
      { "<>": "h1", "text": "${title}" },
      { method: "replace" }
    );
    // Replaces container content with: <h1>New Content</h1>
  </script>
</body>
</html>

jQuery Integration

Provides jQuery plugin methods for seamless integration with jQuery-based applications and workflows.

/**
 * jQuery plugin for json2html rendering with DOM manipulation
 * Available when jQuery is loaded before json2html
 * @param {object|array|string} obj - JSON object, array, or JSON string to render  
 * @param {object|array} template - json2html template
 * @param {object} [options] - Configuration options
 * @param {string} [options.method="append"] - DOM manipulation method: "append", "prepend", or "replace"
 * @param {object} [options.props] - Properties for template rendering
 * @param {object} [options.components] - Local component definitions
 * @returns {jQuery} jQuery object for chaining
 */
$.fn.json2html(obj, template, options);

/**
 * jQuery plugin for hydrating elements with events and triggers
 * @param {object} events - Event handlers object from iHTML rendering
 * @param {object} triggers - Update triggers object from iHTML rendering
 * @returns {jQuery} jQuery object for chaining
 */
$.fn.j2hHydrate(events, triggers);

jQuery Usage Examples:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="json2html.js"></script>
</head>
<body>
  <div id="content"></div>
  <div class="cards"></div>

  <script>
    $(document).ready(function() {
      // Basic jQuery rendering
      $('#content').json2html(
        { title: "Welcome", subtitle: "Getting started" },
        {
          "<>": "div",
          "class": "header",
          "html": [
            { "<>": "h1", "text": "${title}" },
            { "<>": "h2", "text": "${subtitle}" }
          ]
        }
      );

      // Render multiple items to multiple elements
      $('.cards').json2html(
        [
          { title: "Card 1", content: "First card content" },
          { title: "Card 2", content: "Second card content" }
        ],
        {
          "<>": "div",
          "class": "card",
          "html": [
            { "<>": "h3", "text": "${title}" },
            { "<>": "p", "text": "${content}" }
          ]
        }
      );

      // Replace content with method chaining
      $('#content')
        .empty()
        .json2html(
          { message: "Updated content" },
          { "<>": "div", "class": "updated", "text": "${message}" },
          { method: "replace" }
        )
        .fadeIn();
    });
  </script>
</body>
</html>

Interactive Events

Browser integration automatically handles event attachment and provides interactive functionality with embedded event handlers.

/**
 * Interactive event handling in templates
 * Events are automatically attached when rendering with DOM methods
 */
interface InteractiveTemplate {
  /** Click event handler */
  "onclick"?: (event: Event) => void;
  
  /** Change event handler for form elements */
  "onchange"?: (event: Event) => void;
  
  /** Mouse events */
  "onmouseover"?: (event: Event) => void;
  "onmouseout"?: (event: Event) => void;
  
  /** Keyboard events */
  "onkeyup"?: (event: Event) => void;
  "onkeydown"?: (event: Event) => void;
  
  /** Form events */
  "onsubmit"?: (event: Event) => void;
  "onfocus"?: (event: Event) => void;
  "onblur"?: (event: Event) => void;
  
  /** Custom json2html ready event */
  "onready"?: (event: Event) => void;
  
  /** Any standard DOM event */
  [key: `on${string}`]: (event: Event) => void;
}

Interactive Event Examples:

// Button with click handler
const template = {
  "<>": "button",
  "text": "Click me",
  "onclick": function(e) {
    e.preventDefault();
    alert("Button clicked!");
    console.log("Current data:", this); // Access to current data object
  }
};

document.getElementById('container').json2html({}, template);

// Form with change handlers and validation
const formTemplate = {
  "<>": "form",
  "html": [
    {
      "<>": "input",
      "type": "text",
      "name": "username",
      "value": "${username}",
      "onchange": function(e) {
        console.log("Username changed:", e.target.value);
        // Validation logic
        if (e.target.value.length < 3) {
          e.target.style.borderColor = "red";
        } else {
          e.target.style.borderColor = "green";
        }
      }
    },
    {
      "<>": "button",
      "type": "submit",
      "text": "Submit",
      "onclick": function(e) {
        e.preventDefault();
        const form = e.target.closest('form');
        const formData = new FormData(form);
        console.log("Form data:", Object.fromEntries(formData));
      }
    }
  ]
};

// Ready event for initialization
const cardTemplate = {
  "<>": "div",
  "class": "card",
  "html": { "<>": "h3", "text": "${title}" },
  "onready": function(e) {
    // Called when element is added to DOM
    console.log("Card initialized:", this.title);
    e.target.style.opacity = "0";
    $(e.target).fadeIn(); // jQuery animation
  }
};

Two-Way Data Binding

Browser integration supports two-way data binding for form elements using the ">>" property.

/**
 * Two-way data binding for form elements
 * Automatically updates the source data object when form values change
 */
interface DataBindingTemplate {
  /** Path to property for two-way binding */
  ">>"?: string;
  
  /** Supported on input, select, and textarea elements */
  "<>"?: "input" | "select" | "textarea";
}

Data Binding Examples:

// Two-way binding with input elements
const userData = { 
  name: "Alice", 
  email: "alice@example.com",
  preferences: { theme: "dark" }
};

const template = {
  "<>": "form",
  "html": [
    {
      "<>": "input",
      "type": "text",
      "value": "${name}",
      ">>": "name"  // Updates userData.name on change
    },
    {
      "<>": "input", 
      "type": "email",
      "value": "${email}",
      ">>": "email"  // Updates userData.email on change
    },
    {
      "<>": "select",
      ">>": "preferences.theme",  // Updates nested property
      "html": [
        { "<>": "option", "value": "light", "text": "Light" },
        { "<>": "option", "value": "dark", "text": "Dark", "selected": true }
      ]
    },
    {
      "<>": "button",
      "text": "Show Data",
      "onclick": function(e) {
        e.preventDefault();
        console.log("Current data:", userData);
        // Data object is automatically updated by two-way binding
      }
    }
  ]
};

document.getElementById('form-container').json2html(userData, template);

Dynamic Updates and Refresh

Browser integration supports dynamic component updates using trigger IDs and the refresh system.

/**
 * Dynamic update system using trigger IDs
 * Elements can be marked for updates and refreshed programmatically
 */
interface UpdateTemplate {
  /** Trigger ID for dynamic updates */
  "#"?: string;
}

/**
 * Trigger updates for elements with matching ID
 * @param {string} id - Trigger ID to update
 * @param {object} [obj] - Optional new data object
 */
function refresh(id, obj);

Dynamic Update Examples:

// Template with update trigger
const counterTemplate = {
  "<>": "div",
  "#": "counter-display",  // Trigger ID
  "html": [
    { "<>": "h3", "text": "Count: ${count}" },
    { 
      "<>": "button", 
      "text": "Increment",
      "onclick": function(e) {
        this.count++;
        json2html.refresh("counter-display", this);
      }
    }
  ]
};

const counterData = { count: 0 };
document.getElementById('counter').json2html(counterData, counterTemplate);

// External update trigger
setInterval(() => {
  counterData.count += 10;
  json2html.refresh("counter-display", counterData);
}, 5000);

// Multiple elements with same trigger ID
const listTemplate = {
  "<>": "li",
  "#": "user-list",
  "text": "${name} (${status})"
};

const users = [
  { name: "Alice", status: "online" },
  { name: "Bob", status: "offline" }
];

document.getElementById('users').json2html(users, listTemplate);

// Update all user list items
setTimeout(() => {
  users.forEach(user => user.status = "online");
  json2html.refresh("user-list", users);
}, 3000);

DOM Manipulation Methods

Browser integration provides three methods for DOM content manipulation:

/**
 * DOM manipulation methods
 */
// Append: Add content to end of element (default)
element.json2html(data, template); 
element.json2html(data, template, { method: "append" });

// Prepend: Add content to beginning of element  
element.json2html(data, template, { method: "prepend" });

// Replace: Replace entire element content
element.json2html(data, template, { method: "replace" });

Manipulation Method Examples:

<div id="container">
  <p>Existing content</p>
</div>

<script>
  const element = document.getElementById('container');
  
  // Append (default) - adds after existing content
  element.json2html(
    { message: "Appended" },
    { "<>": "p", "text": "${message}" }
  );
  // Result: <div><p>Existing content</p><p>Appended</p></div>
  
  // Prepend - adds before existing content
  element.json2html(
    { message: "Prepended" },
    { "<>": "p", "text": "${message}" },
    { method: "prepend" }
  );
  // Result: <div><p>Prepended</p><p>Existing content</p><p>Appended</p></div>
  
  // Replace - replaces all content
  element.json2html(
    { message: "Replaced" },
    { "<>": "p", "text": "${message}" },
    { method: "replace" }
  );
  // Result: <div><p>Replaced</p></div>
</script>

docs

browser-integration.md

components.md

index.md

rendering.md

utilities.md

tile.json