SlashDiv: React JS and NoCode

I’ve been working on Slashdiv for the past few months and have made it available for public use now (Sign Up at https://app.slashdiv.com).

Slashdiv is a visual, no-code, layout builder for React JS. What is the story behind this, you ask? Okay you didn’t, but here it is.

Let me rewind 6 months. Back then, I was exploring problems to work on and started building small React prototypes. I followed a process of creating a design mockup on Figma and converting the design to an implementation using React JS. It was immediately obvious that this process is very cumbersome today. There were a few irksome issues here:

1. Configuring components: Each time I wanted to create a component (say a Button), I had to go to Material UI’s reference and lookup options or copy paste code from my existing codebase. For instance, getting answers to: does Typography support fullWidth, is it nowrap/noWrap/no-wrap, and progressive Grid configurations that require quite a bit of trial and error.
2. Annoying compilation and browser refresh delays: Each time you change a Prop of a component, there is a compilation + browser refresh cycle (usually a few seconds). This gets annoying after a while.
3. Trial and error: In several instances, I found myself needing to copy over components to try a different set of properties or styles to see how it works. Having to make a copy, experimenting with styles and props, with compilation delays and documentation references is extremely cumbersome.
4. 10,000 feet view of the UX problem: When I code, it is usually hard for me examine the user experience and interactions at a high-level because I tend to get absorbed with the technical problems. After an implementation, I often go back to the drawing board to redo a particular user flow to make it more intuitive and simpler.

Building UI is a visual task

Slashdiv was born out of a realization that UI is a visual craft. Having a visual builder for UI addresses several of the problems I faced.

Layout: Slashdiv allows you to add components from frameworks (Material UI, Ant Design and plain HTML for now), modify props and CSS styles, and view the changes instantaneously in the viewer. You can layout your UI with components from these powerful component frameworks.

Work together: If you are working in a team with product managers, designers and other developers, Slashdiv allows you to refine your UI collaboratively.

Layout first, Code later: A visual editor allows you to focus on finalizing your UI layout before going into a development cycle.

Slashdiv: Sign Up for Free

Slashdiv is now available for use at https://app.slashdiv.com. I would love to hear your comments and feedback on the product. Thanks.