JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Sofa Model</h1>
  <img itemprop="image" src="https://example.com/photos/1x1/photo.jpg" alt="Sofa Model">
  <p itemprop="description">A brief description of the sofa model, including its design style, materials used, and any unique features.</p>
  <span itemprop="sku">unique-SKU-number</span>
  <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">Brand name</span>
  </div>
  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span> stars based on <span itemprop="reviewCount">10</span> reviews
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="priceCurrency" content="USD">USD</span>
    <span itemprop="price" content="999.99">999.99</span>
    <link itemprop="availability" href="https://schema.org/InStock">
    <div itemprop="seller" itemscope itemtype="https://schema.org/Organization">
      <span itemprop="name">Company Name</span>
    </div>
    <link itemprop="itemCondition" href="https://schema.org/NewCondition">
  </div>
  <div itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue">
    <span itemprop="name">Dimensions</span>: <span itemprop="value">80" W x 36" D x 35" H</span>
  </div>
  <div itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue">
    <span itemprop="name">Materials</span>: <span itemprop="value">Hardwood frame, polyester upholstery</span>
  </div>
  <div itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue">
    <span itemprop="name">Color options</span>: <span itemprop="value">Grey, Blue, Beige</span>
  </div>
  <div itemprop="additionalProperty" itemscope itemtype="https://schema.org/PropertyValue">
    <span itemprop="name">Comfort features</span>: <span itemprop="value">Foam cushions, Medium firmness,...

JavaScript

function generateForm(schema, formTemplate) {
  // create a new form element
  const form = document.createElement('form');

  // loop through the schema properties
  Object.keys(schema.properties).forEach(key => {
    const property = schema.properties[key];
    const field = document.createElement('div');

    // create a label for the field
    const label = document.createElement('label');
    label.innerText = key;
    label.setAttribute('for', key); // set the 'for' attribute
    field.appendChild(label);

    // create the input field based on the property type
    let input;
    switch(property.type) {
      case 'string':
        input = document.createElement('input');
        input.type = 'text';
        break;
      case 'number':
        input = document.createElement('input');
        input.type = 'number';
        break;
      case 'boolean':
        input = document.createElement('input');
        input.type = 'checkbox';
        break;
      default:
        input = document.createElement('input');
        input.type = 'text';
    }

    // set the name attribute of the input field to the property key
    input.name = key;
    input.id = key; // set the 'id' attribute
    field.appendChild(input);

    // add the field to the form
    form.appendChild(field);
  });


  // replace the form template with the generated form
  formTemplate.parentNode.replaceChild(form, formTemplate);

  // return the generated form element
  return form;
}


const schema = {
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the product",
      "maxLength": 100
    },
    "description": {
      "type": "string",
      "description": "A description of the product",
      "maxLength": 500
    },
    "brand": {
      "type": "string",
      "description": "The brand of the product",
      "maxLength": 50
    },
    "sku": {
      "type": "string",
      "description": "The SKU of the product",
      "maxLength":...