JSFiddle - React, Tailwind, and code Playground

by chandlerprall

HTML

<form id="schemaForm"></form>

CSS

.yui3-form-field { margin-bottom:1em; }
label { display:block; }

JavaScript

var schema = {
  "additionalParams": false,
  "type": "object",
  "properties": {
    "gallery": {
      "optional": false,
      "type": "string",
      "description": "Slug or ID for the Photo Gallery to display"
    },
    "limit": {
      "optional": true,
      "default": 3,
      "type": "integer",
      "description": "Number of photos to display"
    },
    "tags": {
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  }
};

YUI.add('jsonschema', function(Y){
    
    function Property(key, cfg, schema) {
        this.name = key;
        this.config = cfg;
        this.schema = schema;
    }
    
    Property.prototype = {
        get: function(key) {
            if (key == 'name') {
                return this.name;
            }
            
            if (key in this.config) {
                return this.config[key];
            }
            
            if (key == 'schema') {
                return this.schema;
            }
            
            return null;
        }
    };
    
    function JsonSchema(schema) {
        this.schema = schema;
        this.properties = {};
        
        Y.Object.each(this.schema.properties, function(val, key, props){
            this.properties[key] = new Property(key, val, this);
        }, this)
    }
    
    JsonSchema.prototype = {
        getProperties: function(){
            return this.schema.properties;
        },
        
        each: function(fn, scope){
            return Y.Object.each(this.properties, fn, scope || this);
        }
    };
    
    Y.JsonSchema = JsonSchema;
    
}, '1.0.0');

YUI.add('ui-form', function(Y){
    
    
    
    
    Y.FormFields = Y.Base.create("fieldlist", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {
        
        initializer: function() {
            this.get('schema').each(function(prop){
                this.add({
                    property: prop,
                    type:     this.getFieldType(prop)
                });
        ...