Custom trait input not working

Then, in createInput() you should return an Element. So instead of returning a simple string, do this:

const el = document.createElement('div');
el.innerHTML = `<input type='checkbox'/>`
return el;

If you want to have a simple checkbox with label, no need to create custom trait, you can just use directly:

editor.DomComponents.addType('text', {
            model: {
              defaults: {
                traits: [
                  {type: 'checkbox', label: 'Fix position when scrolling', name: 'position-sticky'}
                ]
              }
            },
});

Thanks for reporting this, @RaresVlaiduc.

The issue with Custom trait input not working appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report