Placeholder 2.0 - Premium Drag Experience

Stop fighting GrapesJS's default drag-and-drop. Placeholder 2.0 replaces the standard grey rectangle with a live, full-size preview of the block being dragged — complete with smooth animations, drop-zone highlighting, and full control over the visual feel.

Your users see exactly what they're placing, exactly where it lands. No more guesswork.

What's new in v1.5.0

A full rebuild from the ground up — same behavior you loved, modern toolchain underneath:

• TypeScript-first — full source rewrite with bundled .d.ts declarations for instant autocomplete
• GrapesJS 0.21 + 0.22 support — works with current releases out of the box
• ~8 KB gzipped — Vite-powered build, half the size of the old Webpack bundle
• 10 animation presets + custom CSS animations
• Custom placeholder mode — replace the live preview with your own HTML/CSS
• Configurable drop-zone color (dropZoneColor) — match your brand
• Fine-tuned timings — flipDurationMs, flipThresholdPx, escapeDispatchDelayMs are now exposed
• Clean teardown — idempotent destroy() method; no leaked event listeners on editor.destroy()
• Option validation — invalid values fall back to defaults with a clear console.warn instead of silently breaking
• 76 unit + integration tests (Vitest) — battle-tested before every release
• Firefox compatibility fixes — drag-outside-canvas behavior is now reliable across all major browsers
• GrapesJS Studio SDK compatible — works inside the Studio editor

Features

Live content preview while dragging

Forget the default placeholder. Your block is rendered at full size with all its styles applied as you move it — the user sees the actual result, in real time.

10 built-in animation presets

Pick the feel that matches your editor:

Custom animations

Drop in your own @keyframes + .animation CSS — total creative control:

{ customAnimation: ` @keyframes my-anim { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .animation { animation: my-anim 300ms ease-out both; } ` } 

Custom placeholder block

Want a thin drop indicator instead of a live preview? Swap it out:

{ dragPlace: { default: 0, html: { block: 'div', content: '' }, css: 'background: #5C6AC4; height: 4px; width: 100%;', } } 

Drop-zone highlighting

A configurable color outline marks the active drop target — no more "where is this going to land?"

Per-component opt-out

Some component types (e.g. text) work better with the default placeholder. List them in dragDefault and the plugin steps aside automatically.

Quick start

npm install grapesjs-plugin-placeholder2 

import grapesjs from 'grapesjs'; import placeholder from 'grapesjs-plugin-placeholder2'; grapesjs.init({ container: '#gjs', plugins: [placeholder], pluginsOpts: { [placeholder]: { animation: 'animation1', dropZoneColor: '#5C6AC4', dragDefault: ['text'], } } }); 

Also ships as a UMD bundle for plain <script> tag usage.

Use cases

• SaaS page builders — give your users a premium drag-and-drop feel
• CMS editors — make content blocks feel tangible
• Email builders — visualize block placement before drop
• Landing-page tools — polish the editing UX
• GrapesJS Studio projects — fully Studio SDK compatible

Technical details

• GrapesJS:^0.21.0 || ^0.22.0
• Bundles: ESM + UMD with rolled-up TypeScript declarations
• Size: ~8 KB gzipped
• Node: ≥18 (for development)
• Tested: 72 Vitest tests + Playwright E2E suite

Why upgrade from the old version?

If you're using the original Placeholder plugin:

• The old plugin was Webpack 3 + Babel 6 — no longer compatible with modern toolchains
• No TypeScript, no types, no Studio SDK support
• Hardcoded colors, hardcoded timings, no destroy() method
• Event listeners leaked across editor instances

v1.5.0 fixes all of this without changing the API surface you know.