Minimal requirements to create a custom component
First of all, start using the improved definition of components. In your example, the content: (<div>Foo</div>), will be compiled to an object, and when you add an object/array of objects to the editor, it means you don't need the parsing process anymore so you never hit isComponent, therefore that type is not initial...
Read full answer below βQuestion
I've been reading the docs all day on creating a custom component. I've also looked at grapesjs-mjml for an example. I'm trying to create a base type for react components that can be extended as needed, but at the moment all I want to see is which lifecycle methods are called and when. I'm trying to work out the difference between render and toHTML specifically. I've created just a bare bones component with some logging, and it doesn't seem to be working. Here is my code I'm passing a React component as the content, which I expect not to render currently, but I'm not getting a single log in m...
Answers (2)
First of all, start using the improved definition of components. In your example, the content: (<div>Foo</div>), will be compiled to an object, and when you add an object/array of objects to the editor, it means you don't need the parsing process anymore so you never hit isComponent, therefore that...
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1966
[QUESTION] Loop over all components
Hi all, I want to create a socket for every button that I add to the canvas. This is working just fine. However, when I reload (using stora...
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #429
custom component save
hi @artf sorry to be a pain i really didn't want to open a issue ticket but i have been stuck for days trying to achieve my end goal i have...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.