Validation

Client-side validation runs on submit via src/lib/validate.ts:

• Required field checks (all top-level keys are required by default)
• Format validation for email, uri, date, date-time
• Inline error messages per field
• Fields are only marked invalid after they've been touched or a submit is attempted

Project Structure

src/
├── App.tsx               # Stage machine: paste → loading → form → submitted
├── components/
│   ├── SchemaForm.tsx    # Form shell, validation orchestration, submit/clear
│   └── FieldRenderer.tsx # Recursive field renderer for all types & depths
├── lib/
│   ├── formApi.ts        # Client-side schema inference engine
│   └── validate.ts       # Validation logic
└── index.css             # Tailwind v4 + custom layer styles

Tech Stack

Running Locally

npm install
npm run dev

Build for production:

npm run build

Output goes to dist/. The app is fully static — no server or API required.

Design Notes

• Monospace UI — IBM Plex Mono / Fira Code font stack throughout for a developer-tool aesthetic
• Dark theme — zinc-950 base with zinc-800/700 borders and zinc-100 text
• Sticky header — shows current schema title and a reset button when in form/submitted stages
• Copy to clipboard — submitted JSON output can be copied with one click

Backend

Form Schema API

A backend service that infers, enriches, translates, and validates JSON Schemas from raw data. Useful for dynamically generating form definitions with widget hints from any JSON payload.

Project Description

Given a plain JSON object (e.g. a database record or API response), this service infers a full JSON Schema with human-readable titles and UI widget hints (x-widget). It also accepts existing schemas and enriches them, and validates form submission data against a schema.

Setup & Install

npm install
npm run dev     # development (ts-node-dev)
npm run build   # compile TypeScript
npm start       # run compiled output

Conventions

API Endpoints

GET /health · GET /api/health

Health check.

curl -s http://localhost:9022/api/health

Response

{ "status": "ok", "timestamp": "2026-04-22T10:00:00.000Z" }

POST /api/form/schema

Accepts either raw JSON data or an existing JSON Schema object. If the payload looks like a schema ($schema, type: "object" + properties, etc.) it enriches it; otherwise it infers a schema from scratch.

Supports an optional { _title, _data } wrapper to avoid key collisions with reserved fields.

Request body — flat raw data

{
  "name": "Alice",
  "email": "alice@example.com",
  "age": 30,
  "bio": "Software engineer based in NYC."
}

Request body — wrapper form

{
  "_title": "User Profile",
  "_data": {
    "name": "Alice",
    "email": "alice@example.com",
    "age": 30,
    "bio": "Software engineer based in NYC."
  }
}

curl -s -X POST http://localhost:9022/api/form/schema \
  -H "Content-Type: application/json" \
  -d '{"_title":"User Profile","_data":{"name":"Alice","email":"alice@example.com","age":30,"bio":"Software engineer."}}'

Response

{
  "data": {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "title": "User Profile",
    "properties": {
      "name":  { "type": "string",  "title": "Name",  "x-widget": "text" },
      "email": { "type": "string",  "title": "Email", "format": "email", "x-widget": "email" },
      "age":   { "type": "integer", "title": "Age",   "x-widget": "number" },
      "bio":   { "type": "string",  "title": "Bio",   "x-widget": "textarea" }
    }
  }
}

POST /api/form/infer

Strictly infers a schema from raw JSON data. Never treats the input as an existing schema — always runs full value-level type inference.

Request body

{
  "username": "bob42",
  "score": 9.5,
  "active": true,
  "createdAt": "2026-01-15T08:30:00Z"
}

curl -s -X POST http://localhost:9022/api/form/infer \
  -H "Content-Type: application/json" \
  -d '{"username":"bob42","score":9.5,"active":true,"createdAt":"2026-01-15T08:30:00Z"}'

Response

{
  "data": {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "title": "Form",
    "properties": {
      "username":  { "type": "string",  "title": "Username",   "x-widget": "text" },
      "score":     { "type": "number",  "title": "Score",      "x-widget": "number" },
      "active":    { "type": "boolean", "title": "Active",     "x-widget": "checkbox" },
      "createdAt": { "type": "string",  "title": "Created At", "format": "date-time", "x-widget": "datetime-local" }
    }
  }
}

POST /api/form/translate

Enriches a single JSON Schema field definition with a human-readable title and an x-widget hint. Useful when you already have a schema and want widget annotations for one field at a time.

Request body

{
  "key": "birthDate",
  "field": {
    "type": "string",
    "format": "date"
  }
}

curl -s -X POST http://localhost:9022/api/form/translate \
  -H "Content-Type: application/json" \
  -d '{"key":"birthDate","field":{"type":"string","format":"date"}}'

Response

{
  "data": {
    "type": "string",
    "format": "date",
    "title": "Birth Date",
    "x-widget": "date"
  }
}

POST /api/form/validate

Validates a form data object against a JSON Schema. Checks required fields, type constraints (minimum, maximum, minLength, maxLength, pattern), and recurses into nested objects.

Request body

{
  "schema": {
    "type": "object",
    "properties": {
      "email":    { "type": "string", "format": "email", "title": "Email" },
      "password": { "type": "string", "minLength": 8,    "title": "Password" }
    },
    "required": ["email", "password"]
  },
  "data": {
    "email": "",
    "password": "abc"
  }
}

curl -s -X POST http://localhost:9022/api/form/validate \
  -H "Content-Type: application/json" \
  -d '{
    "schema": {
      "type": "object",
      "properties": {
        "email":    {"type":"string","format":"email","title":"Email"},
        "password": {"type":"string","minLength":8,"title":"Password"}
      },
      "required": ["email","password"]
    },
    "data": {"email":"","password":"abc"}
  }'

Response — validation failed

{
  "valid": false,
  "errors": {
    "email":    "Email is required",
    "password": "Minimum 8 characters"
  }
}

Response — validation passed

{
  "valid": true,
  "errors": {}
}

This Express backend / api completed archive review with strong static results. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.8 and security 9.

Automation, Utilities & Developer Tools

無料