Placeholder 2.0 is the perfect plugin for anyone looking to add a new dragging effect to their components. This plugin replaces the default Drag&Drop PlaceHolder with an actual size and content block render. With Placeholder 2.0, you can always see your block in real time, eliminating the need for a green line from the editor. This plugin is perfect for anyone looking to add a more realistic and efficient dragging effect to their components.

Placeholder 2.0 - New dragging effect for components

Updated 23.11.2025 - Version 0.1.17 - Updated for Core GrapesJS 0.22.x and added some new animations

Updated 28.10.2023 - Version 0.1.3

New options:

dragDefault: This option allows you to define a default placeholder for an array of components.

dragClasses: Use this option to specify classes for the dragging block. The default classes include 'gjs-selected,' 'gjs-freezed,' and 'animation.'

animation: This option provides a selection of default animations for the dragging block. Options: animation1 / animation2 / animation3 / animation4 / animation5 / none

dragPlace: Utilize this option to replace a placeholder block with any HTML or CSS block.

customAnimation: You have the flexibility to add your custom animations to a block. This feature should be connected to the '.animation' class.

Example:

@keyframes slidein {

from { max-height: 0px; transform: scale(0); opacity: 0; }

to { max-height: 1000px; transform: scale(1); opacity: 1; }

}

.animation { animation-duration:0.5s; animation-name: slidein; }

drag&drop grapesjs

Placeholder 2.0 - Elevating Component Dragging Experience

Related blog posts