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 added.
Any idea how to achieve that and make the changes appear in the exported code too?
Thank you in advance.
Answers (3)
I think you need to add the attribute to the model, rather than the view.
Then, you'll need to render the view.
I think it's like this, but no guarantees 😄
let selected = editor.getSelected();
selected.addAttributes({blockId: 1});
selected.view.render();
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
[BUG] 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
BUG: 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
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
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
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.