JSFiddle - React, Tailwind, and code Playground

by Brian Wendt

HTML

<script src="https://brianwendt.github.io/json-schema-md-doc/lib/JSONSchemaMarkdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<div id="markdown_html"></div>
<textarea id="markdown" rows=12></textarea>

CSS

#markdown { width: 100%; }

JavaScript

// simple schema for the example
const colors_schema = {
	"description": "Choose a color",
	"type": "string",
	"enum": ["red", "amber", "green"]
}

// create an instance of JSONSchemaMarkdown 
const Doccer = new JSONSchemaMarkdown();
// load the schema
Doccer.load(colors_schema);

// make the markdown ready to copy/paste for use
document.getElementById('markdown').value = Doccer.generate();

// we'll use Showdown to preview the markdown
// see: https://github.com/showdownjs/showdown

// create an instance of showdown's converter.
const converter = new showdown.Converter();

// use the converter to make html from the markdown
document.getElementById('markdown_html').innerHTML = converter.makeHtml(Doccer.markdown);