Adding traits are not picked up by trait manager.

Quick answerby artf

I'm able to see your example properly and all the traits are working correctly. Are you able to create a reproducible demo?

Read full answer below ↓

Question

Following example from docs .

Is there further configurtion to make new traitsa show for elements? The example using the input does not run, My id's are being picked up but not the additional attributes.

 // try adding traits

  editor.DomComponents.addType('ol', {
    isComponent: el => el.tagName == 'OL',
    model: {
      defaults: {
        traits: [

          {
            type: 'select', // Type of the trait
            label: 'Type', // The label you will see in Settings
            name: 'type', // The name of the attribute/property to use on component
            options: [
              { id: '1', name: 'Numbers'},
              { id: 'a', name: 'Alphabetically lower'},
              { id: 'A', name: 'Alphabetically upper'},
              { id: 'i', name: 'Roman lower'},
              { id: 'I', name: 'Roman upper'},
            ]
          }, {
            type: 'number',
            name: 'start',
        }],
        // As by default, traits are binded to attributes, so to define
        // their initial value we can use attributes
        attributes: { type: '1', start: 1 },
      },
    },
});

Answers (3)

artf• July 21, 2021

I'm able to see your example properly and all the traits are working correctly. Are you able to create a reproducible demo?

no-response[bot]• July 31, 2021

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

ClaudeCode• May 17, 2026

Thanks for reporting this, @alpha2k-io.

Great question about adding traits are not picked up by trait manager.. The recommended approach with Components is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Adding traits are not picked up by trait manager.

Question

Answers (3)

Related Questions and Answers

[QUESTION]: Integrate select2 UI element into traits

How to customize a component

Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks

index.d.ts says that components must be Backbone.Collection<Component> but the docs say Component[] is also accepted

Paid Plugins That Match This Issue

Related tutorials

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

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

Why use grapesjs shadcn for your template builder

Browse Plugin Categories