JSON Schema visualizer
Paste a JSON Schema or OpenAPI document and instantly see its objects, properties, required fields, and references as a downloadable diagram. Everything runs in your browser.
Paste a JSON Schema above to generate a diagram.
Why visualize a JSON Schema?
JSON Schema describes the shape of JSON documents: which objects exist, which properties they carry, which are required, and how objects point to each other through references. Large schemas spread that structure across nested properties and dozens of definitions, which makes it hard to see from the raw text.
A diagram lays each object out as a table and draws a line for every reference, so you can review an API contract, spot an object that nothing references, or explain a payload to someone who has never read the schema.
Supported schema shapes
The visualizer accepts JSON Schema drafts 4 through 2020-12 and OpenAPI 3 or Swagger 2.0 documents, pasted as JSON or YAML. It reads root properties, $defs, definitions, and components/schemas, merges allOf members, and turns nested inline objects into their own tables named after their parent property.
FAQ
Which JSON Schema features does the visualizer show?
Each object schema becomes a table: the root schema, every entry under $defs or definitions, and nested inline objects. Rows list property names with their types, including formats such as string:email, arrays such as LineItem[], enums, and type unions. Properties combined through allOf are merged into one table. Validation keywords like minimum, pattern, and maxLength are not drawn, because they describe allowed values rather than structure.
What does the question mark after a property name mean?
A trailing question mark marks an optional property, one that is not listed in its object's required array. Properties without the mark are required. This follows the TypeScript convention for optional fields, so you can scan a table and see which values a valid document must include. Required arrays inside allOf members are merged; required arrays inside oneOf or anyOf branches are not, because those branches are alternatives.
How are $ref links drawn?
A property whose schema is a $ref, an array of $ref items, or a oneOf or anyOf list of $ref options gets an FK badge and a line to the referenced table. References to the document root (#), $defs, definitions, and OpenAPI components/schemas are resolved, including JSON Pointer escapes. References to other files or URLs can't be resolved in the browser, so they stay as plain type labels and are listed under the diagram.
Can I visualize an OpenAPI or Swagger schema?
Yes, for the data models. Paste an OpenAPI 3 document in JSON or YAML and the visualizer draws every entry under components/schemas, with $ref links between them. Paths, operations, parameters, and security schemes are ignored because they are not part of the data model. For Swagger 2.0 documents, the models under definitions are drawn the same way.
Does the JSON Schema visualizer validate data?
No. It reads the schema itself and draws its structure, without checking any JSON document against it. To test whether a payload matches a schema, use the JSON Schema validator, which reports each failing keyword and path. Using both together helps: the diagram shows how objects relate, and the validator confirms that real data follows the rules.
Is my schema sent to a server?
No. Parsing, YAML conversion, and SVG rendering all happen in your browser, and nothing you paste is uploaded to Basedash or any other service. That makes the tool safe for internal API contracts and unreleased schemas. Select Download SVG to save the diagram for documentation or a pull request.
Go from schema to dashboard
Connect your database to Basedash and build charts from real data.