Initialize and populate an interactive form using OgrafForm library.

HTML

<div id="form-container" style="width: 100vw"></div>
<div id="data" style="white-space: pre"></div>

JavaScript

async function main() {
  const container = document.getElementById("form-container");
  const dataDiv = document.getElementById("data");

  // Load the library, either from CDN or locally:
  const OgrafForm = await import("https://cdn.jsdelivr.net/npm/ograf-form/dist/main.js");
  // const OgrafForm = await import("ograf-form");

  // Define a OGraf/GDD JSON-schema:
  const exampleSchema = {
    type: "object",
    properties: {
      name: {
        type: "string",
        gddType: "single-line",
        default: "John Doe",
        description: "This is the name of the thing",
      },
    },
  };

  // Populate the data with default values from the schema:
  const data = OgrafForm.getDefaultDataFromSchema(exampleSchema);

  // Initialize the Form:
  const form = new OgrafForm.SuperFlyTvOgrafDataForm();
  form.addEventListener("change", (e) => {
    console.log("Caught change event", JSON.stringify(e.target.value));
    // The change event is fired when a user changes a value in the form
    // It does NOT fire on each key stroke.
    // This is a good time to update our data object:
    dataDiv.innerHTML = JSON.stringify(e.target.value, null, 2);
  });
  form.addEventListener("keyup", (e) => {
    console.log("Caught keyup event", JSON.stringify(e.target.value));
    // The keyup event is fired on each key stroke in the form.
    // e.detail.data contains the current data.
  });
  form.schema = exampleSchema;
  form.data = data;

  dataDiv.innerHTML = JSON.stringify(data, null, 2);

  container.appendChild(form);
}
main().catch(console.error)