
OpenChakra is an open-source visual editor for React - shinework
https://openchakra.app
======
Dirak
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.

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

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

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

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

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

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

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

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

~~~
jupp0r
Well, Chakra does.

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

~~~
mjvesa
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/](https://mjvesa.github.io/unide/)

------
_JC_Denton
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!

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

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

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

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

------
carlbarrdahl
With this link you'll get a predefined PH template
[https://openchakra.app/?ref=producthunt](https://openchakra.app/?ref=producthunt)

------
pookeh
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/](https://landing.ant.design/edit/)

EDIT 2: Found this also:
[https://www.xiaopiu.com/editor?type=project&id=5b977bf29c2a3...](https://www.xiaopiu.com/editor?type=project&id=5b977bf29c2a3520c7b5c44d&activePage=12&platform=web)

~~~
nirvdrum
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/](https://www.antforfigma.com/)

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

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

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

Looks pretty easy to fork and add stuff to.

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

------
grizzles
Blown away, donation link pls.

~~~
shinework
Thanks, we have just setup the sponsorship button ️

------
randomsearch
OpenChakra is to React what X is to Vue.

Does X exist?

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

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

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

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

~~~
shinework
which browser?

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

------
crazypython
Hmm, how is OpenChakra different from Framer X?

~~~
noonespecial
[https://github.com/premieroctet/openchakra](https://github.com/premieroctet/openchakra)

------
markoehler360
thank you for sharing!

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

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

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

~~~
skrebbel
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?

~~~
warpech
Relevant discussion about ChakraCore
[https://github.com/Microsoft/ChakraCore/issues/5865](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.

