From 35d5264c265a44d7e27a3abd55841e59069c65de Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 11 Dec 2023 12:45:08 +0000
Subject: [PATCH] JSON schema tests (#70)

---
 .pre-commit-config.yaml                       |    6 +
 package-lock.json                             |  350 ++++-
 package.json                                  |    7 +-
 pyproject.toml                                |    3 +
 src/npm-fastui/src/components/FormField.tsx   |   14 +-
 src/npm-fastui/src/components/Iframe.tsx      |    7 +
 src/npm-fastui/src/components/display.tsx     |    1 +
 src/npm-fastui/src/components/form.tsx        |    3 +-
 src/npm-fastui/src/components/heading.tsx     |    4 +
 src/npm-fastui/src/components/image.tsx       |    2 +
 src/npm-fastui/src/components/pagination.tsx  |    4 +
 src/python-fastui/fastui/class_name.py        |    6 +-
 .../fastui/components/__init__.py             |   91 +-
 .../fastui/components/display.py              |   10 +-
 src/python-fastui/fastui/components/forms.py  |   17 +-
 src/python-fastui/fastui/components/tables.py |    6 +-
 src/python-fastui/fastui/events.py            |    6 +-
 src/python-fastui/fastui/forms.py             |    5 +-
 .../tests/react-fastui-json-schema.json       | 1289 +++++++++++++++++
 .../tests/react-fastui-json-schema.sh         |    6 +
 .../tests/test_json_schema_match.py           |  157 ++
 21 files changed, 1917 insertions(+), 77 deletions(-)
 create mode 100644 src/python-fastui/tests/react-fastui-json-schema.json
 create mode 100755 src/python-fastui/tests/react-fastui-json-schema.sh
 create mode 100644 src/python-fastui/tests/test_json_schema_match.py

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0a26aa2f..6fa200a4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -39,3 +39,9 @@ repos:
         entry: npm run typecheck
         language: system
         pass_filenames: false
+      - id: js-json-schema
+        name: js-json-schema
+        types_or: [ts, tsx]
+        entry: npm run generate-json-schema
+        language: system
+        pass_filenames: false
diff --git a/package-lock.json b/package-lock.json
index 7b9a07f2..7b04b00c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,10 @@
 {
-  "name": "fastui",
+  "name": "FastUI",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "FastUI",
       "workspaces": [
         "src/*"
       ],
@@ -21,7 +22,8 @@
         "eslint-plugin-react-refresh": "^0.4.4",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "prettier": "^3.0.3",
-        "typescript": "^5.0.2"
+        "typescript": "^5.0.2",
+        "typescript-json-schema": "^0.62.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -237,6 +239,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -825,6 +839,31 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1152,6 +1191,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1168,6 +1208,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1184,6 +1225,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1200,6 +1242,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1216,6 +1259,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1232,6 +1276,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1248,6 +1293,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1264,6 +1310,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1280,6 +1327,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1296,6 +1344,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -1320,6 +1369,30 @@
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
       "dev": true
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -1665,6 +1738,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1717,6 +1799,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2090,6 +2178,20 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2143,6 +2245,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2247,6 +2355,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2280,6 +2397,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -2441,6 +2564,15 @@
         "@esbuild/win32-x64": "0.19.5"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3116,6 +3248,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
@@ -3724,6 +3865,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -4125,6 +4275,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -5190,6 +5346,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/path-equal": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/path-equal/-/path-equal-1.2.5.tgz",
+      "integrity": "sha512-i73IctDr3F2W+bsOWDyyVm/lqsXO47aY9nsFZUjTT/aljSbkxHxxCoyZ9UUrM8jK0JVod+An+rl48RCsvWM+9g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5641,6 +5803,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5784,6 +5955,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
+      "integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/sass": {
       "version": "1.69.5",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
@@ -5921,6 +6101,20 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
@@ -6111,6 +6305,49 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dev": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -6231,6 +6468,44 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-json-schema": {
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/typescript-json-schema/-/typescript-json-schema-0.62.0.tgz",
+      "integrity": "sha512-qRO6pCgyjKJ230QYdOxDRpdQrBeeino4v5p2rYmSD72Jf4rD3O+cJcROv46sQukm46CLWoeusqvBgKpynEv25g==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@types/node": "^16.9.2",
+        "glob": "^7.1.7",
+        "path-equal": "^1.2.5",
+        "safe-stable-stringify": "^2.2.0",
+        "ts-node": "^10.9.1",
+        "typescript": "~5.1.0",
+        "yargs": "^17.1.1"
+      },
+      "bin": {
+        "typescript-json-schema": "bin/typescript-json-schema"
+      }
+    },
+    "node_modules/typescript-json-schema/node_modules/@types/node": {
+      "version": "16.18.67",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.67.tgz",
+      "integrity": "sha512-gUa0tDO9oxyAYO9V9tqxDJguVMDpqUwH5I5Q9ASYBCso+8CUdJlKPKDYS1YSS9kyZWIduDafZvucGM0zGNKFjg==",
+      "dev": true
+    },
+    "node_modules/typescript-json-schema/node_modules/typescript": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -6369,6 +6644,12 @@
         }
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true
+    },
     "node_modules/vfile": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
