Unleash 🔥

About

Welcome to ui-editor, where I strive to make the machine work for me, not the other way around. This cutting-edge, web-based interface builder, powered by ReactJS, is your key to rapid application development. Forget wrestling with framework syntax – focus on building components using jsx, state, and events.

What began as an experimental tool for readable code generation has evolved into a powerhouse for instant rendering. Witness its capabilities in action through the recorded video and the mesmerizing drag-and-drop feature. Not to mention, it allows you to edit styles – talk about intriguing!

And that's not all! I've integrated react-flow for an infinite canvas. Check out the mind-blowing demo here.

See it in action - Demo

Draw on left, see the code on right (working on it)

Explore More - Wiki

Crisp - Illustrative story

Discover More - Latest Design

Find the source for current changes at ui-editor/flow.

Engineering Efficiency

Blueprint - Architecture - Design Wireframe

Challenging Features

• Code Generation at Warp Speed: Watch it in action – revolutionize component creation and maintenance.
• Recursive Component Awesomeness: See the magic – can a component modify itself? Spoiler alert: yes!
• Todo Application Mastery: Witness the creation of a typical TodoMVC, transcending the ordinary.
• Reveal the Layers: Step into the future – abstracting the editor, revealing layers of tools for the ideal builder.
• Layout Designer Extraordinaire: Experience the power of Select, Resize, Copy, Move, Delete in the builder toolbar.
• The Infinite Display Saga: Embark on the journey towards a complete web development workflow – design tool, system manager, component composer, and more!

Get Inspired - Watch the Series

Getting Started

Install NodeJS and Git. Then, unleash the power with these commands. Note: use nodejs < 16

git clone https://github.com/imvetri/ui-editor.git
cd ui-editor
npm i (or try yarn install)
npm start

Features

Separation of Concerns

Modern frameworks tend to mix and match view, styling, callbacks in a single file. Considering individual opinions on separation of concerns, I moved view, style, state, callbacks into separate interfaces, keeping things clean.

Component Composability

Component-driven development is the trend where we develop lower, more atomic components and build bigger components using the smaller ones. Instead of using tools like redux, hooks to manage the state between the components, mirror the event model of the DOM that bubbles upwards to components. By following this technique, we can build pages from bottom upwards.

Code Generation

This IDE separates concerns, aids in component composability, and facilitates readable code by putting everything together as a React component. The code generation is an independent utility script that can be formatted to generate code for JSX, style, state in separate files. The current version generates all of them together as a string, printing it on the browser console.

Slick

Everything is data. HTML, CSS, State, Events, Reducers – all just strings. Code generation is a knacky technique based on the fact that everything is just a string. Pass a string to eval with Babel, and you get a runtime in the browser.

Contributions

This project, designed with one happy path in mind, requires a substantial effort to enhance the user experience. Typing JSX, CSS, state, events, and reducers without code formatters and prediction is challenging. The component explorer needs a smoother look, and the renderer can be extended to support different devices. The project has the potential to evolve into a UX design tool, and with code generation already in place, it becomes powerful in terms of time to build components. If you know someone willing to moderate the project or bring in more contributors, please spread the word. Your help and support can make a quick journey. Feel free to reach out if you have free time to spare: Twitter.

1. Moderator: Bring in UX designers – their perspective and contribution will make the experience smoother. Bring in initial users, document needed features, and bring in technical writers.
2. UI Developers: Make visual changes and implement features.
3. Utility Developers: Code generators (it's just a string, doesn't use any fancy design pattern), Fixed styled div to DOM layout flow (Just convert fixed style to padding and margins).

Communication

• Open an issue.
• Checkout Discord.
• Reach out on Twitter or Email.