{"id":13455629,"url":"https://github.com/premieroctet/openchakra","last_synced_at":"2025-05-14T23:05:46.190Z","repository":{"id":37994177,"uuid":"234616455","full_name":"premieroctet/openchakra","owner":"premieroctet","description":"⚡️ Full-featured visual editor and code generator for React using Chakra UI","archived":false,"fork":false,"pushed_at":"2024-06-06T14:01:45.000Z","size":3825,"stargazers_count":3024,"open_issues_count":28,"forks_count":302,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-05-08T17:25:06.455Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://openchakra.app","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/premieroctet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":null,"patreon":null,"open_collective":"openchakra","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-01-17T18:57:42.000Z","updated_at":"2025-05-03T02:27:23.000Z","dependencies_parsed_at":"2024-11-06T22:32:32.101Z","dependency_job_id":null,"html_url":"https://github.com/premieroctet/openchakra","commit_stats":{"total_commits":165,"total_committers":13,"mean_commits":"12.692307692307692","dds":0.5636363636363637,"last_synced_commit":"5605d412cb7570fb4b261655a88d2abb229352bb"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fopenchakra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fopenchakra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fopenchakra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fopenchakra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/premieroctet","download_url":"https://codeload.github.com/premieroctet/openchakra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253864857,"owners_count":21975814,"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":["hacktoberfest"],"created_at":"2024-07-31T08:01:08.410Z","updated_at":"2025-05-14T23:05:46.140Z","avatar_url":"https://github.com/premieroctet.png","language":"TypeScript","funding_links":["https://opencollective.com/openchakra","https://opencollective.com/openchakra/contribute","https://opencollective.com/openchakra/organization/0/website","https://opencollective.com/openchakra/organization/1/website","https://opencollective.com/openchakra/organization/2/website","https://opencollective.com/openchakra/organization/3/website","https://opencollective.com/openchakra/organization/4/website","https://opencollective.com/openchakra/organization/5/website","https://opencollective.com/openchakra/organization/6/website","https://opencollective.com/openchakra/organization/7/website","https://opencollective.com/openchakra/organization/8/website","https://opencollective.com/openchakra/organization/9/website"],"categories":["hacktoberfest","TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\" style=\"display:flex;flex-direction:column;\"\u003e\n  \u003ca href=\"https://openchakra.app\"\u003e\n    \u003cimg src=\"./public/images/github-banner.png\" alt=\"Openchakra: Visual editor for Chakra UI.\" /\u003e\n  \u003c/a\u003e\n  \u003ch3\u003eVisual Editor for Chakra UI\u003c/h3\u003e\n\u003c/div\u003e\n\nOpenChakra is a visual editor for the best component library in town: [Chakra UI](https://chakra-ui.com) 🤗. Quickly draft components with the simple drag and drop UI.\n\n👉 [https://openchakra.app](https://openchakra.app)\n\n## Features\n\n- 🎨 Drag and drop [Chakra UI](https://chakra-ui.com/getting-started) components\n- 💅 Preset components\n- 👀 Live props editing and styling\n- ⚛️ Production-ready code\n- 🎈 CodeSandbox export\n- 🔮 Undo/redo edit\n- 💽 Localstorage sync\n\n[![Screenshot](./public/images/screenshot.png)](https://openchakra.app)\n\n## Getting started\n\n### Builder mode\n\nThe Builder mode adds extra padding/border to ease components selection (like containers).\n\n\u003e 💡Toggle the Builder mode with the `b` shortcut\n\n### Code panel\n\nToggle the code panel for viewing the JSX/React code of your components. You can even export your code directly to CodeSandbox!\n\n\u003e 💡Toggle the Code panel with the `c` shortcut\n\n### Components panel\n\nDrag any component from the left hand panel into this editor. Then start interacting with them.\nYou can drag a preset: it's a group of components (like Alert). Just drop a preset to easily setup a complex component!\n\n### Inspector\n\n**Update props \u0026 style**\n\nOn the right hand-side, you can find the inspector panel. You will find the tools to edit the component's props and style.\n\n**Delete, reset and documentation**\n\nReach the yellow bar on the top to delete, reset and access the Chakra documentation of each component.\n\n**Sort components**\n\nBy clicking on a component containing children, you will see a Children panel appearing on the right. It enables sorting the children.\n\n### Editor Shortcuts\n\n| Shortcut         | Description               |\n| ---------------- | ------------------------- |\n| `cmd+Z` `ctrl+Z` | Undo last action          |\n| `cmd+Y` `ctrl+y` | Redo action               |\n| `cmd+D` `ctrl+d` | Duplicate component       |\n| `del`            | Delete selected component |\n| `c`              | Toggle Code panel         |\n| `b`              | Toggle Builder mode       |\n| `p`              | Select parent component   |\n| `Esc`            | Unselect component        |\n\n## Roadmap\n\n- More Chakra UI components integration\n- Components copy\n- Props panel improvements\n- Code generation improvements\n- Dark mode support\n- Custom presets\n- Custom theme\n- Handle PseudoBox state (hover, active…)\n- Fix bugs 🧨\n- Support other UI (Material, Reakit...)\n\n## Contributors\n\nThis project is being developed by [Premier Octet](https://www.premieroctet.com), a Web and mobile agency specializing in React and React Native developments.\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/premieroctet/openchakra/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/openchakra/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/openchakra\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/openchakra/contribute)]\n\n\u003ca href=\"https://opencollective.com/openchakra/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/openchakra/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/openchakra/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremieroctet%2Fopenchakra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpremieroctet%2Fopenchakra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremieroctet%2Fopenchakra/lists"}