Guide · Open source

How to use Trix: add a rich text editor to your web page

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Trix is an open-source WYSIWYG rich text editor from 37signals, the company behind Basecamp. You add it to a web page so users can format text with bold, lists, quotes and links. This guide shows you how to load it, place an editor, customise the toolbar, and send the content to your server through a form.

Trixbasecamp/trix · ★ 20k · MIT Install options & downloads

Quick start

1Include the files. Add the Trix stylesheet and UMD script from the npm CDN to the head of your page.
2Add an editor. Place an empty trix-editor tag in your page. Trix inserts a toolbar before it automatically.
3Link a hidden input. Create a hidden input with an id and set the editor's input attribute to that id.
4Customise the toolbar (optional). Add data-trix-attribute, data-trix-key or data-trix-action buttons, or override Trix.config.toolbar.getDefaultHTML().
5Submit the form. Submit the form as usual. The hidden input holds the editor's HTML, updated on every change.

Load Trix on your page

The easiest way to start is to include Trix from an npm CDN in the head of your page. Add both the stylesheet and the script shown below.

trix.css includes default styles for the Trix toolbar, editor, and attachments. You can skip this file if you prefer to define these styles yourself. Trix also comes in ESM and UMD formats, so you can install the npm package and import it into an application that uses an asset pipeline.

<head>
  <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>
</head>

Place an empty trix-editor tag on the page. Trix automatically inserts a separate trix-toolbar before the editor. The editor accepts autofocus and placeholder attributes, like a textarea. Unlike a textarea, it expands vertically to fit its contents.

If you want the toolbar somewhere else, create your own trix-toolbar element and point the editor at it with the toolbar attribute.

<main>
  <trix-toolbar id="my_toolbar"></trix-toolbar>
  <div class="more-stuff-inbetween"></div>
  <trix-editor toolbar="my_toolbar" input="my_input"></trix-editor>
</main>

Trix uses data attributes to decide how a toolbar button behaves. data-trix-attribute applies a formatting attribute to the current selection, and the attribute must be defined in Trix.config.textAttributes (found in config/text_attributes.js). data-trix-key sets the keyboard shortcut, so pressing meta+b applies bold in the example below.

If the attribute is defined in Trix.config.blockAttributes, Trix applies it to the whole current block instead. The quote button below toggles a blockquote.

Internal actions include undo, redo, link, increaseBlockLevel and decreaseBlockLevel. To add your own button, prefix the action name with x- and listen for trix-action-invoke.

Toggle an attribute: data-trix-attribute="bold"
Set a keyboard shortcut: data-trix-key="b"
Built-in actions: undo, redo, link, increaseBlockLevel, decreaseBlockLevel
Custom action: prefix with x-, for example x-log

<button type="button" class="bold" data-trix-attribute="bold" data-trix-key="b"></button>
<button type="button" class="quote" data-trix-attribute="quote"></button>
<button id="log-button" type="button" data-trix-action="x-log"></button>

Save editor content with a form

To submit the editor contents with a form, define a hidden input with an id, then reference that id in the editor's input attribute. Trix updates the hidden input's value with each change to the editor.

To load stored content, put it in the hidden input's value attribute. If there is no associated input, Trix sanitizes the HTML inside the trix-editor tag as it loads it. Never place untrusted or user-controlled HTML directly inside a trix-editor tag.

Use the input attribute to link the editor to a hidden field
Put saved content in the input's value attribute to populate the editor

<form>
  <input id="x" type="hidden" name="content" value="Editor content goes here">
  <trix-editor input="x"></trix-editor>
</form>

Handle browser support and form behaviour

Trix integrates with forms through Element Internals when the browser supports it. You can turn that off by setting Trix.elements.TrixEditorElement.formAssociated to false. Trix targets evergreen, self-updating desktop and mobile browsers, so it is not built for old browsers.

When Element Internals is in use, you can skip the hidden input by setting willCreateInput to false in a before-trix-initialize listener. The README warns that the editor value will then only submit with a form if the element has a name attribute.

import Trix from "trix"

Trix.elements.TrixEditorElement.formAssociated = false

What people use it for

Adding a comment box with bold, lists and links to a web app
Writing messages or articles where you want simple, consistent HTML output
Embedding attachments inside the text of a document
Building a custom toolbar with your own action buttons

Frequently asked questions

Is Trix free to use?

Yes. Trix is released under the MIT licence, which allows use in open-source and commercial projects. Check the licence file in the repository for the full terms.

How do I install Trix?

The simplest method in the README is to include trix.css and trix.umd.min.js from the unpkg npm CDN in your page's head. You can also install the npm package and import Trix into your application.

Does Trix work with Rails?

Trix comes from 37signals, the creators of Ruby on Rails, and the README describes it as a component for web applications. The README's examples are plain HTML and JavaScript, so check the repository for any Rails-specific setup.

Which browsers does Trix support?

Trix supports all evergreen, self-updating desktop and mobile browsers. It is not designed for old browsers that no longer update.

Is Trix a standalone app?

No. Trix is a component you integrate into your own web page or application. It is not a ready-made product for end users.

How does Trix compare to Quill or TipTap?

The source describes Trix as a simple editor that outputs terse, consistent HTML, and it names Quill, TipTap, ProseMirror and Lexical as comparable projects. It does not benchmark them, so compare features against your own requirements, such as tables, which the README does not describe for Trix.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Trix suits developers who want a dependable rich text box for messages, comments or simple articles, with clean HTML output and control over editor behaviour. It is not a finished app for end users, and it is a poor fit if you need tables, complex page layout or support for old browsers.

Install options & downloads