Get started with jsoneditor CDN

Apache-2.0 licensed

JSONEditor is an open-source online tool for interactively editing and validating JSON data.

Tags:
  • json
  • html
  • editor
  • viewer
  • format
  • validate

Stable version

Copied!

How to start using jsoneditor CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jsoneditor CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jsoneditor@1.3.1/dist/jsoneditor.min.js"></script>
    <style>
        #jsonEditor { width: 100%; height: 500px; border: 1px solid #ddd; }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-3">JSON Editor Example</h1>
        <div id="jsonEditor"></div>
        <button class="btn btn-primary mt-3" id="saveBtn">Save</button>
    </div>

    <script>
        const jsonEditor = new JSONEditor('#jsonEditor', {
            schema: {
                title: "My JSON Schema",
                type: "object",
                properties: {
                    name: { type: "string" },
                    age: { type: "number" },
                    hobbies: { type: "array", items: { type: "string" } }
                }
            },
            textarea: {
                cols: 60,
                rows: 10
            }
        });

        jsonEditor.set('$data', { name: 'John Doe', age: 30, hobbies: ['reading', 'swimming'] });

        document.getElementById('saveBtn').addEventListener('click', () => {
            const jsonString = JSON.stringify(jsonEditor.get());
            console.log('Saved JSON:', jsonString);
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions