Get started with react-jsonschema-form CDN

import React from 'react';
import SchemaForm from 'react-jsonschema-form';
import schema from './schema.json';
import uiSchema from './ui-schema.json';

function App() {
  const onSubmit = (formData, form) => {
    console.log('Form data:', formData);
    console.log('Form:', form);
  };

  return (
    <div className="App">
      <h1>React JSON Schema Form Example</h1>
      <SchemaForm
        schema={schema}
        uiSchema={uiSchema}
        onSubmit={onSubmit}
      />
    </div>
  );
}

export default App;

// schema.json
{
  "title": "Person",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "number"
    },
    "city": {
      "type": "string"
    }
  },
  "required": ["name", "age"]
}

// ui-schema.json
{
  "type": "object",
  "properties": {
    "name": {
      "ui:placeholder": "Enter your name"
    },
    "age": {
      "ui:placeholder": "Enter your age"
    },
    "city": {
      "ui:placeholder": "Enter your city"
    }
  }
}