JTOL

Express HTML in JSON.

✨ Features

• 🧨 IE-level compatibility
• 🎉 Supports running in Node.js
• 📦 Under 1KB
• 😃 JSX-style "style" and Boolean value

📑 Reserved keys

• innerHTML: _
• Child element: child

[
    {
        "div": {
            "_": "Hello",
            "style": {
                "fontSize": "20px"
            },
            "child": [
                {
                    "div": {
                        "_": "World!",
                        "hidden": true
                    }
                }
            ]
        }
    }
]

🎈 Example

Node.js

import { jtol } from "jtol";

const array = ["apple", "banana", "orange"];

const result = jtol([
    {
        h1: {
            _: "Title"
        }
    },
    {
        div: {
            _: "Hello",
            style: {
                color: "red",
                fontSize: "20px"
            },
            class: "layout",
            child: [
                {
                    ul: {
                        child: array.map(item => ({
                            li: {
                                _: item,
                                class: item == "apple" ? "apple" : ""
                            }
                        }))
                    }
                },
                {
                    span: {
                        _: " World!",
                        hidden: true
                    }
                }
            ]
        }
    }
]);

console.log(result);

Browser

<script src="https://unpkg.com/jtol/dist/jtol.js"></script>
<script>
    const result = window.jtol([ /* json */ ]);
    document.body.innerHTML = result;
</script>

📜 License

MIT © ZeoSeven