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 pages that display JSON because it allows visitors to immediately copy code to represent the data in their apps.

To add a quicktype playground to any webpage, first add this <script> element:

<script src="https://unpkg.com/quicktype-playground@1"></script>

Then add a <div class="quicktype" /> containing some sample JSON:

<div class="quicktype" data-type-name="Person"> { "name": "Bob", "age": 99, "friends": ["Sue", "Vlad"] } </div>

When the page loads, the <div> becomes an interactive widget with the ability to view the types for that JSON in every language quicktype supports:

{ "name": "Bob", "age": 99, "friends": ["Sue", "Vlad"] }

You can specify a subset of languages to display with data-languages :

<div class="quicktype" data-type-name="Pokedex" data-languages="C# Java Swift"> { "pokemon": [ { "id": 1, "num": "001", "name": "Bulbasaur", "img": "http://www.serebii.net/pokemongo/pokemon/001.png", "type": [ "Grass", "Poison" ], "weaknesses": [ "Fire", "Ice", "Flying", "Psychic" ], "next_evolution": [ { "num": "002", "name": "Ivysaur" }, { "num": "003", "name": "Venusaur" } ] }, ... ] } </div>

{ "pokemon": [ { "id": 1, "num": "001", "name": "Bulbasaur", "img": "http://www.serebii.net/pokemongo/pokemon/001.png", "type": [ "Grass", "Poison" ], "weaknesses": [ "Fire", "Ice", "Flying", "Psychic" ], "next_evolution": [ { "num": "002", "name": "Ivysaur" }, { "num": "003", "name": "Venusaur" } ] }, { "id": 2, "num": "002", "name": "Ivysaur", "img": "http://www.serebii.net/pokemongo/pokemon/002.png", "type": [ "Grass", "Poison" ], "weaknesses": [ "Fire", "Ice", "Flying", "Psychic" ], "prev_evolution": [ { "num": "001", "name": "Bulbasaur" } ], "next_evolution": [ { "num": "003", "name": "Venusaur" } ] } ] }

This is an experimental feature that we hope you find useful! We still need to:

Remove code left over from Kotlin playgrounds

Remove unused dependencies–the script is currently large but should be able to shrink significantly

Add more quicktype features

Please check out quicktype/quicktype-playground to file issues or send pull requests!