<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
#schema-container {
max-width: 800px;
margin: 20px auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
<body>
<div id="schema-container"></div>
<script>
const schema = {
"title": "Person",
"type": "object",
}
const container = document.getElementById('schema-container');
const options = {
language: 'en',
mode: 'view',
modes: ['code', 'form', 'text', 'tree', 'view'],
onError: function (err) {
console.error(err);
}
};
const editor = new JSONEditor(container, options, schema);
</script>
</body>