Get Specific editable components and styles

[assadnazar]

I would like to know that how can I get only editable components and their styles when storage api is called. Right now, I have loaded a full html templates including html, head and body tags as well as local/external scripts and stylesheets. But what I want at the end is only the data-editable components.

Any idea on this?

[bgrand-ch]

Hello,

const editor = grapesjs.init({})

editor.on('storage:end:load', ({ components: c, styles: s }) => {
  const components = JSON.parse(c)
  const styles = JSON.parse(s)

  console.log({
    components,
    styles
  })
})

🤔

Sources:

• https://grapesjs.com/docs/getting-started.html#start-from-the-canvas
• https://grapesjs.com/docs/api/editor.html#available-events
• https://grapesjs.com/docs/api/components.html#load

[assadnazar]

this is not triggering?

[artf]

What do you mean by "only editable components"? By default, the Storage stores and loads all the content in your canvas, if you need something custom try to check this