https://github.com/matteobruni/object-gui

Object GUI - Javascript Object GUI Editor
https://github.com/matteobruni/object-gui

css debug design editor gui gui-editor hacktoberfest hacktoberfest-2021 hacktoberfest2021 javascript neumorphic-ui neumorphism tools typescript webdesign webdev

Last synced: 6 days ago
JSON representation

Object GUI - Javascript Object GUI Editor

• Host: GitHub
• URL: https://github.com/matteobruni/object-gui
• Owner: matteobruni
• License: mit
• Created: 2020-08-04T10:07:34.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T08:18:37.000Z (2 months ago)
• Last Synced: 2024-10-24T09:42:45.696Z (2 months ago)
• Topics: css, debug, design, editor, gui, gui-editor, hacktoberfest, hacktoberfest-2021, hacktoberfest2021, javascript, neumorphic-ui, neumorphism, tools, typescript, webdesign, webdev
• Language: TypeScript
• Homepage:
• Size: 3.56 MB
• Stars: 66
• Watchers: 5
• Forks: 32
• Open Issues: 19
• Metadata Files:
  • Readme: README-BR.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
README em: [Inglês](./README.md)

README em: [Indonesio](./README-ID.md)

README em: [Alemão](./README-DE.md)

README em: [Hebraico](./README-IL.md)

README em: [Espanhol](./README-ES.md)

README em: [Holandês](./README-NL.md)

# Object GUI - Javascript Object Editor

Obeject GUI é um editor visual de Obetos Javascript altamente customizável

[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/object-gui)

## Exemplo

Você pode acessar um exemplo funcional aqui:  

### Instalação

#### HTML / Vanilla JS

É nessário incluir esses arquivos abaixo:

_CSS_

_Javascript_

#### ES 6 Imports

```javascript

import { Editor } from "object-gui";

```

#### CommonJS / Node.js

```javascript

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

```

### Uso

```javascript

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);

```