Form Schema Runtime

Framework-agnostic TypeScript runtime for rendering accessible, customizable HTML forms from declarative JSON schemas.

It targets enterprise and legacy-friendly frontend surfaces where React, Angular, Vue, or Svelte cannot always be introduced, but teams still need typed schemas, validation, state hooks, accessible native controls, and safe DOM rendering.

• Live demo: danielemasone.github.io/form-schema-runtime
• API docs: danielemasone.github.io/form-schema-runtime/api/
• Coverage report: danielemasone.github.io/form-schema-runtime/coverage/
• Framework examples: React, Vue, Angular

Installation

npm install form-schema-runtime

import { createForm, type FormSchema } from "form-schema-runtime";
import "form-schema-runtime/styles.css";

Quick Start

import { createForm, type FormSchema } from "form-schema-runtime";
import "form-schema-runtime/styles.css";

const schema: FormSchema = {
  id: "contact-form",
  title: "Contact form",
  fields: [
    {
      type: "text",
      name: "fullName",
      label: "Full name",
      required: true
    },
    {
      type: "email",
      name: "email",
      label: "Email",
      required: true
    }
  ]
};

const form = createForm({
  container: document.querySelector("#app")!,
  schema,
  onSubmit(values) {
    console.log(values);
  }
});

Use the returned instance for getValues, setValues, validate, reset, and destroy. See the usage guide for the full lifecycle.

Documentation

• Usage Guide
• Schema Reference
• Validation Guide
• Customization Guide
• Accessibility Guide
• Integration Guide
• Real-World Examples
• Framework Consumer Examples
• React Vite Example
• Vue Vite Example
• Angular Example
• Release Process
• Generated API Docs
• Feature Matrix
• Market Positioning
• Coverage Report

Architecture

The public API lives in src/index.ts. Schema normalization, validation, state, condition evaluation, DOM helpers, and renderers stay separated so each concern remains testable.

src/
  index.ts
  schema/
  validation/
  state/
  conditions/
  renderer/
  dom/
  styles/

The library renders native controls into a caller-provided container. Schema text is treated as untrusted data and rendered with DOM APIs rather than innerHTML.

Build And Test

npm ci
npm run typecheck
npm run lint
npm test
npm run test:coverage
npm run build
npm run build:examples
npm run test:consumer
npm run test:examples
npm run test:e2e

npm run build produces the library package, the GitHub Pages demo, TypeDoc API docs, copied Markdown docs, and the coverage page when coverage has been generated.

npm run build:examples builds the React, Vue, and Angular consumer apps and copies them into the Pages artifact under /examples/react/, /examples/vue/, and /examples/angular/.

Release

Releases are GitHub Release driven. Publishing to npm is handled by a dedicated release workflow using npm Trusted Publishing/OIDC, with no long-lived npm publish token in GitHub secrets.

v1.0.0 is the first stable release. Historical notes for v0.1.0 and v0.1.1 are documented in the release process. npm versions cannot be overwritten, so each release needs a new package.json version and matching GitHub Release tag.

See docs/release-process.md for setup, tag conventions, verification, publishing, provenance, and failure handling.

Trade-Offs

This v1 intentionally does not include:

• Drag-and-drop visual builders.
• Arbitrary JavaScript expressions inside schemas.
• A generic rules engine.
• Repeatable or nested array forms.
• Async validation.
• Framework-specific adapters.
• Backend submission or storage.

Those boundaries keep the runtime small, deterministic, and easy to embed in non-framework applications.