Render dynamic data and handle inputs.
In real-world applications, specifications are rarely static. You pass runtime data objects, render dynamic lists with array methods like .map(), and respond to user inputs.
1 · Pattern A: Injecting Data into Specifications
Use simple JavaScript factory functions that accept your data payload and return a specification object:
// Factory function returning a JSON specification
function createUserCardSpec(user) {
return {
tagName: "div",
classList: ["user-card"],
children: [
{ tagName: "h3", textContent: user.name },
{ tagName: "p", textContent: `Email: ${user.email}` },
{ tagName: "span", textContent: `Role: ${user.role}` }
]
};
}
// Data payload from API / database
const userData = {
name: "Alex Developer",
email: "alex@example.com",
role: "Lead Architect"
};
// Build DOM element with dynamic data
const cardElement = window.ks.jsonToTag.buildSpecElement(createUserCardSpec(userData));
document.querySelector("#output-area").replaceChildren(cardElement);
2 · Pattern B: Rendering Lists of Data with .map()
Because children is a standard JavaScript array, you can use .map() to render collections cleanly:
const items = [
{ id: 101, title: "Database Migration", status: "Completed" },
{ id: 102, title: "Authentication Flow", status: "In Progress" },
{ id: 103, title: "CDN Integration", status: "Ready" }
];
const listSpec = {
tagName: "ul",
classList: ["task-list"],
children: items.map(item => ({
tagName: "li",
children: [
{ tagName: "strong", textContent: `${item.title}: ` },
{ tagName: "span", textContent: item.status }
]
}))
};
const listElement = window.ks.jsonToTag.buildSpecElement(listSpec);
3 · Interactive Live Input Demonstration
Type below to pass inputs into the specification function and watch the CDN engine re-render the native DOM instantly:
● Dynamically compiles to native DOM on every keystroke
Live Native DOM Output:
Next: see how nested UI forms a Children Tree (06) →
Or test full components in the Interactive Live Demo (09) →