Based on Kotlin playgrounds, quicktype playgrounds allow you to embed quicktype in any webpage by including a single script and placing some sample JSON in a <div>. This is great for documentation, tutorials, and blog posts.

Quick Start

Add quicktype playground to any webpage:

<!-- 1. Include the script -->
<script src="https://playground.quicktype.io/playground.js"></script>

<!-- 2. Add your JSON -->
<div class="quicktype-playground">
{
  "name": "Alice",
  "age": 30,
  "email": "alice@example.com"
}
</div>

The script automatically transforms the div into an interactive playground where visitors can:

• See generated code in any supported language
• Switch between languages
• Modify the JSON and see live updates
• Copy generated code to clipboard

Configuration Options

Customize the playground with data attributes:

<div 
  class="quicktype-playground"
  data-lang="swift"
  data-theme="dark"
  data-top-level="User">
{
  "name": "Alice"
}
</div>

Use Cases

• API Documentation: Show generated client code alongside your API examples
• Tutorials: Let readers experiment with different JSON structures
• Blog Posts: Make code examples interactive
• Internal Tools: Add JSON-to-code conversion to internal dashboards

Features

• All quicktype languages supported
• Light and dark themes
• Mobile-responsive design
• No server required—runs entirely in the browser