Traits not appear in edit mode when i update grapes version
@alialrabi How do you define traits? Inside blocks or custom components?
Read full answer below ↓Question
Hi artf, i make traits for specific component ,when i saved this component as a json and load again in editor the traits were load correctly and there is no proplem , when i update version of grapesjs traits appear only in first time , when load component again default trait was exist , how can i load traits again , and appear it in edit mode ?
Answers (3)
@alialrabi How do you define traits? Inside blocks or custom components?
@artf i have created traits in custom component like this
domComps.addType('assetType', {
model: dModel.extend(
{
init() {
this.listenTo(this, 'change:type', this.doStuff);
},
doStuff() {
},
defaults: Object.assign({}, dModel.prototype.defaults, {
traits: [
{
name: 'button',
label: 'Add',
type: 'buttonModal',
changeProp: 1
},
{
type: 'select',
label: 'Page',
name: 'type',
options: this.pagesList,
changeProp: 1,
},
],
}),
},
{
isComponent: function (el) {
if (el.tagName == 'div') {
return { type: 'asset' };
}
},
},
),
view: dView,
});@alialrabi you're defining your component with a name assetType but then in isComponent the type is asset
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1696
Traits appear first time when draged custom component
Hi artf , i have created custom component and add traits for it , when dragging this component to editor and select it the setting traits w...
Issue #3482
Runtime updated traits not EDIT mode.
Hello @artf I having issue with a traits. When I drag and drop the block to canvas it's traits showing fine in under settings section. but...
Issue #577
Only allow one component of specific type on editor
is there way to not allow to drop any specific component more than one time on page? I have custom component and user cannot drop it more t...
Issue #3948
My Options ( in traits ) for select component gets resetted every time after each reload of page
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
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
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Tutorial
🚀 Introducing the New GrapesJS Plugin Generator on GJS.Market
We’re excited to announce a powerful new tool for GrapesJS developers — the GrapesJS Plugin Generator on GJS.Market!
Tutorial
Integrating GrapesJS into a Vue 3 App — Complete Guide for 2026
Build a Vue 3 landing page builder with GrapesJS and Vite. Custom blocks, composables, remote storage, TypeScript & production tips. Updated for 2026.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.