MLForm

MLForm mounts validated, schema-driven forms that submit structured values to a machine learning backend and render model reports in the same host element.

Use it when a product needs a predictable input layer for models: prediction forms, scoring dashboards, review tools, forecasting panels, internal ML consoles, or any workflow where UI state and backend payloads must stay aligned.

import { mountForm } from "mlform";
import type { Transport } from "mlform/transport";

const transport: Transport = {
  async submit(request) {
    const response = await fetch("/api/predict", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ inputs: request.modelValues, reports: request.reports }),
      signal: request.signal,
    });
    if (!response.ok) throw new Error(`Prediction failed: ${response.status}`);
    return response.json();
  },
};

mountForm(document.querySelector("#prediction-form") as HTMLElement, {
  transport,
  schema: {
    fields: [
      { id: "prompt", kind: "text", label: "Prompt", required: true, mappedTo: "prompt" },
    ],
    reports: [
      { id: "prediction", kind: "classifier", label: "Prediction", mappedTo: "prediction" },
    ],
  },
});

KitMount built-in one-page, wizard, or tabs forms, or drive custom layouts through the headless view API.

RuntimeValidate fields, track state, run hooks, and submit through any transport.

PrimitivesRender built-in Web Components for fields, submit actions, and reports.

Design systemApply themes, recipes, density, motion, and host app token overrides.

Choose your path:

Goal	Start here
I want a working form	Quick Start
I need backend integration	First Backend
I need custom fields or reports	Custom Fields
I need theming	Design System Overview

If you are new to MLForm, read Mental Model before the reference pages.