Convert JSON to code on any webpage with quicktype playgrounds

Based on Kotlin playgrounds[1], 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!

  1. See github.com/JetBrains/kotlin-playground ↩︎

David

David