As an engineer who works on design systems for a living, I have to say I'm thoroughly impressed with Chakra UI. Its implementation is refreshingly simple and support for generally overlooked things like color theming and responsiveness is generally really well done. Props to the devs for building this -- the care and attention to detail definitely shows.
Very cool. One suggestion: turn off the autocomplete on the inputs in Chrome. For example if I place an image, in the properties panel I get a lot of weird suggestions as I focus on various fields
> I have to say I'm thoroughly impressed with Chakra UI. [...] Props to the devs for building this -- the care and attention to detail definitely shows.
I find this quite amusing, since the components were almost all copied from other React component libraries, restyled based on an open source CSS library, and styled-system added for good measure.
The developer has done a decent job of pulling it all together, but credit where credit is due.
I think you just described 80% of all React-based projects.
Also the project README states clearly that this is an editor for Chakra UI, unless you were commenting on that library in particular (and not the editor).
I know you probably rushed it out eager to show, and it is great but a few tweaks like this and a bit of shaded block colour on the elements would go a long way.
Is there any toolkit available that lets you build a UI editor like this?
We would like to ship a UI editor with our product that lets you define simple UIs that serialize to json/xml but are hesitant because of the effort required and resources at hand.
https://ResponseVault.com is built for that. Drag and drop React form components that can embed in any app. All responses and the form definition are saved in json-schema and can be exported to be used with any package that interprets json-schema.
You could try WordPress' block editor, Gutenberg [1]. Although not a toolkit it's an extremely customizable UI editor. From within the editor you can create "Reusable Blocks" that are instances of blocks ready to be reused.
I wondery why people don't use SVG to describe their UIs. Then you don't have to invent a new language, worry about serializing, etc. SVG support in browsers is old and relatively stable.
To shamelessly plug my own (free) stuff, I've been working on Unide [1] as a side project. Currently features only Vaadin components and isn't nowhere near the quality of Hadron or OpenChakra. But you can get a LitElement or plain JavaScript project exported from it, and support for other component sets should be coming in the next version.
I have been using chakra ui in production with my company’s latest app. One of the driving factors for the decision was the library’s strong focus on a11y. It’s also just a really well designed component kit with apis and component composition that struck me as very intuitive.
I hope to see it gain more traction moving forward!
well, it could provide designers a tool for designing their mockups and share the resulting React components with the developers—thus removing the need for the latter to manually translate mockups into code.
I too don't get who the target market is. To really take advantage of this editor, the user has to already be familiar with React. Why not just go the extra step and learn React?
And if the user is not familiar with React, I feel like this tool will be frustrating to use.
I work in the public sector where hordes of MBA types have gotten into digitisation in recent years. I throughly believe we’ll see more and more tools that don’t require an actual developer, because there is just a huge market for it.
I can tell you why I like it. I'm not a web developer at all and I was recently looking into building a web app, and for me just building something in the gui editor and then looking at the generated code helps me significantly, it is much faster than having to scavenge the docs or google for every single thing I want to do.
While not quite the same thing, and a commercial tool, i've been using Ant for Figma [1] with a designer to prototype UIs before building them out. There are still some rough edges, but it works pretty well.
I've been using Chakra UI for 3 months now, I can confidently recommend it ! It's simple, highly flexible, well designed and the maintainers are responsive and open to ideas. There's of course of few issues, e.g. the color mode with Next.js or some components missing but no real blockers AFAIK
In Firefox 73, drag-and-drop works for me to move components inside a new parent. I can also reorder components that share the same parent by selecting one, looking at the Children section of the Inspector, and dragging-and-dropping the drag handle next to a child.
I don't understand. I drag component to workspace and nothing happen. I tried many components. No error in console, nothing. It doesn't work, it won't tell me what's wrong.
Chakra is still bundled with windows, and is still updated with windows updates (although haven't checked yesterday's update)... what makes you think it's deprecated (edge's move to v8? Will that replace the underlying stuff in windows), or in maintainence mode?
I cant see any official mentions of either, and still seems to be getting updates...
Sure, it's not official, but it's pretty obvious I think: Edge is moving to Chromium. I'm sure Chakra will continue to be bundled with Windows somehow, eg in IE and whatnot, but if you look at Chakra's recent release history in GitHub, it's all security patches.
And it makes sense, why would MS invest in a JS engine it's not planning to use?
