HELP: Replace the green drop indicator line on drag/drop hover

[scarletczen]

Hey wizards, need some help
Has anyone been able to replace it with your own element, let's say a box that takes up space in the canvas?
I've looked at the paid plugins and I can't use that, even if you point me to what APIs and overall solution to work with, I could creatae it myself.

I appreciate any help I can get, thank you!

[GoodPHP]

You can’t fully replace the default green drop indicator with your own DOM element out of the box in GrapesJS.

However, there are three practical approaches depending on how far you want to go:

Style it via CSS (quick & supported)
Hook into drag events and simulate your own UI (advanced)
Replace the entire dragging UX (full solution)
✅ 1. Customize the default indicator (CSS)

The green line (.gjs-placeholder) is not part of the Spot system, but it can be overridden via CSS:

/* Horizontal drop line */
.gjs-placeholder.horizontal {
border-color: transparent red;
border-width: 2px;
}

/* Vertical drop line */
.gjs-placeholder.vertical {
border-color: red transparent;
}

This is the simplest and most stable approach, but you're limited to visual tweaks only.

⚙️ 2. Advanced approach (events + custom UI)

If you need more control, you can hook into the drag lifecycle and render your own placeholder:

editor.on('component:drag:start', () => {
// Initialize custom placeholder
});

editor.on('component:drag', ({ target, parent, index }) => {
// Track position and update your UI
});

editor.on('canvas:dragover', () => {
// Update position continuously
});

editor.on('canvas:drop', () => {
// Cleanup your custom UI
});

With this approach, you can:

Hide the default placeholder (via CSS)
Render a custom element inside the canvas iframe
Simulate drop positioning
⚠️ Limitations
No official API to override placeholder rendering
You must calculate positions manually
Complex layouts (flex/grid/nesting) are difficult to handle correctly
Performance can degrade if not optimized
🚀 3. Full replacement (real solution)

If your goal is something like:

“A real block that takes up space inside the canvas while dragging”

Then you're not just customizing — you're replacing the entire drag-and-drop UX.

This involves:

Tracking drag position
Predicting the correct drop index
Rendering a live preview element
Syncing with GrapesJS internal state

👉 This is non-trivial and typically requires a plugin-level implementation.

✨ Example of a complete solution

There is already an implementation of this approach:

https://gjs.market/products/placeholder-2-0-new-dragging-effect-for-components

What it does:

❌ Removes the default green line completely
✅ Shows a real block preview while dragging
✅ Uses actual component dimensions (WYSIWYG)
✅ Provides a much clearer UX (similar to Webflow / Framer)