OpenChakra is an open-source visual editor for React | Hacker News Reader

OpenChakra is an open-source visual editor for React

openchakra.app

604 pointsshinework75 comments

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.

Thanks for your feedback! We try to keep the app simple and clean but with strong details and ux

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 noticed space values (minW, etc) require a “px” to work, but theme-ui doesn’t require it, and defaults “px”

The devs may have props, but how do they handle state?

useReducer? I hardly even know ‘er!

Isn't that beyond the scope of a layout component library? It's React so you manage state.

His comment was in jest. It was a play on the use of the word "props" in "Props to the devs for building this."

Looks like they use Rematch.[0]

[0] https://rematch.github.io/rematch/#/

> 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.

Sooo software?

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).

Please ready my comment in context (which I have added as a quote for easy reference).

Still comes across as diminishing the helpful work.

I have some feedback.

When you add a component, instead of text values being "Lorem Ipsum" how about something that describes what it is, something like:

"Enter Accordion Header Text" "Enter Alert Title" "Enter Alert Description"

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://blocks-ui.com is WIP

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.

Because using SVG for user interfaces is bad for accessibility (e.g. for users who rely on screen readers)

Valid point, but how many people actually pay attention to this in the alternative solutions.

Well, Chakra does.

How do screen readers handle native applications? Can’t they just do the same thing here?

Also take a look at: https://grapesjs.com/

Also WIP: https://github.com/edtr-io/edtr-io/. Focuses on defining an easy-to-use editor with constraints for content

I think https://www.webiny.com/ lets you add your own react UI components

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.

Bring your own components too.

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.

[1] https://wordpress.org/gutenberg/

many UI builder for bootstrap, which includes react-bootstrap.

Great execution! Anyone knows a similar solution for HTML/Web Components? The closest I have seen is https://hadron.app/

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.

[1] https://mjvesa.github.io/unide/

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!

I'm having trouble understanding for whom this is is built. Obviously not for me, but what's the problem that editor is solving?

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 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.

Yes. To what level then? I guess node-red is actually fulfilling that gap.

Is this something they can not yet get with Sharepoint?

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 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.

I had never heard of Chakra before, so this is basically a gui for composing their components.

https://chakra-ui.com/

Would be good for them to have a page that described that.

It looks quite good. Finally we are increasingly getting VB/Delphi on the Web.

With this link you'll get a predefined PH template https://openchakra.app/?ref=producthunt

I wish there was something like this for AntD...

EDIT: Found something similar for AntD but it's only to create landing pages: https://landing.ant.design/edit/

EDIT 2: Found this also: https://www.xiaopiu.com/editor?type=project&id=5b977bf29c2a3...

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.

[1] -- https://www.antforfigma.com/

I use that too (well not antforfigma.com, but the sketch files by the AntD team that you can import into Figma).

It's not the same tho. I would love for the designers to just give me code.

Can this be self-hosted, and can I "drop-in" my own components?

Following the github link, it appears this is 100% client-side.

Looks pretty easy to fork and add stuff to.

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

Blown away, donation link pls.

Same here! This really inspires me to create something.

Thanks, we have just setup the sponsorship button ️

OpenChakra is to React what X is to Vue.

Does X exist?

There's https://github.com/open-source-labs/PreVue but I haven't used it yet, so I can't say if it's any good.

Would love something like this for Vuetify.

Here's one: https://github.com/fireyy/vue-page-designer

Am I daft? How do you drag/reorder components? Tried Safari and Edge :(

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.

which browser?

This is pretty great! This tool lies in the sweet spot between no-code and low-code. Gonna be trying it out for my next project.

Hmm, how is OpenChakra different from Framer X?

Is framer x free? And does it only use chakra ui components to build on?

https://github.com/premieroctet/openchakra

thank you for sharing!

Other chakras :) - https://github.com/microsoft/ChakraCore and https://github.com/chakra-ui/chakra-ui ;)

Chakra is common Sanskrit word meaning Wheel.

So they're reinventing the wheel?

The wheel is always being reinvented.

https://www.youtube.com/watch?v=_M9muYyYxhI

You clearly didn't dive very deep before writing this comment, or you'd have noticed that this is a UI editor for your second link.

The deprecated, maintenance-mode JS engine is unrelated though. Terrible.

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?

Relevant discussion about ChakraCore https://github.com/Microsoft/ChakraCore/issues/5865

TLDR ChakraCore is entangled in Microsoft's platforms like UWP, so it must be maintained, but forward development beyond maintenance is uncertain.

Oh, you are right! I knew about ChakraCore for a long time, and out of curiousity searched for other projects like it. Sorry about it!

You possibly forgot to mention the biggest Chakra out there:

https://www.chakralinux.org/

FTR, OP's OpenChakra is all about chakra-ui (your 2nd link).

Reply on news.ycombinator.com