Not able to implement it with iframe. "CONTAINER" in frame and "BLOCK" outside the frame
@Atmiya735 take a look at this fiddle which is using custom layout for blocks section. cheers!
Read full answer below βQuestion
Hello Team, I m new to grapejs and little bit fresher in JS. What i have to achieve => I have to make display the container in iframe which i m loading for the preview => Blocks section should be out of the ioframe in main page from where i will drag and drop the block within iframe. Which issue i m facing => if i add the init container in iframe and try to add block section in main page using block manager it is doing. But when i try to drop the block in that container of iframe it is not working. The same thing will work if i put the block within the iframe itself. Hope my explanation is be...
Answers (3)
@Atmiya735 take a look at this fiddle which is using custom layout for blocks section. cheers!
Thanks for help, but i want to implement container section in iframe and blocks section outside of the iframe, and still want to achieve the feature of drag and drop in it. Please help me out in this
@Atmiya735 if you notice in the provided fiddle the blocks section is outside the iframe. cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2744
Disable a block drag&drop
Hello everyone, I would like to make forbidden the drop of one block before another specific one. Context : i've create a new trait for som...
Issue #543
Blocks Manager in GrapesJS Not Working For Columns
Hello, My installation of GJS ties in all of the default blocks. Every block drags fine onto the page with the exception of all the "column...
Issue #1329
How to use same CSS for Multiple pages
Hello Grapejs Team, We've been working on Multi-page Website Builder. For each project there will be multiple html pages with single common...
Issue #3016
Secondary block manager
Currently there is only 1 block manager. I wish to move the blocks to the left of canvas. Where I can drag and drop the block from the left...
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
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component β click to select, then one-click fix.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners β this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.