10 ms·
OpenChakra is an open-source visual editor for React
- warpech 7y agoGreat execution! Anyone knows a similar solution for HTML/Web Components? The closest I have seen is https://hadron.app/ https://hadron.app/
- mjvesa 7y agoTo 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/
- Dirak 7y agoAs 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.
- shinework 7y agoThanks for your feedback! We try to keep the app simple and clean but with strong details and ux
- invalidusernam3 7y agoVery 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
- mattwoodnyc 7y agoI noticed space values (minW, etc) require a “px” to work, but theme-ui doesn’t require it, and defaults “px”
- nexuist 7y agoThe devs may have props, but how do they handle state?
- btown 7y agouseReducer? I hardly even know ‘er!
- api 7y agoIsn't that beyond the scope of a layout component library? It's React so you manage state.
- DecoPerson 7y agoHis comment was in jest. It was a play on the use of the word "props" in "Props to the devs for building this."
- adatavizguy 7y agoLooks like they use Rematch.[0] [0] https://rematch.github.io/rematch/#/ https://rematch.github.io/rematch/#/
- scoot 7y ago> 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.
- thinkingkong 7y agoSooo software?
- SirSavary 7y agoI 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).
- malkia 7y agoOther 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 ;)
- kumarm 7y agoChakra is common Sanskrit word meaning Wheel.
- skrebbel 7y agoYou 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 7y agoChakra 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 7y agoSure, 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?
- randomsearch 7y agoOpenChakra is to React what X is to Vue. Does X exist?
- marvel_boy 7y agoNo
- cypressious 7y agoThere'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.
- manojlds 7y agoWould love something like this for Vuetify.
- makkesk8 7y agoHere's one: https://github.com/fireyy/vue-page-designer https://github.com/fireyy/vue-page-designer
- statictype 7y agoIs 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.
- pxtail 7y agoAlso take a look at: https://grapesjs.com/ https://grapesjs.com/
- ggurgone 7y agohttps://blocks-ui.com https://blocks-ui.com is WIP
- javajosh 7y agoI 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 7y agoBecause using SVG for user interfaces is bad for accessibility (e.g. for users who rely on screen readers)
- collyw 7y agoValid point, but how many people actually pay attention to this in the alternative solutions.
- jupp0r 7y agoWell, Chakra does.
- true_religion 7y agoHow do screen readers handle native applications? Can’t they just do the same thing here?
- carlbarrdahl 7y agoWith this link you'll get a predefined PH template https://openchakra.app/?ref=producthunt https://openchakra.app/?ref=producthunt
- markoehler360 7y agothank you for sharing!
- grizzles 7y agoBlown away, donation link pls.
- Jestar342 7y agoCan this be self-hosted, and can I "drop-in" my own components?
- danielheath 7y agoFollowing the github link, it appears this is 100% client-side. Looks pretty easy to fork and add stuff to.
- Layvier 7y agoI'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
- pjmlp 7y agoIt looks quite good. Finally we are increasingly getting VB/Delphi on the Web.
- biermic 7y agoI'm having trouble understanding for whom this is is built. Obviously not for me, but what's the problem that editor is solving?
- seek3r00 7y agowell, 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.
- moksly 7y agoI 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.
- sixQuarks 7y agoI 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.
- Barrin92 7y agoI 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.
- crazypython 7y agoHmm, how is OpenChakra different from Framer X?
- vijaybritto 7y agoIs framer x free? And does it only use chakra ui components to build on?
- noonespecial 7y agohttps://github.com/premieroctet/openchakra https://github.com/premieroctet/openchakra
- pookeh 7y agoI 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=5b977bf29c2a3520c7b5c44d&activePage=12&platform=web https://www.xiaopiu.com/editor?type=project&id=5b977bf29c2a3...
- nirvdrum 7y agoWhile 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 7y agoI 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.
- _JC_Denton 7y agoI 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!
- dana321 7y agoI 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.
- speg 7y agoAm I daft? How do you drag/reorder components? Tried Safari and Edge :(
- roryokane 7y agoIn 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.
- snisarenko 7y agoThis 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.
- dvh 7y agoI 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 7y agowhich browser?