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
• Documentation: danielemasone.github.io/form-schema-runtime/docs/
• 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

• Start at the Documentation Index.
• Guides: Usage, Schema, Validation, Customization, Accessibility, Integration, and Real-World Examples.
• Project reference: Feature Matrix, Market Positioning, and Release Process.
• Generated reports: API Docs and Coverage.
• Framework examples: React, Vue, and Angular.

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 test:site-docs
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, generated HTML docs from the Markdown sources, 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/. The examples consume the published npm package and demonstrate lifecycle cleanup, custom validators, custom renderers, and CSS variable theming without framework adapters.

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 the Release Process 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.

License

Released under the MIT License.

Copyright (c) 2026 Daniele Masone.