JSON To HTML & HTML To JSON Converter – JHson.js

JHson.js is a lightweight and fast JavaScript library for converting between HTML and JSON.

The library converts HTML structures into JSON format so developers can easily store, manipulate, and transfer webpage layouts and data between the server and client sides. On the contrary, it also allows you to write JSON directly to the DOM for rendering.

JHson.js is perfect for developers looking to implement dynamic content updates without reloading the page, as JSON can be modified and sent back to the client for real-time updates. Additionally, for projects involving server-side rendering, it allows for the easy transfer of complex layout structures in a compact, understandable format. This simplifies the process of server-client synchronization and enhances user experience by reducing load times and improving website performance.

How to use it:

1. Load the main script ‘jhson.js’ in the document.

<script src="/dist/jhson.js"></script>

2. Get a JSON representation of a DOM element.

• element: DOM element.
• includeAttributes: Include attributes. Default: true.
• includeCssStyles: Include CSS styles. Default: false.
• includeText: Include text. Default: true.
• includeChildren: Include children. Default: true.
• includeDataAttributes: Include data attributes. Default: true.
• includeImagesAsBase64: Include images as Base64. Default: false.
• friendlyFormat: Return JSON in easy-to-read format. Default: true.
• indentSpaces: Default: 2.
• ignoreNodeTypes[]: Node types to ignore.
• ignoreCssProperties[]: CSS props to ignore.
• ignoreAttributes[]: HTML attributes to ignore.
• ignoreNodeCondition[]: Nodes to ignore.
• propertyReplacer(null): A JSON property replacer function to use when writing the JSON.
• getVariables(json): Get the template variables.
• generateUniqueMissingIds(false): Generate unique IDs
• generateUniqueMissingNames(false): The JSON should contain unique names for elements that don’t contain them

const myEle = document.getElementById("myElement");
const json = $jhson.json()
.includeAttributes(true)
.includeCssStyles(false)
.includeText(true)
.includeChildren(true)
.friendlyFormat(true)
.includeDataAttributes(true)
.propertyReplacer(null)
.ignoreNodeCondition(null)
.get(myEle);

3. Inject JSON directly into the DOM for rendering.

• html: Return all the chained functions.
• json: JSON data.
• templateData{}: Template data.
• removeOriginalAttributes: Remove the the original attributes. Default: true.
• removeOriginalDataAttributes: Remove original data attributes. Default: true.
• clearOriginalHTML: Clear the original HTML. Default: true.
• addCssToHead: Add CSS to the head section of the document. Default: true.
• clearCssFromHead: Clear CSS styles from the head. Default: false.
• logTemplateDataWarnings: Log template data warnings. Default: false.
• addAttributes: Add HTML attributes. Default: true.
• addCssProperties: Add CSS props. Default: true.
• addDataAttributes: Add data attributes. Default: true.
• addText: Add text. Default: true.
• insertBefore: Insert before. Default: false.
• addChildren: Add children. Default: true.
• getVariables(json): Get the template variables.
• get(): Get the HTML DOM element.

$jhson
.html()
.json(json)
.templateData({/* template data */})
.removeOriginalAttributes(true)
.clearOriginalHTML( true )
.write(myEle);

4. You can also render JSON as HTML using the data-jhson-js attribute. All available options:

• json: JSON data.
• templateData{}: Template data.
• removeOriginalAttributes: Remove the the original attributes. Default: true.
• clearOriginalHTML: Clear the original HTML. Default: true.
• addCssToHead: Add CSS to the head section of the document. Default: true.
• clearCssFromHead: Clear CSS styles from the head. Default: false.
• logTemplateDataWarnings: Log template data warnings. Default: false.
• addAttributes: Add HTML attributes. Default: true.
• addCssProperties: Add CSS props. Default: true.
• addText: Add text. Default: true.
• addChildren: Add children. Default: true.
• onBeforeRenderComplete(element): Callback
• onRenderComplete(element): Callback

<div data-jhson-js="{ 'json': 'Your JSON' }">
  Your HTML.
</div>

5. Render a a specific DOM element or all DOM elements.

$jhson
.render( element, options )
.renderAll()

6. Available options.

$jhson.setConfiguration({
  safeMode: true,
  variableWarningText: 'Template variable {{variable_name}} not found.',
  objectErrorText: 'Errors in object: {{error_1}}, {{error_2}}',
  attributeNotValidErrorText: 'The attribute '{{attribute_name}}' is not a valid object.',
  attributeNotSetErrorText: 'The attribute '{{attribute_name}}' has not been set correctly.',
  formattingNodeTypes: 'b strong i em mark small del ins sub sup'
})

Changelog:

v2.5.0 (09/09/2024)

• Fixed a fault where the “render()” function would not be called on DOMContentLoaded.
• Added “ignoreElementIds()” support for “json()”, which states the element IDs that should be ignored when generating JSON (defaults to []).
• Massive internal renames to improve code readability and maintainability.
• Fixed an issue where the “insertBefore” parameter was not being passed correctly to the “writeNode()” function.

v2.4.0 (01/24/2026)

• Updated all NPM packages to the latest versions.
• Upgraded ECMAScript from ES2020 to ES2022.
• Added ESLint support (view the build instructions to learn how to run it).
• All eval() references have been removed from the code base.
• Removed the “const” keyword from all enums in the “enum.ts” file.
• All sort() usages are now correctly defined, and now use lambdas.
• The “Configuration” type has been renamed to “ConfigurationOptions”.
• Fixed a scoping issue with the get() public API function.
• Updated to current year in all headers.

v2.3.0 (09/09/2024)

• Added Base 64 Image support
• Added more methods

v2.2.0 (09/08/2024)

• Added more methods.
• Fixed bugs.

v2.1.0 (09/08/2024)

• Added more methods.
• Code improvement.

v2.0.0 (07/16/2024)

• Rewritten in TypeScript

v1.2.1 (06/17/2024)

• Added export support for the global “$jhson” object, which can now be imported as “jhson.js”.

v1.2.0 (06/08/2024)

• Renamed the binding attribute “data-jhson-options” to “data-jhson-js”.
• The public function “setConfiguration()” can now only be called with a valid object.
• Template variables now support defaults! This allows you to use the following syntax {{your_variable | your default value}} to specify a default value.
• The public function “html().write()” will now only do all of its actions if the JSON specified is valid.

v1.1.0 (03/20/2024)

• Added “use strict” support
• Bugfixes

v1.0.0 (03/13/2024)

• Refactor

v0.9.0 (03/11/2024)

• Added more methods.
• Fixed bugs.

v0.8.0 (03/11/2024)

• Added more methods.

v0.7.0 (03/06/2024)

• Added more methods.

v0.6.0 (03/05/2024)

• Bugfixes & Improvements.
• New configs & methods.

v0.5.0 (03/04/2024)

• Bugfixes & Improvements.

v0.4.0 (03/04/2024)

• Added more methods

v0.3.0 (03/01/2024)

• Update