Is there an official Angular wrapper for GrapesJS?

There is no official @grapesjs/angular package, but the service wrapper pattern is the community standard. Inject GrapesJSService, initialise in AfterViewInit, and destroy in OnDestroy.

Does GrapesJS work with Angular 17+?

Yes. GrapesJS is a framework-agnostic vanilla JS library. It works with any Angular version as long as you initialise it client-side after the DOM is ready.

How do I handle GrapesJS events with Angular change detection?

Wrap GrapesJS event listeners inside NgZone.run(() => { ... }) to ensure any state changes you make inside them trigger Angular change detection properly.

GrapesJS Angular Integration — Plugins & Components

22k+

GitHub Stars

100+

Plugins

MIT

License

10yrs+

In Production

GrapesJS integrates cleanly with Angular using an injectable service pattern. Because GrapesJS is a vanilla JavaScript library with no framework dependencies, it works with any Angular version — from AngularJS-era patterns to Angular 17+ standalone components. GJS.Market provides Angular-compatible plugins so you can extend your editor without rebuilding anything from scratch.

Browse Angular-compatible plugins →

Step 1 — Create an Angular Service Wrapper

Encapsulate GrapesJS in an injectable service to manage lifecycle and expose the editor instance across your application:

// grapesjs.service.ts
import { Injectable, ElementRef } from '@angular/core';
import grapesjs from 'grapesjs';
import type { Editor } from 'grapesjs';

@Injectable({ providedIn: 'root' })
export class GrapesJSService {
  private editor: Editor | null = null;

  init(container: ElementRef): Editor {
    this.editor = grapesjs.init({
      container: container.nativeElement,
      fromElement: false,
      height: '100vh',
      storageManager: false,
    });
    return this.editor;
  }

  destroy(): void {
    this.editor?.destroy();
    this.editor = null;
  }
}

Step 2 — Use the Service in a Component

Inject the service, attach the container ref, and manage the editor lifecycle via Angular hooks:

// editor.component.ts
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { GrapesJSService } from './grapesjs.service';

@Component({
  selector: 'app-editor',
  template: '<div #editorContainer style="height:100vh"></div>',
})
export class EditorComponent implements OnInit, OnDestroy {
  @ViewChild('editorContainer') container!: ElementRef;

  constructor(private gjsService: GrapesJSService) {}

  ngOnInit(): void { this.gjsService.init(this.container); }
  ngOnDestroy(): void { this.gjsService.destroy(); }
}

Angular-Compatible Plugins

BlocksFree

GrapesJS Blocks Basic

Essential drag-and-drop blocks for any Angular project

Storage$19

Storage REST API

Persist editor state to any Angular backend via REST

Styles$19

Style Manager Pro

Advanced CSS controls compatible with Angular apps

ExportFree

Export Plugin

Export HTML/CSS output from within Angular services

Known Issues & Workarounds

Change Detection (use NgZone)

GrapesJS fires events outside Angular's zone. Wrap editor event callbacks inside NgZone.run(() => { ... }) to trigger Angular change detection correctly.

SSR (disable on server)

GrapesJS requires the browser DOM. When using Angular Universal (SSR), guard your GrapesJS initialisation with isPlatformBrowser(platformId) to prevent server-side errors.

DOM timing (use AfterViewInit)

Use ngAfterViewInit instead of ngOnInit when accessing the ViewChild container. ngOnInit runs before the view is fully rendered, so the container ref will be undefined.

Frequently Asked Questions

Browse GrapesJS plugins by category

🧩Blocks ✏️RTE 💾Storage 🎨Styles 📄Plugins ⚡Presets 📧Email 🖥️Web builder

Extend your Angular editor with GJS.Market plugins

Browse Angular-compatible plugins and starters — ship your visual editor faster.