Real time Javascript Object GUI Editor

Object GUI

This is the editor that will be used in the upcoming tsParticles options editor.

With this library you'll easily create a realtime javascript objects editor.

This editor supports themes too (for now 'dark', 'light', 'red', 'blue', 'green').

If you want to contribute to this project feel free to join.

---

You can try it yourself, it's available on npm too

matteobruni / object-gui

Object GUI - Javascript Object GUI Editor

README in: Indonesian README in: German README in: Hebrew README in: Spanish README in: Portuguese

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/object-gui@2/dist/css/object-gui.css

Javascript

https://cdn.jsdelivr.net/npm/object-gui@2/dist/js/object-gui.min.js

ES 6 Imports

import { Editor } from "object-gui";

CommonJS / Node.js

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

Usage

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

…

View on GitHub

---

Checkout this CodePen sample

Do you want to see it in action in a big object?

Checkout the tsParticles editor