# Trumbowyg: a 10kB gzip WYSIWYG editor for jQuery pages

> Trumbowyg is a contenteditable-based rich text editor that ships as a jQuery plugin, weighs 30kB minified and 10kB gzip, and spreads its extra features across optional plugins. It suits small server-rendered pages that need a text box, not a document suite.

**Alex-D/Trumbowyg** — A lightweight and amazing WYSIWYG JavaScript editor under 10kB

- Repository: https://github.com/Alex-D/Trumbowyg
- Website: https://alex-d.github.io/Trumbowyg
- Stars: 4,147 · Forks: 616
- Language: JavaScript
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/alex-d-trumbowyg

## What Trumbowyg solves, and for whom

Trumbowyg targets the case where a form needs a rich text box and nothing more. The README calls it "a simple and lightweight WYSIWYG editor, weight only 30kB minified (10kB gzip) for faster page loading". That number is the whole pitch: on a page that already loads jQuery, the editor adds a small amount of JavaScript rather than a framework-sized bundle.

The intended user is someone writing classic HTML, not a single-page application. package.json declares jquery as a peer dependency with the range >=1.8, so Trumbowyg expects jQuery to be present on the page rather than bundling its own copy. The repository topics include jquery-plugin alongside wysiwyg-editor, which matches the code layout: the editor is initialised through a jQuery method, and plugins extend that same object.

It is a poor fit for anyone who wants the editor to own application state. Trumbowyg works on a contenteditable element and reads and writes HTML inside the DOM. If your framework expects a controlled component with a value and an onChange, you are adapting Trumbowyg to that model rather than getting it for free.

## How the editor is built: contenteditable, jQuery, and plugins

The mechanism is the browser's own contenteditable support. Trumbowyg does not implement its own editing surface or document model; it wraps a DOM element, renders a toolbar, and maps toolbar buttons to commands that mutate the editable region. That is why the bundle stays small. A large part of what a bigger editor ships as core, Trumbowyg leaves to the browser.

The distribution entry point is dist/trumbowyg.js, declared as main in package.json. The source tree is src/, and the repository root also carries plugins/ and docs/. Plugins are separate files, which is how the README can point to "All existing Plugins" in the documentation while the core stays at 30kB minified. Tables, colours and image upload are the kind of thing that lives there rather than in the core file.

The build is Gulp-based. gulpfile.mjs sits at the root, and package.json defines dev, build, clean and lint scripts that call Gulp tasks, plus lint:editorconfig which runs editorconfig-checker. Styles are compiled with gulp-sass and Sass, JavaScript is minified with gulp-terser, and icons go through gulp-svgmin and gulp-svgstore. The devDependencies pin jquery to ^4.0.0-beta.2 for development, while the published peer range stays at >=1.8. Those two numbers describe different things: the dev dependency is what the maintainer builds and tests against, the peer range is what consumers are allowed to bring.

## Installing Trumbowyg and getting a first editor on the page

The package is published on npm as trumbowyg, and the README badges also point at cdnjs and bower as distribution channels. If you are working inside the repository itself, the README gives these commands, run from the project root after forking and cloning:

```bash
cd Trumbowyg # go into the project's root directory
npm install # install development dependencies
npm run dev # watch mode
npm run build # to build the project
```

npm run dev starts Gulp in watch mode, and npm run build produces the distributable files. For a consumer project, install the package and make sure jQuery is present, because package.json lists it as a peer dependency with the range >=1.8:

```bash
npm install trumbowyg jquery
```

The README does not include a copy-paste initialisation example; it points to the Get started page in the documentation for that. What the repository does tell you is that the editor is a jQuery plugin, so initialisation goes through a jQuery call on the element you want to turn into an editor. The documentation site linked from the README (alex-d.github.io/Trumbowyg/documentation/) is where the option list, the "All Options explained" page, and the plugin catalogue live. Treat that site as the reference for constructor options and plugin setup rather than guessing at keys from the source.

## Where Trumbowyg is the wrong tool

The clearest limitation is the jQuery dependency. package.json declares jquery as a peer dependency, not a bundled dependency, so a project that has removed jQuery cannot use Trumbowyg without adding it back or adapting the plugin wrapper. The related searches include "trumbowyg react", and the honest answer is that the repository ships no React wrapper. You would be mounting a jQuery plugin inside a component and managing the DOM yourself.

The second limitation is feature scope by design. The core is deliberately small, and anything beyond basic formatting lives in plugins. If your requirement list includes real-time collaboration, revision history, or a structured document schema, Trumbowyg does not provide those in the documentation available, and adding them would mean building on top of contenteditable rather than using a document model.

