# ngx-wig

> Light-weight WYSIWYG Editor for Angular

Latest version **22.0.0** (published 2026-06-26) · 0 weekly downloads

## Install

```sh
npm install ngx-wig
pnpm add ngx-wig
yarn add ngx-wig
bun add ngx-wig
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 22.0.0 |
| Published | 2026-06-26 |
| First published | 2017-06-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 121.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 238 |
| Maintainers | stevermeister, bampakoa |
| Keywords | Angular, Library, WYSIWYG, Editor |

## Links

- npm: https://www.npmjs.com/package/ngx-wig
- Repository: https://github.com/stevermeister/ngx-wig
- Issues: https://github.com/stevermeister/ngx-wig/issues
- npm.io page: https://npm.io/package/ngx-wig

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.2.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 22.0.0 (latest) — 2026-06-26
- 21.0.0 — 2026-02-03
- 20.2.4 — 2026-01-15
- 20.1.0 — 2025-10-02
- 20.0.0 — 2025-07-22
- 19.1.1 — 2025-06-03
- 19.0.7 — 2025-01-20
- 19.0.6 — 2025-01-10
- 18.0.7 — 2025-01-10
- 17.1.9 — 2025-01-10
- 19.0.5 — 2025-01-06
- 18.1.6 — 2024-08-21
- 17.1.8 — 2024-08-13
- 18.0.6 — 2024-08-13
- 18.0.5 — 2024-07-22
- … 59 more at https://npm.io/package/ngx-wig/versions

## README

# Ngx-wig

![screen shot 2017-12-12 at 14 52 51](https://user-images.githubusercontent.com/1526680/33888069-37bde1f0-df4c-11e7-993e-d48ffe0fffbf.png)


## Features

 - Template-driven forms
 - Reactive forms
 - Custom placeholder
 

## Icons

Icons are not in the pack!
You can use the icons that you like.
We recommend to use [Material Design Icons](https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css)

If you do not want to use a full icons set, you can use these steps:

1. Go to [icons set](https://materialdesignicons.com/)
1. Choose the icon that you want, press the right mouse button on it, and then select the "View SVG" option
1. Go to [URL-encoder for SVG](https://yoksel.github.io/url-encoder/) and use it to convert your SVG

## Installation

Ngx-wig could be simply installed via npm:

    npm install ngx-wig


## Basic usage

Import the `NgxWigNodule`:

```ts
import {NgxWigModule} from 'ngx-wig';

@Component({
  imports: [NgxWigModule]
});
export class MyCmp {
  text = 'Hello World';
}
```

Add the following snippet to your template:

```html
<ngx-wig [content]="text" />
```

## Advanced usage

### Define visible buttons

```html
<ngx-wig [buttons]="'bold, italic'" />
```

### Get notified when content changes

```html
<ngx-wig (contentChange)="result = $event" />
```

### Customize styles on paste

```ts
providers: [
  {
    provide: NgxWigFilterService,
    useClass: NgxWigFilterStylesService
  }
]
```

### Adding custom buttons

https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts

---
_Source: https://npm.io/package/ngx-wig · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._