JSML

JSON that represents HTML JavaScript object notation that represents hypertext Markup Language

See demonstration on GitHub.

createElement()

in browsers

<script src="https://cdn.jsdelivr.net/npm/[email protected]/createElement.js"></script>
<script>
    const jsml =
    {p: {
        class: "myClass myClass2",
        style: "margin: .5em 0; padding: 0.5em;",
        $: [
            "JSML means ",
            {a: {
                href: "https://www.json.org/",
                text: "JSON",
                onClick: () => console.log("with listener support")
            }},
            " that represents ",
            {em: "HTML"}
        ]
    }};

    const elem = JSML.createElement(jsml);
    document.body.append(elem, elem.outerHTML);
</script>

For ideas of this format and concept of even shorter implementation, see context.

in node.js

Use jsdom to create an object which emulates HTMLDocument.

npm install jsml-parser jsdom

const {JSDOM} = require("jsdom");
const JSML = require("jsml-parser");

const dom = new JSDOM("");
const elem = JSML.createElement(
    {p: "Hello world"},
    dom.window.document
);

toHTML()

Note: For toHTML(), assigning event listener by function is not fully implemented yet.

in browsers

<script src="https://cdn.jsdelivr.net/npm/[email protected]/toHTML.js"></script>
<script>
console.log(JSML.toHTML({p: "test"}));
</script>

in node.js

You don't need other packages to run toHTML().

npm install jsml-parser

const JSML = require("jsml-parser");
console.log(JSML.toHTML({p: "test"}));

See also

• There are other similar packages, such as:
  • node-json2html
  • json2html
  • node-jsml
  • jsmile-browser
  • packages with "jsml" as its keyword on npm
• For manually maintaining an HTML file, use Pug (formerly known as "Jade").
• For HTML text to JS object, use xml2jsobj.
• For JS object to JSON text, use JSON.stringify().
• For JSON text to JS object, use JSON.parse().
• For DOM object to HTML text, use Element.outerHTML.
• For HTML text to DOM object, use DOMParser.parseFromString().