README in: Indonesian README in: German README in: Hebrew README in: Spanish README in: Portuguese
Object GUI is your fully customizable Javascript Object GUI Editor
You can see a working sample here: https://codepen.io/matteobruni/pen/oNxNvja
You need to include these files:
CSS
https://cdn.jsdelivr.net/npm/object-gui@2/dist/css/object-gui.css
Javascript
https://cdn.jsdelivr.net/npm/object-gui@2/dist/js/object-gui.min.js
import { Editor } from "object-gui";const Editor = require("object-gui");const code = document.getElementById("code");
const data = {
prop1: "pluto",
prop2: 3,
group1: {
prop1: "paperino",
prop2: 0.3,
},
color1: "#ff0000",
select1: "Item 2",
alert: function () {
alert(JSON.stringify(data, null, 4));
},
};
const editor = new Editor("sample", "Sample", () => data);
editor.top().right();
editor.theme("light");
const group1 = editor.root.addGroup("group1", "Group 1", true);
group1.addProperty("prop1", "Property 1", "string").change(() => {
console.log(data);
});
group1
.addProperty("prop2", "Property 2", "number")
.min(0)
.max(1)
.step(0.01)
.change(() => {
console.log(data);
});
editor.root.addProperty("prop1", "Property 1", "string").change(() => {
console.log(data);
});
editor.root
.addProperty("prop2", "Property 2", "number")
.min(0)
.max(10)
.step(0.5)
.change(() => {
console.log(data);
});
editor.root.addProperty("color1", "Color 1", "color").change(() => {
console.log(data);
});
const select1Input = editor.root.addProperty("select1", "Select 1", "select").change(() => {
code.innerText = JSON.stringify(data, null, 4);
console.log(data);
});
select1Input.addItem("Item 1");
select1Input.addItem("Item 2");
select1Input.addItem("Item 3");
editor.root.addButton("alert", "Alert");
code.innerText = JSON.stringify(data, null, 4);
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent