premieroctet / openchakra Goto Github PK
View Code? Open in Web Editor NEW⚡️ Full-featured visual editor and code generator for React using Chakra UI
Home Page: https://openchakra.app
License: MIT License
⚡️ Full-featured visual editor and code generator for React using Chakra UI
Home Page: https://openchakra.app
License: MIT License
Hi @shinework - first, thanks to you and your team for making this, I first learned about it from HN a while ago. I have a general question - please let me know if you prefer discussing somewhere else.
What do you (the original Premier Octet team that created this tool) use this tool for, and how do you use it? For instance, do you have a designer on your team who mocks up screens (built using the design system components), and provide that as a starting point for developers, so that you reduce the handoff process? Or is this a tool that your developers as a substitute for writing the initial JSX/CSS?
What do you see as the main benefit you experienced from this tool?
I really believe in this space, but I would love to hear as much as you can share about your own perspective. Thank you!
Would be great if Modal could be added.
I can only delete one element with the Del key.
Openchakra is amazing. It's allowed me to speed up my workflow by multiple orders of magnitude. I've even begun using this for my actual work, and have been loving it!
However, I worry that this project may stop being mantianied or be forgot about, and to encourage and ensure its basic maintaining, I would love to support this project on OpenCollective or sponsor it or something else.
Is there anyway you could start a way for us to donate to this amazing project?
Lorsqu'on supprime un composant il faut aussi supprimer ses enfants récursivement
Is there a timeline to update this tool to the latest Chakra version?
It would be nice to be able to take some children from one element, and move them to a different element. This could include up/down the element tree.
Similar to how you already show Children, show Parent as well, so you can easily navigate upward in addition to downward. Also on hover, it would be nice to highlight/outline the parent.
I'd love to be able to save a component or group of component to the sidebar as a preset
I think a nice addition would be to add the UnorderedList component.
BTW: thanks a lot for making this tool, it is really cool and useful! 👍
This is an awesome project. There's no doubt about it, this is where React should go next.
I am trying it out to build a small hobby project and I want to try out how easy it is to make responsive components. The issue is that the builder UI currently has no option to zoom the view port. Zoom is very important when we're trying to make components responsive from mobile to 4k screens. If I create a Box component with a dimension that's bigger than my screen, there's actually no way to preview it on openchakra without getting a bigger screen.
Thanks <3
I would like to thank first for this library.
Lately i started to see some runtime cost of having much complexly composed css. And also i saw this doc.
Please let me know if its possible to use something like compiled-css or linaria to remove that runtime.
I love this library so much that i like to contribute adding this feature.
If you switch from design mode to previewing the result, you'll see a possibly entirely different result.
I understand the padding is there for grabbability reasons, but it would be nice to be able to disable it.
Exemple avec le composant AccordionHeader qui renvoie vers https://chakra-ui.com/accordionheader alors que la bonne adresse est https://chakra-ui.com/accordion
Hi,
I just started using OpenChakra and it's awesome, thanks for making it!
I was wondering if it was intended that all custom props are always quoted by default. This way it's not possible to insert pure javascript through curly brackets. My onClick functions always end up looking like onClick: "{doClick}"
instead of onClick: {doClick}
Thanks for the attention,
Normen
Hi @PierreCrb !
Great work with OpenChakra! Love it.
One challenge I just noticed was that I'm unable to edit text in components when I double click the text.
Would be an interesting feature to add. I know this can be done by editing the text field on the right hand side panel. But would be even better to edit directly on the canvas.
We need to update to Chakra UI v2 (that requires React 18)
Please add typescript support.
I see that this repo/OpenChakra is made using next.js and typescript and OpenChakra is really great and with typescript code generation, it will surely help a lot of people.
Sbj.
Please consider adding support for HStack and VStack components.
Copying and pasting makes UI development more rapid, but it would be nice if there was a way to change the name of a component so that you can effectively copy a named element.
Expected: Returns back to how it was
Actual: Doesn't.
Also:
When clicking on a Stack with some properties set by the width + height text boxes, and looking at the Custom Props panel, and then adding a Custom Prop, non custom props, some with empty values show up!
Here's the local storage component tree for reproduction: https://pastebin.com/MFdt5tku
I want to render a different component on hovering on a component, how can I do that?
It would be really nice if we can have the ability to load plugins that provide components from other libraries such as AntD or Materialize or react-bootstrap etc.
I actually forked and started converting all components to AntD, then realized a lot of the code is very generic. Would be awesome if there were just a few interfaces to implement to provide a component library and load as an npm module.
The next features will introduce server side operations (GitHub, login, repo synchronisation...) so we have to migrate on a fullstack framework, hello Next.js 👋
The goal of this issue is to simply migrate our actual CRA stack to Next.js. We need to move from Netlify to Vercel too.
Hey guys, I'm unable to recover most of the elements that I change or delete with Ctrl+Z I can only do up to one level, but that's it, it won't let me recover more than one deleted element.
First of all, thanks for creating OpenChakra! I'm using it right now and it feels nice. Although, I have a small suggestion to editor UX.
Right now I can only change items order using a right bar panel, but I'd like it to be an easier process, by just dragging it and it will automatically lock to a position.
<Tabs size="md">
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
</TabList>
<TabPanels>
<TabPanel>One !</TabPanel>
<TabPanel>Two !</TabPanel>
<Input />
</TabPanels>
</Tabs>
openchakra is a wonderful piece of software and would really be interested in #71, and to be able to easily extend it with custom components, but there seem to be no active development lately.
So, @shinework what is the status of openchakra? Can we expect new releases?
Several devDependencies have been added as runtime dependencies:
https://github.com/premieroctet/openchakra/blob/master/package.json#L15-L18
https://github.com/premieroctet/openchakra/blob/master/package.json#L36
https://github.com/premieroctet/openchakra/blob/master/package.json#L41-L42
Sometimes I want to inject custom props into a component, however, the current system of the single box that doesn't show current custom props, only lets you add them, is difficult to use and hard to work with for a large project.
Could we do something like this, where we could see all of our custom props and have two text boxes for each prop:
❤️
Thank you for creating this amazing app first of all, great work.
Any plans on supporting breaking points and responsive styles, so that we'd be able to configure, and also see, how the components would look on various devices?
I am still very new to the project, so I’ll hardly be able to fix it myself
The slider component has been merged here: #30, however I don't see it on https://openchakra.app/
Can you guys push it to the public website?
Hi folks! great project!
just wanted to suggest that you could be clear about whether or not you support the upcoming 1.0 version or not.
thank you!
We're going to give the user the ability to connect to GitHub (thanks to https://github.com/nextauthjs/next-auth) and save its components in a repository. The user should be able to save the JSX code on a GitHub repo (we can also save the json). A storybook will be automatically created if the user has created some "named" components.
The repository should be easily publishable on services like Netlify / Vercel (CRA?).
The key idea behind these developments is to ease high level component creation/share (like https://tailwindui.com from tailwind css)
There is a bug when user wants to update the gradient background color from any component. The app breaks and users looses all his/her work. I attached a video of the bug:
Importing a custom theme JSON object would be really neat
Grid along with flex has become core tools when it comes to designing pages. It would be super cool if support can be added for the standard grid properties in the layout section
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.