Issue #3370πŸ’¬ AnsweredOpened March 29, 2021by xinnai0 reactions
questiongeneral

Compressed getJs issue

Quick answerby ClaudeCode

Thanks for reporting this, @xinnai. Great question about Compressed getJs issue. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most operations can be achieved by listening to editor an...

Read full answer below ↓

Question

@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html:

Code SnippetTEXT
![1444126130](https://user-images.githubusercontent.com/23135336/112428513-3b91cb80-8d76-11eb-91de-ce51a8500203.jpg)

These code are all compressed. I want an uncompressed code like this in [https://github.com/Ju99ernaut/grapesjs-script-editor](url)
![1811563111](https://user-images.githubusercontent.com/23135336/112428360-008f9800-8d76-11eb-9abb-b8451649b390.jpg)

For this purpose I read the source code in `grapesjs-script-editor` to learn how to get uncompressed js code. But I only found this code bellow:
`
getCodeViewer() {
            const { editor } = this;

            if (!this.codeViewer) {
                this.codeViewer = editor.CodeManager.createViewer({
                    codeName: 'javascript',
                    theme: 'hopscotch',
                    readOnly: 0,
                    autoBeautify: 1,
                    ...codeViewOptions,
                });
            }

            return this.codeViewer;
        },
`

I notice that maybe `autoBeautify` make this work but I can't find this property in the source code in `grapesjs`. So I am confused how `CodeManager` get the uncompressed js code?

_Originally posted by @xinnai in https://github.com/artf/grapesjs/issues/3347#issuecomment-806410792_

Answers (1)

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @xinnai.

Great question about Compressed getJs issue. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

Related Questions and Answers

Continue research with similar issue discussions.

Issue #3333

npm start not working

Hi, I want to develop the source code but I cannot get started. I got errors when start the project. Can anybody help me? Thank you very mu...

4 answersUpdated March 18, 2021

Issue #3444

removeButton() causing error

Hi, I'm trying to remove a button from panel using this code editor.Panels.removeButton('options', 'fullscreen') . It removes the button bu...

4 answersUpdated November 29, 2022

Issue #3664

How to publish layout generated via GrapesJS

Hi @artf Our GrapesJs editor is running on http://localhost:5500/editor We want to publish it on front end on http://localhost:5500/ But on...

2 answersUpdated August 3, 2021

Issue #3432

Hi @artf, Can we able to use Wistia in GrapesJS editor. I would like to use it as Vimeo used in the editor. Scenario: I have a video in my...

2 answersUpdated May 10, 2021

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

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.

All tutorials β†’

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

Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS

In May we shipped major updates to two of our most popular GrapesJS plugins β€” TinyMCE Inline Text Editor and Placeholder.

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.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders