How to get the external plugin CSS, JS and HTML through GrapesJS export feature?
. But we are unable to show users the calendar on the canvas after drag and drop with render function in MODEL that is why we used OnRender in the VIEW. Did you try the component type definition i posted for you? it has been tested and it is working: So, is the MODEL alone sufficient to render as well as add HTML to e...
Read full answer below βQuestion
I have used an external plugin javascript version of @fullCalendar into the GrapesJS. I am able to render the calendar on the canvas but I am unable to use GrapesJS export feature to get JS, CSS and HTML of the following. I tried using 1) var html = editor.getHtml(); 2) var css = editor.getCss(); 3) var js = editor.getJs(); 4) editor.on('component:mount', comp => console.log(comp.toHtml())); Calendar rendered on Canvas - Export of GrapesJs Editor - Kindly help me! Thanks in advance ...
Answers (3)
. But we are unable to show users the calendar on the canvas after drag and drop with render function in MODEL that is why we used OnRender in the VIEW. Did you try the component type definition i posted for you? it has been tested and it is working: So, is the MODEL alone sufficient to render as w...
Thanks a lot, @pouyamiralayi. The code you gave was working. Our code was not able to pick the dom element to render the calendar. Now it is working as expected.
Thanks a lot for helping us out !!!! :-p
Hi there! what you are looking for is using js inside components. just include the required js and css in the canvas scripts and styles section: after that build your own custom type component: then on code preview you will see the result script: cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3238
How to load external javascript,i tried all methods,Useless
I write html strings as blocks, and need to introduce a lot of external scripts and styles, but I tried all the methods, when I drag the bl...
Issue #2416
Unable to display template from database to grapesjs
Able to fetch my remote HTML file using load URL and getting status ok, how can I load this fetched HTML AND CSS into editor? currently I'm...
Issue #3347
How can I get Uncompressed JS code for me to edit?
Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit htmlγcss and js. 1γFirst, I use getHtml, getCss, getJs to dis...
Issue #966
How to load external CSS file into Grapes Editor?
Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custo...
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.