OpenChakra is an open-source visual editor for React

Re:OpenChakra is an open-source visual editor for React by statictype on Thursday February 13, 2020 @03:34AM (#22316221)

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.

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by mmonihan on Thursday February 13, 2020 @06:30AM (#22316888)

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.

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by pxtail on Thursday February 13, 2020 @04:52AM (#22316513)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by ggurgone on Thursday February 13, 2020 @04:05AM (#22316332)

https://blocks-ui.com is WIP

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by dkrvt on Thursday February 13, 2020 @09:37AM (#22318017)

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/

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by inyono on Thursday February 13, 2020 @05:07AM (#22316569)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by dharma1 on Thursday February 13, 2020 @06:02AM (#22316779)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by javajosh on Thursday February 13, 2020 @04:28AM (#22316430)

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.

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by ath92 on Thursday February 13, 2020 @05:05AM (#22316560)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by true_religion on Thursday February 13, 2020 @04:59PM (#22321861)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by collyw on Thursday February 13, 2020 @05:29AM (#22316649)

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

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by jupp0r on Thursday February 13, 2020 @05:56AM (#22316753)

Well, Chakra does.

[ Parent | on HN ]

Re:OpenChakra is an open-source visual editor for React by ausjke on Thursday February 13, 2020 @12:18PM (#22319436)

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

[ Parent | on HN ]