Script-props is invalid
Seems to work all properly here: https://jsfiddle.net/rp7wa58h/ Anyway, you don't need the view if you don't use it, and the same for isComponent (which is misspelled in your example and placed in the wrong place), data-gjs-type is already used, by default, in the same way automatically by the editor
Read full answer below ↓Question
Hi!@artf,Thanks for your great work! I follow the https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts,but when i select the value,The script was not executed,Looking forward to some suggestions,thank you so much!
export default function (editor, opt = {}) {
const c = opt;
const domc = editor.DomComponents;
const defaultType = domc.getType("default");
const defaultView = defaultType.view;
const TYPE = "test";
const script = function (props) {
alert("Hi");
};
editor.Components.addType(TYPE, {
model: {
defaults: {
script,
stitle: "value1",
'script-props': ['stitle'],
traits: [
{
type: "select",
name: "stitle",
changeProp: true,
options: [
{ value: "value1", name: "Value 1" },
{ value: "value2", name: "Value 2" },
],
},
],
},
Component(el) {
if (el.getAttribute && el.getAttribute("data-gjs-type") == TYPE) {
return {
type: TYPE,
};
}
},
},
view: defaultView.extend({}),
});
}
```
`
Answers (2)
Seems to work all properly here: https://jsfiddle.net/rp7wa58h/
Anyway, you don't need the view if you don't use it, and the same for isComponent (which is misspelled in your example and placed in the wrong place), data-gjs-type is already used, by default, in the same way automatically by the editor
Thanks for reporting this, @momu-2016.
Thanks for sharing your report about script-props is invalid. To help the team investigate and prioritize this:
Please provide:
- A minimal reproducible example (CodeSandbox/JSFiddle)
- Your GrapesJS version number
- Browser and OS information
- Any error messages from the browser console
- Steps to reproduce the issue
What helps most:
- Minimal code example (not your full project)
- Screen recording or screenshot showing the issue
- Expected vs actual behavior clearly stated
- GrapesJS configuration you're using
With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3524
[QUESTION]: Integrate select2 UI element into traits
I'm new to grapesJS ... Great tool.I have a few questions about traits. I followed this tutorial https://grapesjs.com/docs/modules/Traits.h...
Issue #4384
index.d.ts says that components must be Backbone.Collection<Component> but the docs say Component[] is also accepted
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? AnyReproducible demo link https://grapesjs.c...
Issue #3574
adding traits are not picked up by trait manager.
Following example from docs . Is there further configurtion to make new traitsa show for elements? The example using the input does not run...
Issue #3463
inspector overflow broken
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
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
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.