5 ms·

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 th

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.

pxtail 7y ago
Also take a look at: https://grapesjs.com/ https://grapesjs.com/
ggurgone 7y ago
https://blocks-ui.com https://blocks-ui.com is WIP
javajosh 7y ago
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 7y ago
  Because using SVG for user interfaces is bad for accessibility (e.g. for users who rely on screen readers)
  - collyw 7y ago
    Valid point, but how many people actually pay attention to this in the alternative solutions.
    - jupp0r 7y ago
      Well, Chakra does.
  - true_religion 7y ago
    How do screen readers handle native applications? Can’t they just do the same thing here?
inyono 7y ago
Also WIP: https://github.com/edtr-io/edtr-io/ https://github.com/edtr-io/edtr-io/. Focuses on defining an easy-to-use editor with constraints for content
dharma1 7y ago
I think https://www.webiny.com/ https://www.webiny.com/ lets you add your own react UI components
mmonihan 7y ago
https://ResponseVault.com 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.
dkrvt 7y ago
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/ https://wordpress.org/gutenberg/
ausjke 7y ago
many UI builder for bootstrap, which includes react-bootstrap.

pxtail 7y ago

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

ggurgone 7y ago

https://blocks-ui.com https://blocks-ui.com is WIP

javajosh 7y ago

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 7y ago
Because using SVG for user interfaces is bad for accessibility (e.g. for users who rely on screen readers)
- collyw 7y ago
  Valid point, but how many people actually pay attention to this in the alternative solutions.
  - jupp0r 7y ago
    Well, Chakra does.
- true_religion 7y ago
  How do screen readers handle native applications? Can’t they just do the same thing here?

inyono 7y ago

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

dharma1 7y ago

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

mmonihan 7y ago

https://ResponseVault.com 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.

dkrvt 7y ago

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/ https://wordpress.org/gutenberg/

ausjke 7y ago

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