{"id":16351540,"url":"https://github.com/matteobruni/object-gui","last_synced_at":"2025-04-04T16:13:11.888Z","repository":{"id":37070933,"uuid":"284943380","full_name":"matteobruni/object-gui","owner":"matteobruni","description":"Object GUI - Javascript Object GUI Editor","archived":false,"fork":false,"pushed_at":"2024-10-24T08:18:37.000Z","size":3737,"stargazers_count":66,"open_issues_count":19,"forks_count":32,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-24T09:42:45.696Z","etag":null,"topics":["css","debug","design","editor","gui","gui-editor","hacktoberfest","hacktoberfest-2021","hacktoberfest2021","javascript","neumorphic-ui","neumorphism","tools","typescript","webdesign","webdev"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matteobruni.png","metadata":{"files":{"readme":"README-BR.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-04T10:07:34.000Z","updated_at":"2024-10-24T06:00:42.000Z","dependencies_parsed_at":"2023-09-25T00:06:02.836Z","dependency_job_id":"7520ba5a-7e5c-4f8a-907c-467903b2fcaf","html_url":"https://github.com/matteobruni/object-gui","commit_stats":{"total_commits":1204,"total_committers":34,"mean_commits":"35.411764705882355","dds":0.5664451827242525,"last_synced_commit":"c17f328e3dee3df34fb1395e1118f6042732712c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobruni%2Fobject-gui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobruni%2Fobject-gui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobruni%2Fobject-gui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobruni%2Fobject-gui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matteobruni","download_url":"https://codeload.github.com/matteobruni/object-gui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246597824,"owners_count":20802970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","debug","design","editor","gui","gui-editor","hacktoberfest","hacktoberfest-2021","hacktoberfest2021","javascript","neumorphic-ui","neumorphism","tools","typescript","webdesign","webdev"],"created_at":"2024-10-11T01:09:39.740Z","updated_at":"2025-04-04T16:13:11.861Z","avatar_url":"https://github.com/matteobruni.png","language":"TypeScript","readme":"README em: [Inglês](./README.md)\nREADME em: [Indonesio](./README-ID.md)\nREADME em: [Alemão](./README-DE.md)\nREADME em: [Hebraico](./README-IL.md)\nREADME em: [Espanhol](./README-ES.md)\nREADME em: [Holandês](./README-NL.md)\n\n\n# Object GUI - Javascript Object Editor\n\nObeject GUI é um editor visual de Obetos Javascript altamente customizável\n\n[![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)\n\n## Exemplo\n\nVocê pode acessar um exemplo funcional aqui:  \u003chttps://codepen.io/matteobruni/pen/oNxNvja\u003e\n\n### Instalação\n\n#### HTML / Vanilla JS\n\nÉ nessário incluir esses arquivos abaixo:\n\n_CSS_\n\n\u003chttps://cdn.jsdelivr.net/npm/object-gui@1.0.0-alpha.1/dist/css/object-gui.css\u003e\n\n_Javascript_\n\n\u003chttps://cdn.jsdelivr.net/npm/object-gui@1.0.0-alpha.1/dist/js/object-gui.min.js\u003e\n\n#### ES 6 Imports\n\n```javascript\nimport { Editor } from \"object-gui\";\n```\n\n#### CommonJS / Node.js\n\n```javascript\nconst Editor = require(\"object-gui\");\n```\n\n### Uso\n\n```javascript\nconst code = document.getElementById(\"code\");\n\nconst data = {\n  prop1: \"pluto\",\n  prop2: 3,\n  group1: {\n    prop1: \"paperino\",\n    prop2: 0.3,\n  },\n  color1: \"#ff0000\",\n  select1: \"Item 2\",\n  alert: function () {\n    alert(JSON.stringify(data, null, 4));\n  },\n};\n\nconst editor = new Editor(\"sample\", \"Sample\", data);\n\neditor.top().right();\neditor.theme(\"light\");\n\nconst group1 = editor.root.addGroup(\"group1\", \"Group 1\", true);\n\ngroup1.addProperty(\"prop1\", \"Property 1\", \"string\").change(() =\u003e {\n  console.log(data);\n});\n\ngroup1\n  .addProperty(\"prop2\", \"Property 2\", \"number\")\n  .min(0)\n  .max(1)\n  .step(0.01)\n  .change(() =\u003e {\n    console.log(data);\n  });\n\neditor.root.addProperty(\"prop1\", \"Property 1\", \"string\").change(() =\u003e {\n  console.log(data);\n});\n\neditor.root\n  .addProperty(\"prop2\", \"Property 2\", \"number\")\n  .min(0)\n  .max(10)\n  .step(0.5)\n  .change(() =\u003e {\n    console.log(data);\n  });\n\neditor.root.addProperty(\"color1\", \"Color 1\", \"color\").change(() =\u003e {\n  console.log(data);\n});\n\nconst select1Input = editor.root.addProperty(\"select1\", \"Select 1\", \"select\").change(() =\u003e {\n  code.innerText = JSON.stringify(data, null, 4);\n\n  console.log(data);\n});\n\nselect1Input.addItem(\"Item 1\");\nselect1Input.addItem(\"Item 2\");\nselect1Input.addItem(\"Item 3\");\n\neditor.root.addButton(\"alert\", \"Alert\");\n\ncode.innerText = JSON.stringify(data, null, 4);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobruni%2Fobject-gui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatteobruni%2Fobject-gui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobruni%2Fobject-gui/lists"}