Next begins the hunt for the "start" file.In this case, if there was drag and drop involved, react-dnd was found.
This usually gives you a great idea of how they handle core functionality. I check out the package.json (or equivalent file like composer.json in PHP) to see what dependencies they're using.
Drag and drop web editor software software#
To give you an idea of how I approach this process for a software project: I reverse-engineered each project to see how it worked, and took notes on it. I already knew about OpenChakra, Blocks UI, and Playroom, so I started there. When you know something already exists, or even if you don't, the best place to often start is research.
Drag and drop web editor software code#
Blue bordered components in the preview box represent nestedĬheck out of the source code here, or read on to discover how I built it. Middle of the screen as a black bordered box that renders a list ofĬomponents. A small React app that accepts Reacts components to drag and drop into an "artboard" or "canvas", and then exports that to React code (or JSX) you can import into your project. So I got to thinking, how would you actually make a UI for building sites with components (like Figma or Sketch) and then export that to code?Īnd by thinking, I mean researching, reverse engineering, conceptualizing, and inevitably coding: design-system-builder. With software like OpenChakra, Blocks UI, or even Playroom - we've gotten a taste today of what platforms like Framer, Modulz, and other's have promised to use in an unforeseen future: design to code. Wouldn't it be cool if you could create a website by dragging and dropping pieces of it around? To some it sounds like a green-weaved nightmare, to others it sounds like a proprietary platform - but this fantasy of freedom is becoming closer to being standardized into modern design and development workflows.
0 kommentar(er)
