Angular Tiptap Editor

July 30, 2026 · View on GitHub

Important

^v3.0.0 uses Tiptap v3. If you need to stay on Tiptap v2, please use version ^2.4.1.

A modern, customizable Angular rich-text editor, built with Tiptap.

High-performance Angular WYSIWYG editor. Built on top of Tiptap and powered by a native Signals architecture, it features a polished, professional design that feels, I think, clean and modern out of the box. Yet, I've worked to keep it fully customizable: you can easily configure the editor, tweak the UI, or even embed your own Angular components as interactive nodes.

✨ Features

⚡ Signal-Based: Native performance with ChangeDetectionStrategy.OnPush.
📋 Table of Contents: Notion-style floating or inline TOC component with level-adapted dash collapse.
🗂️ Global Editor Registry: Centralized AteEditorRegistry service to track, control, and switch between multi-editor instances.
🧩 Angular Nodes: Embed any Angular component as an interactive editor node.
⌨️ UX First: Slash commands (/) and context-aware bubble menus (Notion-like).
📊 Table Power: Advanced management with cell selection and merging.
🖼️ Pro Media: Image resizing, auto-compression, and custom uploaders.
🌍 Built-in i18n: Support for English, French, and German out of the box.
📎 Office-Ready: Clean pasting from Word and Excel.
🎨 Highly Customizable: Easily configure toolbars, bubble menus, and slash command items.
🛠️ Extensible: Easily add custom Tiptap extensions and reactive state calculators.
🧩 Angular 18+ Support: Uses Angular 18's signals and esbuild for optimal performance.

📦 Installation

npm install @flogeez/angular-tiptap-editor

Add the styles to your angular.json:

{
  "styles": [
    ...
    "node_modules/@fontsource/material-symbols-outlined/index.css",
    "node_modules/@flogeez/angular-tiptap-editor/styles/index.css",
    ...
  ]
}

🚀 Quick Start

1. Global Setup

Initialize the library in app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [provideAteEditor()],
};

2. Basic Usage

import { AngularTiptapEditorComponent } from "@flogeez/angular-tiptap-editor";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [AngularTiptapEditorComponent],
  template: `<angular-tiptap-editor
    [content]="content"
    (contentChange)="onContentChange($event)" />`,
})
export class ExampleComponent {
  content = "<p>Hello World!</p>";
  onContentChange(html: string) {
    console.log(html);
  }
}

3. Reactive Forms Integration

import { FormControl, ReactiveFormsModule } from "@angular/forms";

@Component({
  standalone: true,
  imports: [AngularTiptapEditorComponent, ReactiveFormsModule],
  template: ` <angular-tiptap-editor [formControl]="contentControl" /> `,
})
export class FormComponent {
  contentControl = new FormControl("<p>Initial content</p>");
}

⚙️ Configuration

The editor is fully configurable via the [config] input:

editorConfig: AteEditorConfig = {
  locale: "fr",
  placeholder: "Commencez à rédiger...",
  toolbar: { ...ATE_DEFAULT_TOOLBAR_CONFIG, highlight: true },
  slashCommands: { heading1: true, table: true },
};

Input	Type	Description
`[config]`	`AteEditorConfig`	Global config object (recommended)
`[content]`	`string`	Initial HTML content
`[editable]`	`boolean`	Read-only toggle
`[disabled]`	`boolean`	Disabled toggle

See the API reference for the full list of inputs and configuration options.

🧩 Advanced Features

Image Upload Handler

Avoid base64 by providing a custom uploader (S3, Cloudinary, etc.):

The same handler is used for all file-based image insertions: toolbar picker, drag-and-drop, and clipboard paste.

uploadHandler: AteImageUploadHandler = ctx => {
  return this.http.post<any>("/api/upload", ctx.file).pipe(map(res => ({ src: res.url })));
};

🚀 More Advanced Capabilities

Looking for deeper integration patterns? Explore our Advanced Usage Guide:

🧩 Custom Angular Nodes: Embed any Angular component as interactive editor nodes.
📋 Table of Contents: Responsive, Notion-style floating or inline TOC.
🗂️ Global Editor Registry: Track and control multi-editor instances via DI.
⚡ Programmatic Control: Execute commands remotely via AteEditorCommandsService.
⌨️ Custom Slash Commands: Add custom actions and templates to the / menu.
🛠️ Tiptap Extensions & State Calculators: Extend schema and custom reactive state.

🌍 i18n & 🎨 Styling

Languages: English, French, and German built-in. Detects browser language automatically. Extend with AteI18nService.addTranslations().
Styling: Customize via CSS variables (e.g., --ate-primary, --ate-border-radius, and much more).
Dark Mode: Works natively by adding .dark or [data-theme="dark"].

🔧 Development

npm install
npm run build:lib  # Build library
npm start          # Run demo

📝 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

Made with ❤️ by FloGeez