Absolute/Designer mode
Quick update, from the https://github.com/artf/grapesjs/releases/tag/v0.15.3 you can start using these new Drag Mode APIconfig.dragMode - The initial configuration for the global drag modeeditor.setDragMode - change the global drag mode of componentscomponent.setDragMode - change the drag mode of a single component Po...
Read full answer below ↓Question
Hi guys, this issue is an overview of what is it, what is done, what to do and nice-to-have to complete the Designer Mode feature.Preface So let's start by describing what is it and what is the goal of this feature. The Designer mode should allow the user to drag components freely around the canvas, without HTML fixed positioning constraints, more like you'd do in tools like Photoshop/Sketch. This way moving components is much more intuitive especially for who has nothing to do with HTML positioning. This approach might be extremely useful if you're building documents where the final result i...
Answers (3)
Quick update, from the https://github.com/artf/grapesjs/releases/tag/v0.15.3 you can start using these new Drag Mode APIconfig.dragMode - The initial configuration for the global drag modeeditor.setDragMode - change the global drag mode of componentscomponent.setDragMode - change the drag mode of a...
@simplecommerce When clicking on device modes, if using absolute positioning, would create the styles only for that mode, it would make it easier to build responsive pages, as you could toggle between the device modes and position your elements. GrapesJS works already in this way, but this doesn't...
@sunhillbd yes, but probably it's my fault for not being totally clear about the point. Basically, what you see in the demo is an example of mixing static position with absolute one, when you click on the drag icon you detach the component from the static flow so the effect you see it's like removi...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2419
[BUG] Absolute dragmode does not work on touch devices
Absolute dragmode (with grapesjs touch plugin) does not work on touch devices. GrapesJS version:0.15.8 Expected behavior: The user should b...
Issue #1368
Resize canvas
Is there a way to have a dynamic resizing of the canvas? i.e not using the Device Manager, but having a drag and drop of the width, similar...
Issue #2207
[BUG]: Can't drag component if there is some space on top/left with Mode Absolute
Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See F...
Issue #2355
[req] Rulers support in designer mode?
I know there's an older thread with Rulers support as a suggested roadmap item (but it's been closed) - Just wondering if there's any chanc...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.