There is also a practical failure mode users report in search: "trumbowyg is not a function". That phrasing points at the jQuery plugin registration not having happened when the call runs, which is what you get when the script order is wrong or jQuery is loaded twice. The repository does not document a troubleshooting section for this, so the fix is to verify that jQuery is loaded before the Trumbowyg script and that only one jQuery instance is on the page.

## Alternatives and the difference in approach

The most direct alternative people search for is a modern editor that does not depend on jQuery. The architectural difference is the editing model. Trumbowyg edits a contenteditable DOM element and hands you HTML. Editors built on a document model maintain their own internal representation of the content and render from it, which is what makes features like collaborative editing and predictable undo possible. Trumbowyg gets its small size precisely by not doing that.

If your page is server-rendered and already carries jQuery, the comparison usually favours Trumbowyg on payload: 10kB gzip against whatever the alternative's core plus its framework adapter costs. If your page is a React or Vue application with no jQuery, the comparison flips. You would be adding a peer dependency and a wrapper layer to get an editor whose main advantage, small size on a jQuery page, no longer applies.

A third option is to skip the rich text editor entirely and use a Markdown textarea with a preview. That removes the contenteditable surface and the sanitisation questions that come with accepting HTML from a browser, at the cost of the formatting toolbar that non-technical users expect.

## Maintenance, upgrades and the MIT licence

The repository is not archived, and the last push was on 2026-09-21, so the codebase is receiving changes. The most recent release listed is v2.31.0 from 2025-03-02, preceded by v2.30.0 and v2.29.0 in January 2025. The gap between the latest release and the latest push means you should check the develop branch if you need a fix that has not been tagged yet, since develop is the default branch.

Upgrade cost is low for the core, because the API surface is a jQuery plugin and a set of options. The risk sits in plugins and in the built assets: if you consume dist/trumbowyg.js from the published package, upgrading means replacing that file, but if you build from source you inherit the Gulp toolchain, including gulp-sass and gulp-terser. The package pins a Volta node version of 22.13.1, which tells you what the maintainer expects for local development.

The licence is MIT, stated in the README and in the license field of package.json, with a LICENSE file at the repository root. MIT is permissive and does not require you to publish your own source. The README also asks for financial support through Patreon or PayPal and lists sponsors. That is a funding request, not a licence term, and it does not change what MIT permits. If your organisation has rules about licence attribution, the MIT text in LICENSE is what you need to reproduce, but the specifics are for your own legal review.

## Conclusion

Adopt Trumbowyg when a server-rendered page already loads jQuery and you want a small contenteditable editor with optional plugins for tables, colours and image upload. Skip it if you need a React component, a collaborative editing model, or an editor that manages its own state outside the DOM. Before committing, check that your jQuery version satisfies the >=1.8 peer dependency, confirm the plugin list covers your toolbar, and read the docs on how the editor writes back into the textarea you submit.

## FAQ

### Is the Trumbowyg WYSIWYG editor free?

Yes. The README states that Trumbowyg is an MIT-licensed open source project and completely free to use, and package.json lists the license as MIT. The README also asks for sponsorship through Patreon or PayPal, which is optional and not a condition of use.

### What is a WYSIWYG editor like Trumbowyg used for?

It gives a form field a formatting toolbar so users can write rich text without typing HTML. Trumbowyg does this by wrapping a contenteditable element and exposing the result as HTML through a jQuery plugin.

### Why do I get "trumbowyg is not a function"?

That error means the jQuery plugin was not registered when your code called it, which happens when the script order is wrong or jQuery is loaded more than once. The repository does not document this case, so check that jQuery loads before the Trumbowyg script and that only one jQuery instance is present.

### What is a good Trumbowyg alternative?

The main alternative is an editor built on its own document model instead of contenteditable, which is what enables features such as collaborative editing. Trumbowyg's advantage is size on a page that already loads jQuery, since package.json lists jQuery as a peer dependency with the range >=1.8.

## Sources

- [Alex-D/Trumbowyg on GitHub](https://github.com/Alex-D/Trumbowyg)
- [License: MIT](https://github.com/Alex-D/Trumbowyg/blob/develop/LICENSE)
- [Project website](https://alex-d.github.io/Trumbowyg)
- [README](https://github.com/Alex-D/Trumbowyg/blob/develop/README.md)
- [Releases](https://github.com/Alex-D/Trumbowyg/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/alex-d-trumbowyg