JSON → フォーム生成

JSON SchemaからHTML/React/Vueフォームを自動生成。Tailwind/Bootstrap対応

JSON Schema

{
  "type": "object",
  "title": "User Registration",
  "description": "A simple user registration form",
  "properties": {
    "name": {
      "type": "string",
      "description": "Full name",
      "minLength": 2,
      "maxLength": 100
    },
    "email": {
      "type": "string",
      "format": "email",
      "description": "Email address"
    },
    "age": {
      "type": "integer",
      "description": "Age",
      "minimum": 0,
      "maximum": 150
    },
    "website": {
      "type": "string",
      "format": "uri",
      "description": "Personal website URL"
    },
    "birthdate": {
      "type": "string",
      "format": "date",
      "description": "Date of birth"
    },
    "role": {
      "type": "string",
      "enum": [
        "admin",
        "editor",
        "viewer"
      ],
      "description": "User role"
    },
    "bio": {
      "type": "string",
      "description": "Biography",
      "maxLength": 500
    },
    "newsletter": {
      "type": "boolean",
      "description": "Subscribe to newsletter"
    },
    "tags": {
      "type": "array",
      "description": "Tags",
      "items": {
        "type": "string"
      }
    }
  },
  "required": [
    "name",
    "email"
  ]
}

フレームワーク

Plain HTMLReactVue

CSSフレームワーク

なしTailwindBootstrap

生成コード