abbijamal / object-gui

Object GUI - Javascript Object GUI Editor

Object GUI - Javascript Object Editor

Object GUI is your fully customizable Javascript Object GUI Editor

Usage

You can see a working sample here: https://codepen.io/matteobruni/pen/oNxNvja

Installation

HTML / Vanilla JS

You need to include these files:

CSS

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/object-gui.css

Javascript

https://cdn.jsdelivr.net/npm/[email protected]/dist/js/object-gui.min.js

ES 6 Imports

import { Editor } from "object-gui";

CommonJS / Node.js

const Editor = require("object-gui");

Usage

var data = {
  prop1: "pluto",
  group1: {
    prop1: "paperino",
  },
};

var editor = new Editor("sample", "Sample", data);

editor.theme("light");

var group1 = editor.root.addGroup("group1", "Group 1", false);

group1.addProperty("group1_prop1", "Property 1", data.group1.prop1, "string", (value) => {
  data.group1.prop1 = value;

  console.log(data);
});

editor.root.addProperty("prop1", "Property 1", data.prop1, "string", (value) => {
  data.prop1 = value;

  console.log(data);
});

editor.root.addButton("alert", "Alert", () => {
  alert(JSON.stringify(data));
});