Almost all examples from this page fail with grapejs
After looking around I found this closed issue https://github.com/artf/grapesjs/issues/2873 and based on it I did this to allow checkbox/radio in preview mode: And now at least the checkbox/radio works in preview and some demos work in preview. Would be nice if this info be included in the documentation !
Read full answer below ↓Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Version 103.0.5060.134 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
Reproducible demo link
https://alvarotrigo.com/blog/html-css-tabs/
Describe the bug
Not switching/showing tab contents when testing any of the examples listed at https://alvarotrigo.com/blog/html-css-tabs/ Like this one "4. Animated HTML & CSS Tabs" ready to import shown bellow:
<body>
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab One</label>
<div class="tab-content">My father had a small estate in Nottinghamshire: I was the third of five sons. He sent me to Emanuel College in Cambridge at fourteen years old, where I resided three years, and applied myself close to my studies; but the charge of maintaining me, although I had a very scanty allowance, being too great for a narrow fortune, I was bound apprentice to Mr. James Bates, an eminent surgeon in London, with whom I continued four years. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab Two</label>
<div class="tab-content">My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Tab Three</label>
<div class="tab-content">When I left Mr. Bates, I went down to my father: where, by the assistance of him and my uncle John, and some other relations, I got forty pounds, and a promise of thirty pounds a year to maintain me at Leyden: there I studied physic two years and seven months, knowing it would be useful in long voyages.</div>
</div>
</div>
<p>Example line outside of tab box</p>
</div>
</body>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
background: #2c3e50;
color: #ecf0f1;
line-height: 1.618em;
}
.wrapper {
max-width: 50rem;
width: 100%;
margin: 0 auto;
}
.tabs {
position: relative;
margin: 3rem 0;
background: #1abc9c;
height: 14.75rem;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
display: block;
line-height: 2.75em;
height: 3em;
padding: 0 1.618em;
background: #1abc9c;
border-right: 0.125rem solid #16a085;
color: #fff;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
.tab-label:hover {
top: -0.25rem;
transition: top 0.25s;
}
.tab-content {
height: 12rem;
position: absolute;
z-index: 1;
top: 2.75em;
left: 0;
padding: 1.618rem;
background: #fff;
color: #2c3e50;
border-bottom: 0.25rem solid #bdc3c7;
opacity: 0;
transition: all 0.35s;
}
.tab-switch:checked + .tab-label {
background: #fff;
color: #2c3e50;
border-bottom: 0;
border-right: 0.125rem solid #fff;
transition: all 0.35s;
z-index: 1;
top: -0.0625rem;
}
.tab-switch:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
</style>
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
After looking around I found this closed issue https://github.com/artf/grapesjs/issues/2873 and based on it I did this to allow checkbox/radio in preview mode:
var editor = grapesjs.init({
...
});
const checkClikcInPreview = function(e) {
if (!editor.Commands.isActive('preview')) {
e.preventDefault();
}
}
let ect = editor.Components.getType('checkbox');
ect.model.getDefaults().copyable = true;
ect.view.getEvents().click = checkClikcInPreview;
And now at least the checkbox/radio works in preview and some demos work in preview.
Would be nice if this info be included in the documentation !
Thanks @mingodad I released a new version of the form plugin and added support for the preview.
Thanks for reporting this, @mingodad.
The issue with almost all examples from this page fail with grapejs appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4434
CSS Parser's shape doesn't allow the CSS property to be defined more than once.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? AnyReproducible demo link https://grapesjs.c...
Issue #5450
Section should be overlapping issue present in grapes js
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 117.0.5938.134 (Official Build) (6...
Issue #5718
Possible upgrade path issue where 'textnode' is now called 'wrapper' from 0.18 -> latest
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 122.0.6261.95 (Official Bui...
Issue #5173
editor.Css.setRule API not working as expected, it is not updating the rule existing rule.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (a...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.