Add attribute to HTML
I think you need to add the attribute to the model, rather than the view. https://github.com/artf/grapesjs/blob/50cc585f23f2560077fd0e9a42ced22e67e69723/src/dom_components/model/Component.js#L298 Then, you'll need to render the view. I think it's like this, but no guarantees 😄
Read full answer below ↓Question
Hello everyone, I want to add an id for each block I drag and drop in the canvas; To be more clear, I do not want to add an Id for each type, per example: Image, Table, Box, ... I want to add ad Id for each block, which means per example, the block "1 section" becomes <table ... blockId = 1>. I am trying to use those 2 commands:editor.getSelected().view.$el[0].setAttribute("blockId","1")editor.getSelected().get('components').trigger('resetNavigator') Yes the changes do appear on the canvas if I do "Inspect Element", but If I try to export the HTML code of the template, the attribute is not ad...
Answers (3)
I think you need to add the attribute to the model, rather than the view. https://github.com/artf/grapesjs/blob/50cc585f23f2560077fd0e9a42ced22e67e69723/src/dom_components/model/Component.js#L298 Then, you'll need to render the view. I think it's like this, but no guarantees 😄
Hello, Just leaving an example in case someone else needs.
editor.on('block:drag:stop', function(model) {
model.addAttributes({ 'data-block_id': '123xyz' });
});
Just like James suggested but without selected.view.render() as the view will receive changes simultaneously
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #3759
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link htt...
Issue #969
Video block - Loop option
Hello everyone, I noticed that when you drag and drop a video block to the canvas, choose youtube, add the correct video ID and check the l...
Issue #2961
Components in custom modal isn't editable
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component — click to select, then one-click fix.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.