Third Story: Trait Setting in Grapes JS

Traits define different parameters and behaviors of a component.

The user generally will see traits as the Settings of a component.

A common use of traits is to customize element attributes or you can also bind them to the properties of your components and react on their changes. https://grapesjs.com/docs/modules/Traits.html

But in our customization we do not have trait manager/setting. So let’s add it.

I just made some small changes in id and href to fix proper tab opening.

And also added one more tab for Trait Setting. You can simply copy below HTML there is nothing difficult here.

Now it’s time for our setting in Grapes JS for Trait, Style Manager, Selector Manager.

For Style Manager we will add sectors where we can give what configuration you want to allow like dimension, width, height etc.

For Trait Manager and Selector Manager we will enable it.

I also added some commands to switch different devices view like mobile, large screen.

If you want to follow this on youtube.

Thanks see you next story.