Trix
A rich text editor web component for writing messages, comments, and articles in web apps.
- Stars
- 20k
- Forks
- 1.1k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 9 days ago
- Type
- Library
What it is
Trix is a WYSIWYG (what you see is what you get) text editor that you add to a web page so users can format text with bold, lists, quotes and links. It is built from standard web components and produces simple, consistent HTML. It comes from 37signals, the company behind Basecamp, and is used there.
- Add a formatted comment box to a web form using a trix-editor tag
- Save editor content to a hidden form input and submit it with your form
- Add custom toolbar buttons that trigger your own actions via the trix-action-invoke event
- Populate an editor with stored HTML content on page load
Great for
- Developers adding a rich text box to a Rails or other web app
- Teams that want simple, consistent HTML output for comments or messages
- Projects that need embedded attachments inside text
- Developers who want control over editor behavior instead of browser contenteditable quirks
Not ideal for
- Non-developers looking for a ready-made app; Trix is a component to integrate, not a standalone product
- Projects needing complex document features like tables or heavy page layout, which the README does not describe
- Sites that must support old browsers, since it targets evergreen desktop and mobile browsers
How to get it
- 1
Install with a package manager
Include from npm CDN (simplest)
<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css"> <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script> - 2
Run it
- Add the trix.css and trix.umd.min.js tags to the head of your page
- Place an empty <trix-editor></trix-editor> tag in your page body
- Optionally add a hidden input with an id and reference it with the editor's input attribute to submit content with a form
- 3
Get the most out of it
- Use the input attribute with a hidden field to submit editor content with forms
- Override Trix.config.toolbar.getDefaultHTML() to customize the toolbar without modifying Trix
- Add custom buttons with data-trix-action="x-..." and listen for trix-action-invoke
- Set willCreateInput = false with ElementInternals support to skip the hidden input when using the name attribute
Downloads
Strengths
- Built on standard web APIs such as Custom Elements and Element Internals
- Treats contenteditable as an input device, giving consistent behavior across browsers
- Produces terse, consistent HTML output
Trade-offs
- The README describes only basic editing; advanced features are not detailed in the excerpt
- Requires JavaScript integration work and some HTML knowledge to set up forms and toolbars
- Trix content must be sanitized carefully when loaded from untrusted sources
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| trix (this) | 20k | Library | intermediate | 9 days ago | Developers adding a rich text box to a Rails or other web app |
| tiptap | 38.9k | Library | intermediate | 4 days ago | Developers building a custom text editor into a web product |
| lexical | 24k | Library | intermediate | 4 days ago | Developers adding a rich text editor to a web app |
| pell | 12k | Library | beginner | 2.5 years ago | Web developers who need a simple rich text box in a form or admin page |
| milkdown | 12k | Library | advanced | 4 days ago | Developers adding a rich markdown editing box to a web app |
| tui.editor | 18k | Library | intermediate | 2.3 years ago | Web developers who want an embeddable Markdown editor in their own site or app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.