Issue #6591πŸ’¬ AnsweredOpened August 20, 2025by CES-TechAdmin0 reactions

In Safari, drag and drop of blocks does not work since v0.22.1

Quick answerby them7d

yes, it doesn't work because the code is not fully compatible with safari browser to fix this problem you need to use grapes in nextjs like this page https://grapesjs.com/demo.html

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Safari 18.5 on Mac

Reproducible demo link

https://codepen.io/jmulik/pen/LEpdjZq

Describe the bug

How to reproduce the bug?

  1. View https://codepen.io/jmulik/pen/LEpdjZq in Chrome - Able to drag and drop blocks.
  2. View same in Safari. - Unable to drop and drop blocks.

What is the expected behavior? Drag and Drag should work in Safari. Just like in Chrome.

What is the current behavior? Drag and Drop of blocks does not work in Safari.

Observations Drag and Drag in Safari works in GrapeJS v0.21.13. Broken in v0.22.1 and later.

The cause of the issue seems to be the inability of the grapejs session to create the gjsProject key in browser local storage.

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (2)

them7dβ€’ August 20, 2025

yes, it doesn't work because the code is not fully compatible with safari browser to fix this problem you need to use grapes in nextjs like this page https://grapesjs.com/demo.html

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @CES-TechAdmin.

Great suggestion about In Safari, drag and drop of blocks does not work since v0.22.1! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

  • Listen to selector:add for CSS selector changes
  • Use selector:custom for custom rules
  • Tap into the change:* events for fine-grained tracking
  • Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

  • A detailed use case
  • Code example showing the desired behavior
  • Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

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.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.