@@ -6551,6 +6832,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -6565,6 +6863,15 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -6579,6 +6886,42 @@
         "node": ">= 6"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -6644,6 +6987,7 @@
       }
     },
     "src/npm-fastui": {
+      "name": "@pydantic/fastui",
       "version": "0.0.11",
       "license": "MIT",
       "dependencies": {
@@ -6659,6 +7003,7 @@
       }
     },
     "src/npm-fastui-bootstrap": {
+      "name": "@pydantic/fastui-bootstrap",
       "version": "0.0.11",
       "license": "MIT",
       "dependencies": {
@@ -6673,6 +7018,7 @@
       }
     },
     "src/npm-fastui-prebuilt": {
+      "name": "@pydantic/fastui-prebuilt",
       "version": "0.0.11",
       "license": "MIT",
       "devDependencies": {
diff --git a/package.json b/package.json
index a6216e35..ad2657d3 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,5 @@
 {
+  "name": "FastUI",
   "private": true,
   "type": "module",
   "workspaces": [
@@ -11,7 +12,8 @@
     "lint": "eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "npm run lint -- --fix",
     "prettier": "prettier --write",
-    "format": "npm run prettier -- . && npm run lint-fix"
+    "format": "npm run prettier -- . && npm run lint-fix",
+    "generate-json-schema": "./src/python-fastui/tests/react-fastui-json-schema.sh"
   },
   "prettier": {
     "singleQuote": true,
@@ -35,6 +37,7 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "typescript-json-schema": "^0.62.0"
   }
 }
diff --git a/pyproject.toml b/pyproject.toml
index 0fc56cc6..6b85b6e9 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -16,3 +16,6 @@ testpaths = "src/python-fastui/tests"
 xfail_strict = true
 filterwarnings = ["error"]
 asyncio_mode = "auto"
+
+[tool.coverage.run]
+source = ["src/python-fastui/fastui"]
diff --git a/src/npm-fastui/src/components/FormField.tsx b/src/npm-fastui/src/components/FormField.tsx
index 21056963..f355f862 100644
--- a/src/npm-fastui/src/components/FormField.tsx
+++ b/src/npm-fastui/src/components/FormField.tsx
@@ -5,16 +5,18 @@ import Select, { StylesConfig } from 'react-select'
 import { ClassName, useClassName } from '../hooks/className'
 import { debounce, useRequest } from '../tools'
 
+type PrivateOnChange = () => void
+
 interface BaseFormFieldProps {
   name: string
-  title: string[]
+  title: string | string[]
   required: boolean
   locked: boolean
   error?: string
   description?: string
   displayMode?: 'default' | 'inline'
   className?: ClassName
-  onChange?: () => void
+  onChange?: PrivateOnChange
 }
 
 export type FormFieldProps =
@@ -26,7 +28,7 @@ export type FormFieldProps =
 
 interface FormFieldInputProps extends BaseFormFieldProps {
   type: 'FormFieldInput'
-  htmlType?: 'text' | 'date' | 'datetime-local' | 'time' | 'email' | 'url' | 'number' | 'password'
+  htmlType: 'text' | 'date' | 'datetime-local' | 'time' | 'email' | 'url' | 'number' | 'password'
   initial?: string | number
   maxLength?: number
   minLength?: number
@@ -249,6 +251,7 @@ function findDefault(options: SelectOptions, value?: string): SelectOption | und
 interface FormFieldSelectSearchProps extends BaseFormFieldProps {
   type: 'FormFieldSelectSearch'
   searchUrl: string
+  /** @TJS-type integer */
   debounce?: number
   initial?: SelectOption
   multiple?: boolean
@@ -312,7 +315,10 @@ export const FormFieldSelectSearchComp: FC<FormFieldSelectSearchProps> = (props)
 }
 
 const Label: FC<FormFieldProps> = (props) => {
-  const { title } = props
+  let { title } = props
+  if (!Array.isArray(title)) {
+    title = [title]
+  }
   return (
     <label htmlFor={inputId(props)} className={useClassName(props, { el: 'label' })}>
       {title.map((t, i) => (
diff --git a/src/npm-fastui/src/components/Iframe.tsx b/src/npm-fastui/src/components/Iframe.tsx
index 1df4bc40..c7895765 100644
--- a/src/npm-fastui/src/components/Iframe.tsx
+++ b/src/npm-fastui/src/components/Iframe.tsx
@@ -4,8 +4,15 @@ import { ClassName } from '../hooks/className'
 
 export interface IframeProps {
   type: 'Iframe'
+  /**
+   * @format uri
+   * @maxLength 2083
+   * @minLength 1
+   */
   src: string
+  /** @TJS-type ["string", "integer"] */
   width?: string | number
+  /** @TJS-type ["string", "integer"] */
   height?: string | number
   title?: string
   className?: ClassName
diff --git a/src/npm-fastui/src/components/display.tsx b/src/npm-fastui/src/components/display.tsx
index e292fa0c..9f9063e2 100644
--- a/src/npm-fastui/src/components/display.tsx
+++ b/src/npm-fastui/src/components/display.tsx
@@ -21,6 +21,7 @@ export enum DisplayMode {
 
 export interface DisplayProps {
   type: 'Display'
+  /** @TJS-type JSON */
   value?: JsonData
   mode?: DisplayMode
   title?: string
diff --git a/src/npm-fastui/src/components/form.tsx b/src/npm-fastui/src/components/form.tsx
index d037efd0..d736faad 100644
--- a/src/npm-fastui/src/components/form.tsx
+++ b/src/npm-fastui/src/components/form.tsx
@@ -12,10 +12,11 @@ import { FormFieldProps } from './FormField'
 
 interface BaseFormProps {
   formFields: FormFieldProps[]
+  /** @TJS-type object */
   initial?: Record<string, any>
   submitUrl: string
   footer?: boolean | FastProps[]
-  method?: 'GET' | 'GOTO' | 'POST'
+  method: 'GET' | 'GOTO' | 'POST'
   displayMode?: 'default' | 'inline'
   submitOnChange?: boolean
   className?: ClassName
diff --git a/src/npm-fastui/src/components/heading.tsx b/src/npm-fastui/src/components/heading.tsx
index 387a23b9..738fdda4 100644
--- a/src/npm-fastui/src/components/heading.tsx
+++ b/src/npm-fastui/src/components/heading.tsx
@@ -5,6 +5,10 @@ import { slugify } from '../tools'
 
 export interface HeadingProps {
   type: 'Heading'
+  /**
+   * @TJS-enum [1, 2, 3, 4, 5, 6]
+   * @TJS-type integer
+   */
   level: 1 | 2 | 3 | 4 | 5 | 6
   htmlId?: string
   className?: ClassName
diff --git a/src/npm-fastui/src/components/image.tsx b/src/npm-fastui/src/components/image.tsx
index 8e04b118..e26a53b5 100644
--- a/src/npm-fastui/src/components/image.tsx
+++ b/src/npm-fastui/src/components/image.tsx
@@ -7,7 +7,9 @@ export interface ImageProps {
   type: 'Image'
   src: string
   alt?: string
+  /** @TJS-type ["string", "integer"] */
   width?: number | string
+  /** @TJS-type ["string", "integer"] */
   height?: number | string
   referrerPolicy?:
     | 'no-referrer'
diff --git a/src/npm-fastui/src/components/pagination.tsx b/src/npm-fastui/src/components/pagination.tsx
index f2852c93..2884adc3 100644
--- a/src/npm-fastui/src/components/pagination.tsx
+++ b/src/npm-fastui/src/components/pagination.tsx
@@ -7,9 +7,13 @@ import { LinkListComp } from './LinkList'
 
 export interface PaginationProps {
   type: 'Pagination'
+  /** @TJS-type integer */
   page: number
+  /** @TJS-type integer */
   pageSize: number
+  /** @TJS-type integer */
   total: number
+  /** @TJS-type integer */
   pageCount: number
   className?: ClassName
 }
diff --git a/src/python-fastui/fastui/class_name.py b/src/python-fastui/fastui/class_name.py
index 5bd31bc5..ab152a32 100644
--- a/src/python-fastui/fastui/class_name.py
+++ b/src/python-fastui/fastui/class_name.py
@@ -2,6 +2,8 @@
 from typing import Dict, List, Union
 
 from pydantic import Field
-from typing_extensions import Annotated
+from typing_extensions import Annotated, TypeAliasType
 
-ClassName = Annotated[Union[str, List[str], Dict[str, Union[bool, None]], None], Field(serialization_alias='className')]
+ClassName = TypeAliasType('ClassName', Union[str, List[str], Dict[str, Union[bool, None]], None])
+# should be `str | List[ClassName] | Dict[str, bool | None] | None`, but pydantic doesn't like that
+ClassNameField = Annotated[ClassName, Field(serialization_alias='className')]
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 5cdcb223..a5ec951a 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -57,6 +57,7 @@ class Text(pydantic.BaseModel, extra='forbid'):
 
 class Paragraph(pydantic.BaseModel, extra='forbid'):
     text: str
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Paragraph'] = 'Paragraph'
 
 
@@ -71,7 +72,7 @@ class PageTitle(pydantic.BaseModel, extra='forbid'):
 
 class Div(pydantic.BaseModel, extra='forbid'):
     components: '_t.List[AnyComponent]'
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Div'] = 'Div'
 
 
@@ -81,7 +82,7 @@ class Page(pydantic.BaseModel, extra='forbid'):
     """
 
     components: '_t.List[AnyComponent]'
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Page'] = 'Page'
 
 
@@ -89,7 +90,7 @@ class Heading(pydantic.BaseModel, extra='forbid'):
     text: str
     level: _t.Literal[1, 2, 3, 4, 5, 6] = 1
     html_id: _t.Union[str, None] = pydantic.Field(default=None, serialization_alias='htmlId')
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Heading'] = 'Heading'
 
 
@@ -101,7 +102,7 @@ class Heading(pydantic.BaseModel, extra='forbid'):
 class Markdown(pydantic.BaseModel, extra='forbid'):
     text: str
     code_style: CodeStyle = None
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Markdown'] = 'Markdown'
 
 
@@ -109,17 +110,17 @@ class Code(pydantic.BaseModel, extra='forbid'):
     text: str
     language: _t.Union[str, None] = None
     code_style: CodeStyle = None
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Code'] = 'Code'
 
 
 class Button(pydantic.BaseModel, extra='forbid'):
     text: str
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
-    html_type: _t.Union[_t.Literal['button', 'submit', 'reset'], None] = pydantic.Field(
+    html_type: _t.Union[_t.Literal['button', 'reset', 'submit'], None] = pydantic.Field(
         default=None, serialization_alias='htmlType'
     )
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Button'] = 'Button'
 
 
@@ -127,24 +128,24 @@ class Link(pydantic.BaseModel, extra='forbid'):
     components: '_t.List[AnyComponent]'
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
     mode: _t.Union[_t.Literal['navbar', 'tabs', 'vertical', 'pagination'], None] = None
-    active: _t.Union[bool, str, None] = None
+    active: _t.Union[str, bool, None] = None
     locked: _t.Union[bool, None] = None
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Link'] = 'Link'
 
 
 class LinkList(pydantic.BaseModel, extra='forbid'):
     links: _t.List[Link]
     mode: _t.Union[_t.Literal['tabs', 'vertical', 'pagination'], None] = None
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['LinkList'] = 'LinkList'
 
 
 class Navbar(pydantic.BaseModel, extra='forbid'):
     title: _t.Union[str, None] = None
     title_event: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='titleEvent')
-    links: _t.List[Link] = pydantic.Field(default_factory=list)
-    class_name: _class_name.ClassName = None
+    links: _t.List[Link] = pydantic.Field(default=[])
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Navbar'] = 'Navbar'
 
 
@@ -153,8 +154,8 @@ class Modal(pydantic.BaseModel, extra='forbid'):
     body: '_t.List[AnyComponent]'
     footer: '_t.Union[_t.List[AnyComponent], None]' = None
     open_trigger: _t.Union[events.PageEvent, None] = pydantic.Field(default=None, serialization_alias='openTrigger')
-    open_context: _t.Union[events.EventContext, None] = pydantic.Field(default=None, serialization_alias='openContext')
-    class_name: _class_name.ClassName = None
+    open_context: _t.Union[events.ContextType, None] = pydantic.Field(default=None, serialization_alias='openContext')
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Modal'] = 'Modal'
 
 
@@ -173,9 +174,9 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
 class Image(pydantic.BaseModel, extra='forbid'):
     src: str
     alt: _t.Union[str, None] = None
-    width: _t.Union[int, float, str, None] = None
-    height: _t.Union[int, float, str, None] = None
-    referrerpolicy: _t.Union[
+    width: _t.Union[str, int, None] = None
+    height: _t.Union[str, int, None] = None
+    referrer_policy: _t.Union[
         _t.Literal[
             'no-referrer',
             'no-referrer-when-downgrade',
@@ -187,10 +188,10 @@ class Image(pydantic.BaseModel, extra='forbid'):
             'unsafe-url',
         ],
         None,
-    ] = None
+    ] = pydantic.Field(None, serialization_alias='referrerPolicy')
     loading: _t.Union[_t.Literal['eager', 'lazy'], None] = None
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Image'] = 'Image'
 
 
@@ -199,34 +200,32 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
     title: _t.Union[str, None] = None
     width: _t.Union[str, int, None] = None
     height: _t.Union[str, int, None] = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Iframe'] = 'Iframe'
 
 
-AnyComponent = _te.Annotated[
-    _t.Union[
-        Text,
-        Paragraph,
-        PageTitle,
-        Div,
-        Page,
-        Heading,
-        Markdown,
-        Code,
-        Button,
-        Link,
-        LinkList,
-        Navbar,
-        Modal,
-        ServerLoad,
-        Table,
-        Pagination,
-        Display,
-        Details,
-        Form,
-        ModelForm,
-        Image,
-        Iframe,
-        FormField,
-    ],
-    pydantic.Field(discriminator='type'),
+AnyComponent = _t.Union[
+    Text,
+    Paragraph,
+    PageTitle,
+    Div,
+    Page,
+    Heading,
+    Markdown,
+    Code,
+    Button,
+    Link,
+    LinkList,
+    Navbar,
+    Modal,
+    ServerLoad,
+    Table,
+    Pagination,
+    Display,
+    Details,
+    Form,
+    ModelForm,
+    Image,
+    Iframe,
+    FormField,
 ]
diff --git a/src/python-fastui/fastui/components/display.py b/src/python-fastui/fastui/components/display.py
index e27e556d..8737deb3 100644
--- a/src/python-fastui/fastui/components/display.py
+++ b/src/python-fastui/fastui/components/display.py
@@ -13,10 +13,6 @@
 
 
 class DisplayMode(str, enum.Enum):
-    """
-    How to a value.
-    """
-
     auto = 'auto'  # default, same as None below
     plain = 'plain'
     datetime = 'datetime'
@@ -30,6 +26,7 @@ class DisplayMode(str, enum.Enum):
 
 class DisplayBase(pydantic.BaseModel, ABC, defer_build=True):
     mode: _t.Union[DisplayMode, None] = None
+    title: _t.Union[str, None] = None
     on_click: _t.Union[events.AnyEvent, None] = pydantic.Field(default=None, serialization_alias='onClick')
 
 
@@ -39,7 +36,6 @@ class DisplayLookup(DisplayBase, extra='forbid'):
     """
 
     field: str
-    title: _t.Union[str, None] = None
     # percentage width - 0 to 100, specific to tables
     table_width_percent: _t.Union[_te.Annotated[int, _at.Interval(ge=0, le=100)], None] = pydantic.Field(
         default=None, serialization_alias='tableWidthPercent'
@@ -51,7 +47,7 @@ class Display(DisplayBase, extra='forbid'):
     Description of how to display a value, either in a table or detail view.
     """
 
-    value: _t.Any
+    value: _t.Any = pydantic.Field(None, json_schema_extra={'type': 'JSON'})
     type: _t.Literal['Display'] = 'Display'
 
 
@@ -61,7 +57,7 @@ class Display(DisplayBase, extra='forbid'):
 class Details(pydantic.BaseModel, _t.Generic[DataModel], extra='forbid'):
     data: DataModel
     fields: _t.Union[_t.List[DisplayLookup], None] = None
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Details'] = 'Details'
 
     @pydantic.model_validator(mode='after')
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index ac8c8afb..b4f881d7 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -10,22 +10,27 @@
 if _t.TYPE_CHECKING:
     from . import AnyComponent
 
+# # alphabetical order matches typescript-json-schema
+# InputHtmlType = _t.Literal['date', 'datetime-local', 'email', 'number', 'password', 'text', 'time', 'url']
 InputHtmlType = _t.Literal['text', 'date', 'datetime-local', 'time', 'email', 'url', 'number', 'password']
 
 
 class BaseFormField(pydantic.BaseModel, ABC, defer_build=True):
     name: str
-    title: _t.Union[str, _t.List[str]]
+    title: _t.Union[_t.List[str], str]
     required: bool = False
     error: _t.Union[str, None] = None
     locked: bool = False
     description: _t.Union[str, None] = None
-    class_name: _class_name.ClassName = None
+    display_mode: _t.Union[_t.Literal['default', 'inline'], None] = pydantic.Field(
+        default=None, serialization_alias='displayMode'
+    )
+    class_name: _class_name.ClassNameField = None
 
 
 class FormFieldInput(BaseFormField):
     html_type: InputHtmlType = pydantic.Field(default='text', serialization_alias='htmlType')
-    initial: _t.Union[str, int, float, None] = None
+    initial: _t.Union[str, float, None] = None
     placeholder: _t.Union[str, None] = None
     max_length: _t.Union[int, None] = pydantic.Field(default=None, serialization_alias='maxLength')
     min_length: _t.Union[int, None] = pydantic.Field(default=None, serialization_alias='minLength')
@@ -48,7 +53,7 @@ class FormFieldFile(BaseFormField):
 
 
 class FormFieldSelect(BaseFormField):
-    options: _t.Union[_t.List[forms.SelectOption], _t.List[forms.SelectGroup]]
+    options: forms.SelectOptions
     multiple: _t.Union[bool, None] = None
     initial: _t.Union[str, None] = None
     vanilla: _t.Union[bool, None] = None
@@ -77,8 +82,8 @@ class BaseForm(pydantic.BaseModel, ABC, defer_build=True, extra='forbid'):
         default=None, serialization_alias='displayMode'
     )
     submit_on_change: _t.Union[bool, None] = pydantic.Field(default=None, serialization_alias='submitOnChange')
-    footer: '_t.Union[bool, _t.List[AnyComponent], None]' = None
-    class_name: _class_name.ClassName = None
+    footer: '_t.Union[_t.List[AnyComponent], bool, None]' = None
+    class_name: _class_name.ClassNameField = None
 
     @pydantic.model_validator(mode='after')
     def default_footer(self) -> _te.Self:
diff --git a/src/python-fastui/fastui/components/tables.py b/src/python-fastui/fastui/components/tables.py
index 4ba0eed1..061465bb 100644
--- a/src/python-fastui/fastui/components/tables.py
+++ b/src/python-fastui/fastui/components/tables.py
@@ -14,7 +14,7 @@ class Table(pydantic.BaseModel, _t.Generic[DataModel], extra='forbid'):
     data: _t.List[DataModel]
     columns: _t.Union[_t.List[display.DisplayLookup], None] = None
     no_data_message: _t.Union[str, None] = pydantic.Field(default=None, serialization_alias='noDataMessage')
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Table'] = 'Table'
 
     @pydantic.model_validator(mode='after')
@@ -41,9 +41,9 @@ def fill_columns(self) -> _te.Self:
 
 class Pagination(pydantic.BaseModel):
     page: int
-    page_size: int
+    page_size: int = pydantic.Field(serialization_alias='pageSize')
     total: int
-    class_name: _class_name.ClassName = None
+    class_name: _class_name.ClassNameField = None
     type: _t.Literal['Pagination'] = 'Pagination'
 
     @pydantic.computed_field(alias='pageCount')
diff --git a/src/python-fastui/fastui/events.py b/src/python-fastui/fastui/events.py
index 373c727d..01733616 100644
--- a/src/python-fastui/fastui/events.py
+++ b/src/python-fastui/fastui/events.py
@@ -1,15 +1,15 @@
 from typing import Dict, Literal, Union
 
 from pydantic import BaseModel, Field
-from typing_extensions import Annotated, TypeAlias
+from typing_extensions import Annotated, TypeAliasType
 
-EventContext: TypeAlias = Dict[str, Union[str, int]]
+ContextType = TypeAliasType('ContextType', Dict[str, Union[str, int]])
 
 
 class PageEvent(BaseModel):
     name: str
     push_path: Union[str, None] = Field(default=None, serialization_alias='pushPath')
-    context: Union[EventContext, None] = None
+    context: Union[ContextType, None] = None
     clear: Union[bool, None] = None
     type: Literal['page'] = 'page'
 
diff --git a/src/python-fastui/fastui/forms.py b/src/python-fastui/fastui/forms.py
index 59c37abe..2a2d8215 100644
--- a/src/python-fastui/fastui/forms.py
+++ b/src/python-fastui/fastui/forms.py
@@ -170,8 +170,11 @@ class SelectGroup(_te.TypedDict):
     options: _t.List[SelectOption]
 
 
+SelectOptions = _te.TypeAliasType('SelectOptions', _t.Union[_t.List[SelectOption], _t.List[SelectGroup]])
+
+
 class SelectSearchResponse(pydantic.BaseModel):
-    options: _t.Union[_t.List[SelectOption], _t.List[SelectGroup]]
+    options: SelectOptions
 
 
 NestedDict: _te.TypeAlias = 'dict[str | int, NestedDict | str | list[str] | ds.UploadFile | list[ds.UploadFile]]'
diff --git a/src/python-fastui/tests/react-fastui-json-schema.json b/src/python-fastui/tests/react-fastui-json-schema.json
new file mode 100644
index 00000000..3cd80bd4
--- /dev/null
+++ b/src/python-fastui/tests/react-fastui-json-schema.json
@@ -0,0 +1,1289 @@
+{
+  "$ref": "#/definitions/FastProps",
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "definitions": {
+    "BackEvent": {
+      "properties": {
+        "type": {
+          "const": "back",
+          "type": "string"
+        }
+      },
+      "required": ["type"],
+      "type": "object"
+    },
+    "ButtonProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "htmlType": {
+          "enum": ["button", "reset", "submit"],
+          "type": "string"
+        },
+        "onClick": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Button",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    },
+    "ClassName": {
+      "anyOf": [
+        {
+          "items": {
+            "$ref": "#/definitions/ClassName"
+          },
+          "type": "array"
+        },
+        {
+          "$ref": "#/definitions/Record<string,boolean|null>"
+        },
+        {
+          "type": "string"
+        }
+      ]
+    },
+    "CodeProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "codeStyle": {
+          "type": "string"
+        },
+        "language": {
+          "type": "string"
+        },
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Code",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    },
+    "ContextType": {
+      "type": "object"
+    },
+    "DetailsProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "data": {
+          "$ref": "#/definitions/ModelData"
+        },
+        "fields": {
+          "items": {
+            "$ref": "#/definitions/DisplayLookupProps"
+          },
+          "type": "array"
+        },
+        "type": {
+          "const": "Details",
+          "type": "string"
+        }
+      },
+      "required": ["data", "fields", "type"],
+      "type": "object"
+    },
+    "DisplayArrayProps": {
+      "properties": {
+        "mode": {
+          "enum": ["as_title", "auto", "date", "datetime", "duration", "inline_code", "json", "markdown", "plain"],
+          "type": "string"
+        },
+        "type": {
+          "const": "DisplayArray",
+          "type": "string"
+        },
+        "value": {
+          "items": {
+            "$ref": "#/definitions/JsonData"
+          },
+          "type": "array"
+        }
+      },
+      "required": ["type", "value"],
+      "type": "object"
+    },
+    "DisplayLookupProps": {
+      "properties": {
+        "field": {
+          "type": "string"
+        },
+        "mode": {
+          "enum": ["as_title", "auto", "date", "datetime", "duration", "inline_code", "json", "markdown", "plain"],
+          "type": "string"
+        },
+        "onClick": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "tableWidthPercent": {
+          "type": "number"
+        },
+        "title": {
+          "type": "string"
+        }
+      },
+      "required": ["field"],
+      "type": "object"
+    },
+    "DisplayMode": {
+      "enum": ["auto", "plain", "datetime", "date", "duration", "as_title", "markdown", "json", "inline_code"],
+      "type": "string"
+    },
+    "DisplayObjectProps": {
+      "properties": {
+        "mode": {
+          "enum": ["as_title", "auto", "date", "datetime", "duration", "inline_code", "json", "markdown", "plain"],
+          "type": "string"
+        },
+        "type": {
+          "const": "DisplayObject",
+          "type": "string"
+        },
+        "value": {
+          "additionalProperties": {
+            "$ref": "#/definitions/JsonData"
+          },
+          "type": "object"
+        }
+      },
+      "required": ["type", "value"],
+      "type": "object"
+    },
+    "DisplayPrimitiveProps": {
+      "properties": {
+        "mode": {
+          "$ref": "#/definitions/DisplayMode"
+        },
+        "type": {
+          "const": "DisplayPrimitive",
+          "type": "string"
+        },
+        "value": {
+          "$ref": "#/definitions/JSONPrimitive"
+        }
+      },
+      "required": ["mode", "type", "value"],
+      "type": "object"
+    },
+    "DisplayProps": {
+      "properties": {
+        "mode": {
+          "enum": ["as_title", "auto", "date", "datetime", "duration", "inline_code", "json", "markdown", "plain"],
+          "type": "string"
+        },
+        "onClick": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "title": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Display",
+          "type": "string"
+        },
+        "value": {
+          "type": "JSON"
+        }
+      },
+      "required": ["type"],
+      "type": "object"
+    },
+    "DivProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "components": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "type": {
+          "const": "Div",
+          "type": "string"
+        }
+      },
+      "required": ["components", "type"],
+      "type": "object"
+    },
+    "FastProps": {
+      "anyOf": [
+        {
+          "$ref": "#/definitions/TextProps"
+        },
+        {
+          "$ref": "#/definitions/ParagraphProps"
+        },
+        {
+          "$ref": "#/definitions/PageTitleProps"
+        },
+        {
+          "$ref": "#/definitions/DivProps"
+        },
+        {
+          "$ref": "#/definitions/PageProps"
+        },
+        {
+          "$ref": "#/definitions/HeadingProps"
+        },
+        {
+          "$ref": "#/definitions/MarkdownProps"
+        },
+        {
+          "$ref": "#/definitions/CodeProps"
+        },
+        {
+          "$ref": "#/definitions/FormProps"
+        },
+        {
+          "$ref": "#/definitions/ModelFormProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldInputProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldBooleanProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldFileProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldSelectProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldSelectSearchProps"
+        },
+        {
+          "$ref": "#/definitions/ButtonProps"
+        },
+        {
+          "$ref": "#/definitions/ModalProps"
+        },
+        {
+          "$ref": "#/definitions/TableProps"
+        },
+        {
+          "$ref": "#/definitions/PaginationProps"
+        },
+        {
+          "$ref": "#/definitions/DetailsProps"
+        },
+        {
+          "$ref": "#/definitions/LinkProps"
+        },
+        {
+          "$ref": "#/definitions/LinkListProps"
+        },
+        {
+          "$ref": "#/definitions/NavbarProps"
+        },
+        {
+          "$ref": "#/definitions/DisplayProps"
+        },
+        {
+          "$ref": "#/definitions/DisplayArrayProps"
+        },
+        {
+          "$ref": "#/definitions/DisplayObjectProps"
+        },
+        {
+          "$ref": "#/definitions/DisplayPrimitiveProps"
+        },
+        {
+          "$ref": "#/definitions/JsonProps"
+        },
+        {
+          "$ref": "#/definitions/ServerLoadProps"
+        },
+        {
+          "$ref": "#/definitions/ImageProps"
+        },
+        {
+          "$ref": "#/definitions/IframeProps"
+        }
+      ]
+    },
+    "FormFieldBooleanProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "description": {
+          "type": "string"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "error": {
+          "type": "string"
+        },
+        "initial": {
+          "type": "boolean"
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "mode": {
+          "enum": ["checkbox", "switch"],
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "object"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "title": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "const": "FormFieldBoolean",
+          "type": "string"
+        }
+      },
+      "required": ["locked", "mode", "name", "required", "title", "type"],
+      "type": "object"
+    },
+    "FormFieldFileProps": {
+      "properties": {
+        "accept": {
+          "type": "string"
+        },
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "description": {
+          "type": "string"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "error": {
+          "type": "string"
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "multiple": {
+          "type": "boolean"
+        },
+        "name": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "object"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "title": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "const": "FormFieldFile",
+          "type": "string"
+        }
+      },
+      "required": ["locked", "name", "required", "title", "type"],
+      "type": "object"
+    },
+    "FormFieldInputProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "description": {
+          "type": "string"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "error": {
+          "type": "string"
+        },
+        "htmlType": {
+          "enum": ["date", "datetime-local", "email", "number", "password", "text", "time", "url"],
+          "type": "string"
+        },
+        "initial": {
+          "type": ["string", "number"]
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "name": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "object"
+        },
+        "placeholder": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "title": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "const": "FormFieldInput",
+          "type": "string"
+        }
+      },
+      "required": ["htmlType", "locked", "name", "required", "title", "type"],
+      "type": "object"
+    },
+    "FormFieldProps": {
+      "anyOf": [
+        {
+          "$ref": "#/definitions/FormFieldInputProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldBooleanProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldFileProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldSelectProps"
+        },
+        {
+          "$ref": "#/definitions/FormFieldSelectSearchProps"
+        }
+      ]
+    },
+    "FormFieldSelectProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "description": {
+          "type": "string"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "error": {
+          "type": "string"
+        },
+        "initial": {
+          "type": "string"
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "multiple": {
+          "type": "boolean"
+        },
+        "name": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "object"
+        },
+        "options": {
+          "$ref": "#/definitions/SelectOptions"
+        },
+        "placeholder": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "title": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "const": "FormFieldSelect",
+          "type": "string"
+        },
+        "vanilla": {
+          "type": "boolean"
+        }
+      },
+      "required": ["locked", "name", "options", "required", "title", "type"],
+      "type": "object"
+    },
+    "FormFieldSelectSearchProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "debounce": {
+          "type": "integer"
+        },
+        "description": {
+          "type": "string"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "error": {
+          "type": "string"
+        },
+        "initial": {
+          "$ref": "#/definitions/SelectOption"
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "multiple": {
+          "type": "boolean"
+        },
+        "name": {
+          "type": "string"
+        },
+        "onChange": {
+          "type": "object"
+        },
+        "placeholder": {
+          "type": "string"
+        },
+        "required": {
+          "type": "boolean"
+        },
+        "searchUrl": {
+          "type": "string"
+        },
+        "title": {
+          "anyOf": [
+            {
+              "items": {
+                "type": "string"
+              },
+              "type": "array"
+            },
+            {
+              "type": "string"
+            }
+          ]
+        },
+        "type": {
+          "const": "FormFieldSelectSearch",
+          "type": "string"
+        }
+      },
+      "required": ["locked", "name", "required", "searchUrl", "title", "type"],
+      "type": "object"
+    },
+    "FormProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "footer": {
+          "anyOf": [
+            {
+              "items": {
+                "$ref": "#/definitions/FastProps"
+              },
+              "type": "array"
+            },
+            {
+              "type": "boolean"
+            }
+          ]
+        },
+        "formFields": {
+          "items": {
+            "$ref": "#/definitions/FormFieldProps"
+          },
+          "type": "array"
+        },
+        "initial": {
+          "type": "object"
+        },
+        "method": {
+          "enum": ["GET", "GOTO", "POST"],
+          "type": "string"
+        },
+        "submitOnChange": {
+          "type": "boolean"
+        },
+        "submitUrl": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Form",
+          "type": "string"
+        }
+      },
+      "required": ["formFields", "method", "submitUrl", "type"],
+      "type": "object"
+    },
+    "GoToEvent": {
+      "properties": {
+        "query": {
+          "$ref": "#/definitions/Record<string,string|number|null>"
+        },
+        "type": {
+          "const": "go-to",
+          "type": "string"
+        },
+        "url": {
+          "type": "string"
+        }
+      },
+      "required": ["type"],
+      "type": "object"
+    },
+    "HeadingProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "htmlId": {
+          "type": "string"
+        },
+        "level": {
+          "enum": [1, 2, 3, 4, 5, 6],
+          "type": "integer"
+        },
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Heading",
+          "type": "string"
+        }
+      },
+      "required": ["level", "text", "type"],
+      "type": "object"
+    },
+    "IframeProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "height": {
+          "type": ["string", "integer"]
+        },
+        "src": {
+          "format": "uri",
+          "maxLength": 2083,
+          "minLength": 1,
+          "type": "string"
+        },
+        "title": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Iframe",
+          "type": "string"
+        },
+        "width": {
+          "type": ["string", "integer"]
+        }
+      },
+      "required": ["src", "type"],
+      "type": "object"
+    },
+    "ImageProps": {
+      "properties": {
+        "alt": {
+          "type": "string"
+        },
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "height": {
+          "type": ["string", "integer"]
+        },
+        "loading": {
+          "enum": ["eager", "lazy"],
+          "type": "string"
+        },
+        "onClick": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "referrerPolicy": {
+          "enum": [
+            "no-referrer",
+            "no-referrer-when-downgrade",
+            "origin",
+            "origin-when-cross-origin",
+            "same-origin",
+            "strict-origin",
+            "strict-origin-when-cross-origin",
+            "unsafe-url"
+          ],
+          "type": "string"
+        },
+        "src": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Image",
+          "type": "string"
+        },
+        "width": {
+          "type": ["string", "integer"]
+        }
+      },
+      "required": ["src", "type"],
+      "type": "object"
+    },
+    "JSONPrimitive": {
+      "type": ["null", "string", "number", "boolean"]
+    },
+    "JsonData": {
+      "anyOf": [
+        {
+          "items": {
+            "$ref": "#/definitions/JsonData"
+          },
+          "type": "array"
+        },
+        {
+          "additionalProperties": {
+            "$ref": "#/definitions/JsonData"
+          },
+          "type": "object"
+        },
+        {
+          "type": ["null", "string", "number", "boolean"]
+        }
+      ]
+    },
+    "JsonProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "type": {
+          "const": "JSON",
+          "type": "string"
+        },
+        "value": {
+          "$ref": "#/definitions/JsonData"
+        }
+      },
+      "required": ["type", "value"],
+      "type": "object"
+    },
+    "LinkListProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "links": {
+          "items": {
+            "$ref": "#/definitions/LinkProps"
+          },
+          "type": "array"
+        },
+        "mode": {
+          "enum": ["pagination", "tabs", "vertical"],
+          "type": "string"
+        },
+        "type": {
+          "const": "LinkList",
+          "type": "string"
+        }
+      },
+      "required": ["links", "type"],
+      "type": "object"
+    },
+    "LinkProps": {
+      "properties": {
+        "active": {
+          "type": ["string", "boolean"]
+        },
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "components": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "locked": {
+          "type": "boolean"
+        },
+        "mode": {
+          "enum": ["navbar", "pagination", "tabs", "vertical"],
+          "type": "string"
+        },
+        "onClick": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "type": {
+          "const": "Link",
+          "type": "string"
+        }
+      },
+      "required": ["components", "type"],
+      "type": "object"
+    },
+    "MarkdownProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "codeStyle": {
+          "type": "string"
+        },
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Markdown",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    },
+    "ModalProps": {
+      "properties": {
+        "body": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "footer": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "openContext": {
+          "$ref": "#/definitions/ContextType"
+        },
+        "openTrigger": {
+          "$ref": "#/definitions/PageEvent"
+        },
+        "title": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Modal",
+          "type": "string"
+        }
+      },
+      "required": ["body", "title", "type"],
+      "type": "object"
+    },
+    "ModelData": {
+      "type": "object"
+    },
+    "ModelFormProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "displayMode": {
+          "enum": ["default", "inline"],
+          "type": "string"
+        },
+        "footer": {
+          "anyOf": [
+            {
+              "items": {
+                "$ref": "#/definitions/FastProps"
+              },
+              "type": "array"
+            },
+            {
+              "type": "boolean"
+            }
+          ]
+        },
+        "formFields": {
+          "items": {
+            "$ref": "#/definitions/FormFieldProps"
+          },
+          "type": "array"
+        },
+        "initial": {
+          "type": "object"
+        },
+        "method": {
+          "enum": ["GET", "GOTO", "POST"],
+          "type": "string"
+        },
+        "submitOnChange": {
+          "type": "boolean"
+        },
+        "submitUrl": {
+          "type": "string"
+        },
+        "type": {
+          "const": "ModelForm",
+          "type": "string"
+        }
+      },
+      "required": ["formFields", "method", "submitUrl", "type"],
+      "type": "object"
+    },
+    "NavbarProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "links": {
+          "items": {
+            "$ref": "#/definitions/LinkProps"
+          },
+          "type": "array"
+        },
+        "title": {
+          "type": "string"
+        },
+        "titleEvent": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/PageEvent"
+            },
+            {
+              "$ref": "#/definitions/GoToEvent"
+            },
+            {
+              "$ref": "#/definitions/BackEvent"
+            }
+          ]
+        },
+        "type": {
+          "const": "Navbar",
+          "type": "string"
+        }
+      },
+      "required": ["links", "type"],
+      "type": "object"
+    },
+    "PageEvent": {
+      "properties": {
+        "clear": {
+          "type": "boolean"
+        },
+        "context": {
+          "$ref": "#/definitions/ContextType"
+        },
+        "name": {
+          "type": "string"
+        },
+        "pushPath": {
+          "type": "string"
+        },
+        "type": {
+          "const": "page",
+          "type": "string"
+        }
+      },
+      "required": ["name", "type"],
+      "type": "object"
+    },
+    "PageProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "components": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "type": {
+          "const": "Page",
+          "type": "string"
+        }
+      },
+      "required": ["components", "type"],
+      "type": "object"
+    },
+    "PageTitleProps": {
+      "properties": {
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "PageTitle",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    },
+    "PaginationProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "page": {
+          "type": "integer"
+        },
+        "pageCount": {
+          "type": "integer"
+        },
+        "pageSize": {
+          "type": "integer"
+        },
+        "total": {
+          "type": "integer"
+        },
+        "type": {
+          "const": "Pagination",
+          "type": "string"
+        }
+      },
+      "required": ["page", "pageCount", "pageSize", "total", "type"],
+      "type": "object"
+    },
+    "ParagraphProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Paragraph",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    },
+    "Record<string,boolean|null>": {
+      "type": "object"
+    },
+    "Record<string,string|number|null>": {
+      "type": "object"
+    },
+    "SelectGroup": {
+      "properties": {
+        "label": {
+          "type": "string"
+        },
+        "options": {
+          "items": {
+            "$ref": "#/definitions/SelectOption"
+          },
+          "type": "array"
+        }
+      },
+      "required": ["label", "options"],
+      "type": "object"
+    },
+    "SelectOption": {
+      "properties": {
+        "label": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string"
+        }
+      },
+      "required": ["label", "value"],
+      "type": "object"
+    },
+    "SelectOptions": {
+      "anyOf": [
+        {
+          "items": {
+            "$ref": "#/definitions/SelectOption"
+          },
+          "type": "array"
+        },
+        {
+          "items": {
+            "$ref": "#/definitions/SelectGroup"
+          },
+          "type": "array"
+        }
+      ]
+    },
+    "ServerLoadProps": {
+      "properties": {
+        "components": {
+          "items": {
+            "$ref": "#/definitions/FastProps"
+          },
+          "type": "array"
+        },
+        "loadTrigger": {
+          "$ref": "#/definitions/PageEvent"
+        },
+        "path": {
+          "type": "string"
+        },
+        "sse": {
+          "type": "boolean"
+        },
+        "type": {
+          "const": "ServerLoad",
+          "type": "string"
+        }
+      },
+      "required": ["path", "type"],
+      "type": "object"
+    },
+    "TableProps": {
+      "properties": {
+        "className": {
+          "$ref": "#/definitions/ClassName"
+        },
+        "columns": {
+          "items": {
+            "$ref": "#/definitions/DisplayLookupProps"
+          },
+          "type": "array"
+        },
+        "data": {
+          "items": {
+            "$ref": "#/definitions/ModelData"
+          },
+          "type": "array"
+        },
+        "noDataMessage": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Table",
+          "type": "string"
+        }
+      },
+      "required": ["columns", "data", "type"],
+      "type": "object"
+    },
+    "TextProps": {
+      "properties": {
+        "text": {
+          "type": "string"
+        },
+        "type": {
+          "const": "Text",
+          "type": "string"
+        }
+      },
+      "required": ["text", "type"],
+      "type": "object"
+    }
+  }
+}
diff --git a/src/python-fastui/tests/react-fastui-json-schema.sh b/src/python-fastui/tests/react-fastui-json-schema.sh
new file mode 100755
index 00000000..9a415346
--- /dev/null
+++ b/src/python-fastui/tests/react-fastui-json-schema.sh
@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+set -e
+set -x
+# must be called via `npm run generate-json-schema`
+typescript-json-schema --required src/npm-fastui/tsconfig.json -o src/python-fastui/tests/react-fastui-json-schema.json FastProps
+npm run prettier -- src/python-fastui/tests/react-fastui-json-schema.json
diff --git a/src/python-fastui/tests/test_json_schema_match.py b/src/python-fastui/tests/test_json_schema_match.py
new file mode 100644
index 00000000..9a70bc2c
--- /dev/null
+++ b/src/python-fastui/tests/test_json_schema_match.py
@@ -0,0 +1,157 @@
+import json
+import typing
+from pathlib import Path
+
+import pytest
+from dirty_equals import IsList
+from fastui import AnyComponent
+from pydantic import TypeAdapter
+
+THIS_DIR = Path(__file__).parent
+with (THIS_DIR / 'react-fastui-json-schema.json').open('rb') as npm_file:
+    REACT_SCHEMA_DEFS = json.load(npm_file)['definitions']
+
+ta = TypeAdapter(AnyComponent)
+json_schema = ta.json_schema(by_alias=True, mode='serialization', ref_template='#/definitions/{model}')
+components_union = json_schema['anyOf']
+components_union_set = set(d['$ref'] for d in components_union)
+
+
+def python_model_iter():
+    python_defs = json_schema['$defs']
+    for d in components_union:
+        key = d['$ref'].split('/')[-1]
+        yield pytest.param(python_defs[key], id=key)
+
+
+NULL_TYPE = {'type': 'null'}
+
+
+def any_of_simple(any_of: typing.List[typing.Any]) -> typing.Union[typing.List[typing.Any], None]:
+    new_types = []
+    simple = True
+    for s in any_of:
+        if s == NULL_TYPE:
+            continue
+        elif len(s) == 1 and (value := s.get('type')):
+            new_types.append(value)
+        else:
+            simple = False
+
+    if simple:
+        return new_types
+
+
+def fix_pydantic_schema(s: typing.Any) -> None:
+    """
+    Convert pydantic JSON schema to match `typescript-json-schema`.
+    """
+    if isinstance(s, dict):
+        s.pop('readOnly', None)
+
+        if len(s) == 2 and 'discriminator' in s and (one_of := s.get('oneOf')):
+            s.clear()
+            s['anyOf'] = one_of
+        else:
+            for k, v in list(s.items()):
+                if k == '$ref':
+                    if v in {'#/definitions/DisplayLookup', '#/definitions/Link'}:
+                        s['$ref'] = f'{v}Props'
+                    elif v == '#/definitions/BaseModel':
+                        s['$ref'] = '#/definitions/ModelData'
+                    elif v == '#/definitions/DisplayMode':
+                        display_mode = json_schema['$defs']['DisplayMode']
+                        s.clear()
+                        s.update(
+                            enum=IsList(*display_mode['enum'], check_order=False),
+                            type='string',
+                        )
+                    continue
+
+                if isinstance(v, dict):
+                    if any_of := v.get('anyOf'):
+                        refs = [d.get('$ref') for d in any_of]
+                        if set(refs) == components_union_set:
+                            v.pop('anyOf')
+                            v['$ref'] = '#/definitions/FastProps'
+                            continue
+
+                        if NULL_TYPE in any_of and len(any_of) == 2:
+                            other = next(d for d in any_of if d != NULL_TYPE)
+                            fix_pydantic_schema(other)
+                            v.clear()
+                            v.update(other)
+                            continue
+
+                        if (new_types := any_of_simple(any_of)) is not None:
+                            v.clear()
+                            v['type'] = new_types
+                            continue
+
+                        if NULL_TYPE in any_of:
+                            any_of.remove(NULL_TYPE)
+
+                    if all_of := v.get('allOf'):
+                        if len(all_of) == 1:
+                            v.clear()
+                            v.update(all_of[0])
+                            continue
+
+                    if k == 'formFields':
+                        # hack until we fix `customise_form_fields`
+                        v.clear()
+                        v.update({'items': {'$ref': '#/definitions/FormFieldProps'}, 'type': 'array'})
+                        continue
+
+                if k == 'enum':
+                    s[k] = IsList(*v, check_order=False)
+
+                fix_pydantic_schema(v)
+    elif isinstance(s, list):
+        for item in s:
+            fix_pydantic_schema(item)
+
+
+@pytest.mark.parametrize('model_schema', python_model_iter())
+def test_components_match(model_schema: typing.Dict[str, typing.Any]):
+    title = model_schema.get('title')
+    if title is None:
+        all_of = model_schema['allOf']
+        assert len(all_of) == 1
+        ref = all_of[0]['$ref']
+        title = ref.split('/')[-1]
+        model_schema = model_schema['$defs'][title]
+
+    model_properties = model_schema['properties']
+    model_filled = set(model_schema.get('required', []))
+    for key, value in model_properties.items():
+        value.pop('title', None)
+        if value.pop('default', None) is not None:
+            model_filled.add(key)
+
+    if title == 'Table':
+        # special case for `Table` as `columns` is filled by a validator in pydantic
+        model_filled.add('columns')
+    elif title == 'Details':
+        # same for `Details` and `fields`
+        model_filled.add('fields')
+
+    fix_pydantic_schema(model_properties)
+
+    try:
+        react_schema = REACT_SCHEMA_DEFS[f'{title}Props']
+    except KeyError as e:
+        pytest.fail(f'No react model found with name {e}')
+
+    react_properties = react_schema['properties']
+    react_required = set(react_schema.get('required', []))
+    # typescript-json-schema adds type to `const` properties while pydantic does not,
+    # pydantic matches the example from JSON Schema's docs
+    # https://json-schema.org/understanding-json-schema/reference/const
+    react_properties['type'].pop('type')
+    # `onChange` is a frontend only attribute
+    react_properties.pop('onChange', None)
+
+    assert model_properties == react_properties
+
+    assert model_filled == react_required