quicktype Playground demo

Automatic initialization

Insert a <script> element into your page:

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

For instance following HTML element:

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

Turns into:

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

Specify which languages to display with data-languages:

<div class="quicktype" data-type-name="Person" data-languages="C# Java Swift Kotlin">
...
</div>

Turns into:

{
  "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" }]
    }
  ]
}