json-dom-renderer
v1.0.7
Published
A minimal DOM builder from declarative JSON with scroll-based animation using IntersectionObserver.
Maintainers
bhavin.rautReadme
json-dom-renderer
🧩 A minimal, lightweight library to render HTML from declarative JSON — with built-in scroll-based animation using IntersectionObserver. Just 1.6KB minified!
🚀 Installation
➤ Using npm
npm install json-dom-renderer🌐 Usage with CDN (via UNPKG)
<script type="module">
import { render } from 'https://unpkg.com/json-dom-renderer/dist/index.min.js';
const config = {
data: [
{ name: 'Alice', email: '[email protected]', phone: '123-456-7890' },
{ name: 'Bob', email: '[email protected]', phone: '987-654-3210' }
],
mapEach: {
name: { tag: 'h2', class: 'name' },
email: { tag: 'p', class: 'email' },
phone: { tag: 'p', class: 'phone' }
},
wrap: { tag: 'div', class: 'user-card', animate: true }
};
render(config, '#root');
</script>📦 Usage with npm (ES Modules)
import { render } from 'json-dom-renderer';
const config = {
data: [
{ name: 'Alice', email: '[email protected]', phone: '123-456-7890' },
{ name: 'Bob', email: '[email protected]', phone: '987-654-3210' }
],
mapEach: {
name: { tag: 'h2', class: 'name' },
email: { tag: 'p', class: 'email' },
phone: { tag: 'p', class: 'phone' }
},
wrap: { tag: 'div', class: 'user-card', animate: true }
};
render(config, '#root');💡 You can also use an API instead of static
datain the config.
🧠 JSON Structure Reference if data is nested
const data = [
{
title: "User Profile",
description: "Profile overview",
contact: {
email: "[email protected]",
phone: "123-456-7890"
},
posts: [
{ title: "First Post", content: "Hello world!" },
{ title: "Second Post", content: "Another post." }
]
}
];
const config = {
data,
wrap: { tag: "section" },
mapEach: {
title: { tag: "h2" },
description: { tag: "p" },
// Object-based nested mapping for 'contact'
contact: {
tag: "div",
mapEach: {
email: { tag: "p", text: "Email: {{email}}" },
phone: { tag: "p", text: "Phone: {{phone}}" }
}
},
// Array-based nested mapping for 'posts'
posts: {
childrenFor: "posts",
wrap: { tag: "ul" },
mapEach: {
title: { tag: "li", text: "Post: {{title}}" },
content: { tag: "p", text: "{{content}}" }
}
}
}
};
render(config, '#root'); //config is what we added structure with data
//#root is querySelector we cann pass anything here like we do with querySelector
🧠 JSON Structure Reference
{
data: [...], // Array of objects to render
mapEach: { // Mapping for each key
name: { tag: 'h2' },
email: { tag: 'p' }
},
wrap: { // Wrapper for each rendered item
tag: 'div',
class: 'user-card',
animate: true // Optional scroll animation
}
}🧪 Example HTML Template
<body>
<div style="height: 200vh;"></div>
<div id="root"></div>
<div style="height: 200vh;"></div>
</body>🎨 Required CSS for Scroll Animation
Add this to your style.css:
[data-scroll] {
transition: opacity 1s;
transform: translateY(100%);
}
[data-scroll="in"] {
opacity: 1;
transform: translateY(0);
transition: all 0.7s ease;
}
[data-scroll="out"] {
opacity: 0;
transform: translateY(100%);
}📄 License
MIT © Bhavin Raut