Issue #4573💬 AnsweredOpened September 9, 2022by ahmafi1 reactions
componentsbugquestioncanvasstyle-manager

ParseStyle is not a function

Quick answerby Singwai❤ 1

This is behaving as expected. There are two similar keys that can alter the style of the component. (styles and style) styles takes a CSS string and is attached to the final payload once. I usually define the default CSS or default CSS with a specific state for the component. style takes a CSS hash and will attach to...

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 104.0.1

Reproducible demo link

https://codesandbox.io/s/grapesjs-parsestyle-bug-13h771

Describe the bug

How to reproduce the bug?

  1. Create a custom component with style property in it's model.
  2. Use this.addAttributes in the component model init function.
  3. Add that component to the editor.

Basically, using this.addAttributes when I have a style property in my component model definition, I get this problem.

I had the same issue on v0.19.4 too.

You can see the following error in browser.

TypeError: this.parseStyle is not a function
    value Component.js:499
    value Component.js:407
    Backbone 5
    value Component.js:425
    value Component.js:437
    init tabs-content.jsx:20
    value Component.js:174
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    he bundle.js:45517
    n bundle.js:45529
    e Frame.ts:55
    s Page.ts:29
    e Page.ts:26
    model Pages.ts:13
    Backbone 4
    loadProjectData Module.ts:164
    load index.ts:285
    O Editor.ts:721
    loadData Editor.ts:720
    O Editor.ts:703
    s bundle.js:50594
    s bundle.js:50606
    a bundle.js:50495
    promise callback*l bundle.js:50513
    v bundle.js:50516
    v bundle.js:50492
    load bundle.js:51037
    loadOnStart Editor.ts:209
    s bundle.js:50594
    s bundle.js:50606
    v bundle.js:50516
    v bundle.js:50492
    loadOnStart Editor.ts:204
    setTimeout handler*./node_modules/grapesjs/dist/grapes.min.js/</n.prototype.loadOnStart Editor.ts:199
    init index.js:76
    FormBuilder FormBuilder.jsx:27
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 18
 
Object { level: "error" }
backbone.js:370

If is necessary to execute some code in order to reproduce the bug, paste it here below:

import grapesjs from "grapesjs";
import "grapesjs-blocks-basic";

const customPlugin = (editor) => {
  editor.DomComponents.addType("custom", {
    model: {
      defaults: {
        tagName: "div",
        name: "Custom",
        style: {
          "min-height": "64px"
        }
      },
      init() {
        this.addAttributes({
          role: "tabpanel"
        });
      }
    }
  });
};

const editor = grapesjs.init({
  container: "#gjs",
  fromElement: 1,
  storageManager: { type: 0 },
  plugins: [customPlugin]
});

editor.addComponents({ type: "custom" });

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

Singwai• September 12, 2022

This is behaving as expected. There are two similar keys that can alter the style of the component. (styles and style)

styles takes a CSS string and is attached to the final payload once. I usually define the default CSS or default CSS with a specific state for the component.

style takes a CSS hash and will attach to that specific component directly with the id.

You can export the HTML and see how they behave.

Here is the related document: image

https://grapesjs.com/docs/api/component.html#component

ClaudeCode• May 17, 2026

Thanks for reporting this, @ahmafi.

Great question about parseStyle is not a function. The recommended approach with StyleManager is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. 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!

Related Questions and Answers

Continue research with similar issue discussions.

Issue #6685

Custom component styles are not applied after deletion and re-addition

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...

4 answersUpdated February 18, 2026

Issue #6706

TypeError: e.getRoot is not a function (Race condition in Style Manager)

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? All browsers (Chrome, Safari, Firefox, Edg...

3 answersUpdated February 18, 2026

Issue #4754

Closing `</script>` tag not escaped for script properties

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 107.0.5304.122 (64-bit) Rep...

2 answersUpdated August 10, 2023

Issue #4576

Clicking 'wrap for style' button affects the inner components of other components inside the same text box

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link...

4 answersUpdated September 13, 2022

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 →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Tutorial

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

A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck — pricing, AI features, lock-in, and a one-line rule for picking the right one

Tutorial

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

We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.

Tutorial

Why use grapesjs shadcn for your template builder

Skip months of editor plumbing and start with a fully working visual builder — polished UI included.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders