Sitecloud

The first platform to generate clean code from its design components. Overlay is a plugin to convert Figma or Sketch components into React/Vue.js/HTML clean code components. Overlay instantly creates dev-friendly web components from designer tools. This documentation assists designers and developers in accelerating their web design integration process. We’ve developed Overlay so that designers can be autonomous in building pixel-perfect components without knowing the modern JavaScript framework. Moreover, We think front-end developers must spend their time on high-value tasks (performance, SEO, business logic)and not on translating UX work to code. Overlay Playgrounds are design files with a lot of component examples, ready for Overlay, and all the explanations to make them by yourself and become an expert. It's still possible to use Overlay with other setups, this adds a little work overhead after getting components code. In the future, we will add more and more setups.

Grapes Studio is a free and open source web builder framework designed to help developers and content teams create HTML templates, landing pages, newsletters, or site layouts using a powerful drag-and-drop editor, no deep coding required. The editor includes a visual canvas where users can add, move and configure components such as sections, images, buttons, iframes or text blocks; a Block Manager to define reusable HTML fragments; a Style Manager for CSS-like visual styling; a Layer/Structure Manager to intuitively organize component hierarchy; an Asset Manager for images and media; built-in command-set (undo/redo, preview, full-screen) and support for more advanced extensibility via APIs and plugins. Because the framework is unopinionated, developers can use it as a standalone editor embedded within an application or platform, or customize panels, toolbars, and behaviours to suit their UI.