Adding external libraries after dragging custom block

Question

Hi, I am customizing GrapesJS by creating components/blocks my users can drag onto the canvas. A number of these blocks depend upon external libraries like Bootstrap and FontAwesome.. Is there a way to check to see if the necessary dependencies are included on a page, and if not, add them to the page? Here is what I already know. I am hoping that someone can help me fill in the gaps of my GrapesJS understanding, or point me in a helpful direction.I am aware that I can tap into drag and drop eve...

GoodPHP · Accepted Answer

Hi, If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/ We specialise on GrapesJS.

artf · Answer

@stljeff1 the correct way is to use Component related scripts which check if the dependency exists

stljeff1 · Answer

@artf Can I do that with CSS files? Nonetheless, I did manage to "solve" my problem by creating a custom type for the blocks with any kind of dependency (CSS or JS). This custom type extends the default view by adding a custom callback when blocks of that type are placed on canvas. When this callback is triggered, I pop up a dialog box notifying the user of the dependencies, and if user accepts, I add the dependencies to the page.

Adding external libraries after dragging custom block

Question

Answers (3)

Related Questions and Answers

FEAT: Create the canvas from a URL

[Bug]: CSS not added when blocks are drag and dropped after core:canvas-clear command invoked

Customizing Block(section block) While Dragging it

Creating Custom Multiple Block Managers

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Embed GrapesJS in Your SaaS: A Weekend Guide

GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026

Browse Plugin Categories