🛠️ GrapesJS DevTools — free debugging & inspection toolkit for plugin developers

[GJS-market]

Hey everyone! 👋

If you've ever spent hours sprinkling console.log(editor.getSelected()) all over your project trying to figure out why a trait isn't updating or which event actually fires when — this one's for you.

We've just released GrapesJS DevTools, a free, open-source debugging toolkit that gives you real-time visibility into what's happening inside your editor.

What it does

• 🔍 Component Inspector — view structure, attributes, styles, traits and config of any selected component
• 📡 Event Monitoring — watch GrapesJS events fire in real time (no more guessing the event lifecycle)
• ⚡ Command Debugging — track command execution and catch command-related issues fast
• 🧬 Model Analysis — explore component models, collections and internal data structures
• 📊 Real-Time Diagnostics — inspect editor activity without touching your code

Who it's for

Anyone building on top of GrapesJS: plugin authors, SaaS page builders, email/template editors, custom CMS solutions, no-code platforms.

Details

• ✅ Free for personal & commercial use
• ✅ Open source — fork it, contribute, open issues
• ✅ Tested with GrapesJS 0.21.x / 0.22.x / 0.23.x
• ✅ Fully compatible with GrapesJS Studio

Links

• 📦 Product page & docs: https://gjs.market/products/grapesjs-devtools-debugging-developer-toolkit
• 🎮 Live demo: https://sunny-strudel-d54292.netlify.app/?mode=webpage

Would love feedback from the community — what would you want a DevTools panel to show that it doesn't yet? Feature requests and PRs are very welcome! 🙏