json-renderers-specs — Headless UI Specification Builder

Single Common Source of Truth

Every component screen below is powered by the exact same data.json and columns.json.

data.json columns.json

Interactive Component Screens

6 Dedicated Demos

Simple Table

table.simple

Builds multi-column tabular view with row data, cell options, and serial numbers.

Open Demo

Table with Search

table.withSearch

Table specification combined with real-time live search filter and serial numbering.

Open Demo

Form Component

form

Inputs, selects, textareas, checkboxes dynamically generated from schema and prefilled.

Open Demo

Select Dropdown

select

Generates declarative <select> element with populated <option> tags.

Open Demo

DataList Autocomplete

dataList

Creates standard HTML <datalist> specs providing native browser autocomplete.

Open Demo

Search Input

searchInput

Clean, labeled search input control specification with customizable placeholders.

Open Demo

Quick Code Usage

import render from "json-renderers-specs";
import data from "./data.json" with { type: "json" };
import columns from "./columns.json" with { type: "json" };

// 1. Table
const tableSpec = render({ type: "table.simple", data, columns });

// 2. Form
const formSpec = render({ type: "form", data, columns });

// 3. Select Dropdown
const selectSpec = render({ type: "select", data, columns });

// 4. DataList Autocomplete
const datalistSpec = render({ type: "dataList", data, columns });