Form Label & Input Alignment Styles
Explore our dedicated collection focusing exclusively on label and single-input alignment: Label Above (stacked), Label Left (left-aligned), Label Left (right-aligned), and Joined Addon Box. Pure layout declarations with zero JS/events.
Forms & Input Alignments
Concentrated label & input positioning: Label Above, Label Left (left-aligned), Label Left (right-aligned), Joined Addon Box, and complete interactive forms.
samples/forms/
→
Cards & Content Containers
Fundamental components including badges, headings, action buttons, pricing tiers, and feature checklists with Tailwind styling.
samples/cards/
→
Data Tables & Financial Grids
Semantic HTML table structures generated directly from data record arrays, with accounting vouchers, batches, and currencies.
samples/tables/
→
Interactive Widgets & Dynamic CRUD
Binding event listeners (`click`, `input`), state mutation, runtime factory nodes, and contextual deletion handlers.
samples/interactive/
→
Complex Dashboard Layouts
Deep recursive tree nesting with multi-column grids, metrics KPI cards, activity feeds, and system status widgets.
samples/dashboards/
→
How to Use Samples in Your Own Project
Include the standalone bundle with a single script tag, then call window.ks["json-to-dom"].buildSpecElement anywhere:
<div id="app"></div>
<!-- Load standalone engine bundle -->
<script type="module" src="https://keshavsoft.github.io/json-to-dom/dist/min.js"></script>
<!-- Run declarative rendering -->
<script type="module">
const spec = {
tagName: "div",
attributes: { class: "p-4 bg-blue-50 text-blue-800 rounded-lg shadow-sm" },
textContent: "Hello from declarative JSON!"
};
// Access engine via window.ks["json-to-dom"]
const node = window.ks["json-to-dom"].buildSpecElement({ inSpec: spec });
document.getElementById("app").appendChild(node);
</script>