Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/premieroctet/openchakra
⚡️ Full-featured visual editor and code generator for React using Chakra UI
https://github.com/premieroctet/openchakra
hacktoberfest
Last synced: 7 days ago
JSON representation
⚡️ Full-featured visual editor and code generator for React using Chakra UI
- Host: GitHub
- URL: https://github.com/premieroctet/openchakra
- Owner: premieroctet
- License: mit
- Created: 2020-01-17T18:57:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-06T14:01:45.000Z (6 months ago)
- Last Synced: 2024-10-29T21:27:31.820Z (about 1 month ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage: https://openchakra.app
- Size: 3.65 MB
- Stars: 2,984
- Watchers: 45
- Forks: 299
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - premieroctet/openchakra - ⚡️ Full-featured visual editor and code generator for React using Chakra UI (TypeScript)
README
Visual Editor for Chakra UI
OpenChakra 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.
👉 [https://openchakra.app](https://openchakra.app)
## Features
- 🎨 Drag and drop [Chakra UI](https://chakra-ui.com/getting-started) components
- 💅 Preset components
- 👀 Live props editing and styling
- ⚛️ Production-ready code
- 🎈 CodeSandbox export
- 🔮 Undo/redo edit
- 💽 Localstorage sync
[](https://openchakra.app)
## Getting started
### Builder mode
The Builder mode adds extra padding/border to ease components selection (like containers).
> 💡Toggle the Builder mode with the `b` shortcut
### Code panel
Toggle the code panel for viewing the JSX/React code of your components. You can even export your code directly to CodeSandbox!
> 💡Toggle the Code panel with the `c` shortcut
### Components panel
Drag any component from the left hand panel into this editor. Then start interacting with them.
You can drag a preset: it's a group of components (like Alert). Just drop a preset to easily setup a complex component!
### Inspector
**Update props & style**
On the right hand-side, you can find the inspector panel. You will find the tools to edit the component's props and style.
**Delete, reset and documentation**
Reach the yellow bar on the top to delete, reset and access the Chakra documentation of each component.
**Sort components**
By clicking on a component containing children, you will see a Children panel appearing on the right. It enables sorting the children.
### Editor Shortcuts
| Shortcut | Description |
| ---------------- | ------------------------- |
| `cmd+Z` `ctrl+Z` | Undo last action |
| `cmd+Y` `ctrl+y` | Redo action |
| `cmd+D` `ctrl+d` | Duplicate component |
| `del` | Delete selected component |
| `c` | Toggle Code panel |
| `b` | Toggle Builder mode |
| `p` | Select parent component |
| `Esc` | Unselect component |
## Roadmap
- More Chakra UI components integration
- Components copy
- Props panel improvements
- Code generation improvements
- Dark mode support
- Custom presets
- Custom theme
- Handle PseudoBox state (hover, active…)
- Fix bugs 🧨
- Support other UI (Material, Reakit...)
## Contributors
This project is being developed by [Premier Octet](https://www.premieroctet.com), a Web and mobile agency specializing in React and React Native developments.
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/openchakra/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/openchakra/contribute)]
