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
GJS.Market Is Now Available for India 🇮🇳
GJS.Market is expanding its global presence with a dedicated experience for developers, agencies, SaaS companies, and digital creators in India
Tutorial
How to Build an AI-Powered Page Builder with GrapesJS in 2026
What we learned building GJSDocs — from simple AI text generation to structured, context-aware visual editing
Tutorial
How Much Does It Cost to Build a SaaS Page Builder in 2026?
How much does it cost to build a SaaS page builder in 2026? Explore realistic development costs, timelines, features, and how using GrapesJS can reduce
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.