Convert Figma logo to code with AI

basecamp logotrix

A rich text editor for everyday writing

18,951
1,110
18,951
150
View on GitHubView on NPM

Top Related Projects

ckeditor's avatar

ckeditor5

9,335

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

slab's avatar

quill

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

tinymce's avatar

tinymce

14,837

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

yabwe's avatar

medium-editor

16,041

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

summernote's avatar

summernote

11,521

Super simple WYSIWYG editor

froala's avatar

wysiwyg-editor

5,270

The next generation Javascript WYSIWYG HTML Editor.

Quick Overview

Trix is a rich text editor for everyday writing, created by Basecamp. It's designed to be easy to use, with a clean interface and powerful features. Trix is built as a drop-in JavaScript library that can be easily integrated into web applications.

Pros

  • Simple and intuitive user interface
  • Supports file attachments and embedded images
  • Customizable toolbar and styling options
  • Lightweight and performant

Cons

  • Limited advanced formatting options compared to some other rich text editors
  • Requires JavaScript to function, which may not be ideal for all use cases
  • Less extensive documentation compared to more established editors

Code Examples

  1. Basic Trix editor initialization:
<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>

<script type="text/javascript" src="trix.js"></script>
<link rel="stylesheet" type="text/css" href="trix.css">
  1. Listening for Trix events:
document.addEventListener("trix-initialize", function(event) {
  console.log("Trix editor initialized");
});

document.addEventListener("trix-change", function(event) {
  console.log("Trix editor content changed");
});
  1. Customizing the toolbar:
Trix.config.toolbar.getDefaultHTML = function() {
  return `
    <div class="trix-button-row">
      <span class="trix-button-group trix-button-group--text-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Bold">Bold</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italic">Italic</button>
      </span>
    </div>
  `;
};

Getting Started

To get started with Trix, follow these steps:

  1. Include Trix in your HTML file:
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.min.js"></script>
</head>
  1. Add the Trix editor to your HTML:
<input id="trix" type="hidden" name="content">
<trix-editor input="trix"></trix-editor>
  1. Initialize Trix in your JavaScript:
document.addEventListener("trix-initialize", function(event) {
  console.log("Trix editor is ready");
});

That's it! You now have a functioning Trix editor in your web application.

Competitor Comparisons

ckeditor logo

ckeditor5

9,335

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

Pros of CKEditor 5

  • More extensive feature set, including advanced formatting options and plugins
  • Highly customizable with a modular architecture
  • Better support for collaborative editing and real-time collaboration

Cons of CKEditor 5

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve due to its complexity and extensive API
  • May be overkill for simple text editing needs

Code Comparison

Trix:

<trix-editor class="trix-content"></trix-editor>
<script src="trix.js"></script>

CKEditor 5:

<div id="editor"></div>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor.create(document.querySelector('#editor'));
</script>

Summary

Trix is a lightweight, easy-to-use rich text editor focused on simplicity and performance. It's ideal for basic text editing needs and quick integration. CKEditor 5, on the other hand, offers a more comprehensive set of features and customization options, making it suitable for complex editing requirements and collaborative environments. However, this comes at the cost of increased complexity and potentially higher resource usage.

slab logo

quill

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

Pros of Quill

  • More extensive customization options and API
  • Better support for real-time collaboration
  • Wider range of formatting and content types (e.g., formulas, syntax highlighting)

Cons of Quill

  • Steeper learning curve due to more complex API
  • Larger file size and potentially higher performance overhead
  • Less native-like feel compared to Trix's simpler approach

Code Comparison

Trix (initializing editor):

<trix-editor id="editor"></trix-editor>

var element = document.querySelector("trix-editor")
element.editor // is a Trix.Editor instance

Quill (initializing editor):

<div id="editor"></div>

var quill = new Quill('#editor', {
  theme: 'snow'
});

Both Trix and Quill are powerful rich text editors for web applications. Trix focuses on simplicity and a native-like experience, while Quill offers more extensive customization options and features. The choice between them depends on the specific requirements of your project, such as the level of customization needed, performance considerations, and the desired user experience.

tinymce logo

tinymce

14,837

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

Pros of TinyMCE

  • More extensive feature set, including advanced formatting options and plugins
  • Greater customization capabilities and flexibility
  • Larger community and ecosystem, with more resources and third-party integrations

Cons of TinyMCE

  • Steeper learning curve due to its complexity and extensive API
  • Larger file size and potentially slower load times
  • May be overkill for simpler text editing needs

Code Comparison

Trix (initialization):

<trix-editor></trix-editor>

TinyMCE (basic initialization):

tinymce.init({
  selector: 'textarea',
  plugins: 'autolink link image lists print preview',
  toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image'
});

TinyMCE offers more configuration options out of the box, while Trix provides a simpler setup. TinyMCE's initialization code demonstrates its extensive customization capabilities, allowing developers to specify plugins and toolbar options. Trix, on the other hand, focuses on providing a streamlined, opinionated editor with minimal configuration required.

yabwe logo

medium-editor

16,041

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Pros of medium-editor

  • Lightweight and highly customizable
  • Supports a wide range of plugins and extensions
  • Easy to integrate with various frameworks and libraries

Cons of medium-editor

  • Less opinionated, requiring more setup for advanced features
  • May require additional work to achieve a polished, professional look
  • Documentation can be less comprehensive for some features

Code Comparison

medium-editor:

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
    },
    placeholder: {
        text: 'Type your text'
    }
});

Trix:

<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>

Key Differences

  • Trix provides a more complete, out-of-the-box solution with a polished UI
  • medium-editor offers greater flexibility and customization options
  • Trix has better accessibility features and keyboard shortcuts
  • medium-editor has a larger community and more third-party extensions

Use Cases

  • Choose Trix for a quick, professional-looking editor with minimal setup
  • Opt for medium-editor when you need extensive customization or specific features not available in Trix
summernote logo

summernote

11,521

Super simple WYSIWYG editor

Pros of Summernote

  • More feature-rich with a wider range of formatting options
  • Highly customizable with numerous plugins available
  • Better support for image handling and manipulation

Cons of Summernote

  • Larger file size and potentially slower performance
  • Steeper learning curve due to more complex API
  • Dependency on jQuery, which may not be ideal for all projects

Code Comparison

Trix (HTML):

<trix-editor></trix-editor>

Summernote (HTML + JavaScript):

<div id="summernote"></div>
<script>
  $('#summernote').summernote();
</script>

Summary

Summernote offers a more comprehensive set of features and customization options compared to Trix, making it suitable for projects requiring advanced text editing capabilities. However, this comes at the cost of a larger footprint and potential performance impact. Trix, on the other hand, provides a simpler, more lightweight solution that may be preferable for projects with basic rich text editing needs.

The choice between the two largely depends on the specific requirements of your project, such as the desired level of functionality, performance considerations, and integration with existing technologies.

froala logo

wysiwyg-editor

5,270

The next generation Javascript WYSIWYG HTML Editor.

Pros of Wysiwyg-editor

  • More extensive feature set, including image editing and file management
  • Greater customization options and theming capabilities
  • Broader browser and device compatibility

Cons of Wysiwyg-editor

  • Commercial license required for use, unlike Trix which is open-source
  • Steeper learning curve due to more complex API and configuration options
  • Larger file size and potential performance impact on web applications

Code Comparison

Trix initialization:

<trix-editor></trix-editor>
<script>
  var element = document.querySelector("trix-editor")
  element.editor // is a Trix.Editor instance
</script>

Wysiwyg-editor initialization:

<textarea id="editor"></textarea>
<script>
  new FroalaEditor('#editor', {
    // Configuration options
  });
</script>

Both editors offer simple initialization, but Wysiwyg-editor typically requires more configuration to fully utilize its features. Trix provides a more streamlined out-of-the-box experience, while Wysiwyg-editor offers greater flexibility at the cost of complexity.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Trix

A Rich Text Editor for Everyday Writing

Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Trix is an open-source project from 37signals, the creators of Ruby on Rails. Millions of people trust their text to us, and we built Trix to give them the best possible editing experience. See Trix in action in Basecamp 3.

Different By Design

When Trix was designed in 2014, most WYSIWYG editors were wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.

Because these APIs were not fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.

Trix sidestepped these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all.

This is the approach that all modern, production ready, WYSIWYG editors now take.

Built on Web standards

Trix supports all evergreen, self-updating desktop and mobile browsers.

Trix is built with established web standards, notably Custom Elements, Mutation Observer, and Promises.

Getting Started

Trix comes bundled in ESM and UMD formats and works with any asset packaging system.

The easiest way to start with Trix is including it from an npm CDN in the <head> of your page:

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

trix.css includes default styles for the Trix toolbar, editor, and attachments. Skip this file if you prefer to define these styles yourself.

Alternatively, you can install the npm package and import it in your application:

import Trix from "trix"

document.addEventListener("trix-before-initialize", () => {
  // Change Trix.config if you need
})

Creating an Editor

Place an empty <trix-editor></trix-editor> tag on the page. Trix will automatically insert a separate <trix-toolbar> before the editor.

Like an HTML <textarea>, <trix-editor> accepts autofocus and placeholder attributes. Unlike a <textarea>, <trix-editor> automatically expands vertically to fit its contents.

Integrating With Forms

To submit the contents of a <trix-editor> with a form, first define a hidden input field in the form and assign it an id. Then reference that id in the editor’s input attribute.

<form …>
  <input id="x" type="hidden" name="content">
  <trix-editor input="x"></trix-editor>
</form>

Trix will automatically update the value of the hidden input field with each change to the editor.

Populating With Stored Content

To populate a <trix-editor> with stored content, include that content in the associated input element’s value attribute.

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

Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a <trix-editor>…</trix-editor> tag.

Styling Formatted Content

To ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your <trix-editor> element, and to a containing element when you render stored Trix content for display in your application.

<trix-editor class="trix-content"></trix-editor>

<div class="trix-content">Stored content here</div>

The default trix.css file includes styles for basic formatted content—including bulleted and numbered lists, code blocks, and block quotes—under the class name trix-content. We encourage you to use these styles as a starting point by copying them into your application’s CSS with a different class name.

Storing Attached Files

Trix automatically accepts files dragged or pasted into an editor and inserts them as attachments in the document. Each attachment is considered pending until you store it remotely and provide Trix with a permanent URL.

To store attachments, listen for the trix-attachment-add event. Upload the attached files with XMLHttpRequest yourself and set the attachment’s URL attribute upon completion. See the attachment example for detailed information.

If you don’t want to accept dropped or pasted files, call preventDefault() on the trix-file-accept event, which Trix dispatches just before the trix-attachment-add event.

Editing Text Programmatically

You can manipulate a Trix editor programmatically through the Trix.Editor interface, available on each <trix-editor> element through its editor property.

var element = document.querySelector("trix-editor")
element.editor  // is a Trix.Editor instance

Understanding the Document Model

The formatted content of a Trix editor is known as a document, and is represented as an instance of the Trix.Document class. To get the editor’s current document, use the editor.getDocument method.

element.editor.getDocument()  // is a Trix.Document instance

You can convert a document to an unformatted JavaScript string with the document.toString method.

var document = element.editor.getDocument()
document.toString()  // is a JavaScript string

Immutability and Equality

Documents are immutable values. Each change you make in an editor replaces the previous document with a new document. Capturing a snapshot of the editor’s content is as simple as keeping a reference to its document, since that document will never change over time. (This is how Trix implements undo.)

To compare two documents for equality, use the document.isEqualTo method.

var document = element.editor.getDocument()
document.isEqualTo(element.editor.getDocument())  // true

Getting and Setting the Selection

Trix documents are structured as sequences of individually addressable characters. The index of one character in a document is called a position, and a start and end position together make up a range.

To get the editor’s current selection, use the editor.getSelectedRange method, which returns a two-element array containing the start and end positions.

element.editor.getSelectedRange()  // [0, 0]

You can set the editor’s current selection by passing a range array to the editor.setSelectedRange method.

// Select the first character in the document
element.editor.setSelectedRange([0, 1])

Collapsed Selections

When the start and end positions of a range are equal, the range is said to be collapsed. In the editor, a collapsed selection appears as a blinking cursor rather than a highlighted span of text.

For convenience, the following calls to setSelectedRange are equivalent when working with collapsed selections:

element.editor.setSelectedRange(1)
element.editor.setSelectedRange([1])
element.editor.setSelectedRange([1, 1])

Directional Movement

To programmatically move the cursor or selection through the document, call the editor.moveCursorInDirection or editor.expandSelectionInDirection methods with a direction argument. The direction can be either "forward" or "backward".

// Move the cursor backward one character
element.editor.moveCursorInDirection("backward")

// Expand the end of the selection forward by one character
element.editor.expandSelectionInDirection("forward")

Converting Positions to Pixel Offsets

Sometimes you need to know the x and y coordinates of a character at a given position in the editor. For example, you might want to absolutely position a pop-up menu element below the editor’s cursor.

Call the editor.getClientRectAtPosition method with a position argument to get a DOMRect instance representing the left and top offsets, width, and height of the character at the given position.

var rect = element.editor.getClientRectAtPosition(0)
[rect.left, rect.top]  // [17, 49]

Inserting and Deleting Text

The editor interface provides methods for inserting, replacing, and deleting text at the current selection.

To insert or replace text, begin by setting the selected range, then call one of the insertion methods below. Trix will first remove any selected text, then insert the new text at the start position of the selected range.

Inserting Plain Text

To insert unformatted text into the document, call the editor.insertString method.

// Insert “Hello” at the beginning of the document
element.editor.setSelectedRange([0, 0])
element.editor.insertString("Hello")

Inserting HTML

To insert HTML into the document, call the editor.insertHTML method. Trix will first convert the HTML into its internal document model. During this conversion, any formatting that cannot be represented in a Trix document will be lost.

// Insert a bold “Hello” at the beginning of the document
element.editor.setSelectedRange([0, 0])
element.editor.insertHTML("<strong>Hello</strong>")

Inserting a File

To insert a DOM File object into the document, call the editor.insertFile method. Trix will insert a pending attachment for the file as if you had dragged and dropped it onto the editor.

// Insert the selected file from the first file input element
var file = document.querySelector("input[type=file]").file
element.editor.insertFile(file)

Inserting a Content Attachment

Content attachments are self-contained units of HTML that behave like files in the editor. They can be moved or removed, but not edited directly, and are represented by a single character position in the document model.

To insert HTML as an attachment, create a Trix.Attachment with a content attribute and call the editor.insertAttachment method. The HTML inside a content attachment is not subject to Trix’s document conversion rules and will be rendered as-is.

var attachment = new Trix.Attachment({ content: '<span class="mention">@trix</span>' })
element.editor.insertAttachment(attachment)

Inserting a Line Break

To insert a line break, call the editor.insertLineBreak method, which is functionally equivalent to pressing the return key.

// Insert “Hello\n”
element.editor.insertString("Hello")
element.editor.insertLineBreak()

Deleting Text

If the current selection is collapsed, you can simulate deleting text before or after the cursor with the editor.deleteInDirection method.

// “Backspace” the first character in the document
element.editor.setSelectedRange([1, 1])
element.editor.deleteInDirection("backward")

// Delete the second character in the document
element.editor.setSelectedRange([1, 1])
element.editor.deleteInDirection("forward")

To delete a range of text, first set the selected range, then call editor.deleteInDirection with either direction as the argument.

// Delete the first five characters
element.editor.setSelectedRange([0, 4])
element.editor.deleteInDirection("forward")

Working With Attributes and Nesting

Trix represents formatting as sets of attributes applied across ranges of a document.

By default, Trix supports the inline attributes bold, italic, href, and strike, and the block-level attributes heading1, quote, code, bullet, and number.

Applying Formatting

To apply formatting to the current selection, use the editor.activateAttribute method.

element.editor.insertString("Hello")
element.editor.setSelectedRange([0, 5])
element.editor.activateAttribute("bold")

To set the href attribute, pass a URL as the second argument to editor.activateAttribute.

element.editor.insertString("Trix")
element.editor.setSelectedRange([0, 4])
element.editor.activateAttribute("href", "https://trix-editor.org/")

Removing Formatting

Use the editor.deactivateAttribute method to remove formatting from a selection.

element.editor.setSelectedRange([2, 4])
element.editor.deactivateAttribute("bold")

Formatting With a Collapsed Selection

If you activate or deactivate attributes when the selection is collapsed, your formatting changes will apply to the text inserted by any subsequent calls to editor.insertString.

element.editor.activateAttribute("italic")
element.editor.insertString("This is italic")

Adjusting the Nesting Level

To adjust the nesting level of quotes, bulleted lists, or numbered lists, call the editor.increaseNestingLevel and editor.decreaseNestingLevel methods.

element.editor.activateAttribute("quote")
element.editor.increaseNestingLevel()
element.editor.decreaseNestingLevel()

Using Undo and Redo

Trix editors support unlimited undo and redo. Successive typing and formatting changes are consolidated together at five-second intervals; all other input changes are recorded individually in undo history.

Call the editor.undo and editor.redo methods to perform an undo or redo operation.

element.editor.undo()
element.editor.redo()

Changes you make through the editor interface will not automatically record undo entries. You can save your own undo entries by calling the editor.recordUndoEntry method with a description argument.

element.editor.recordUndoEntry("Insert Text")
element.editor.insertString("Hello")

Loading and Saving Editor State

Serialize an editor’s state with JSON.stringify and restore saved state with the editor.loadJSON method. The serialized state includes the document and current selection, but does not include undo history.

// Save editor state to local storage
localStorage["editorState"] = JSON.stringify(element.editor)

// Restore editor state from local storage
element.editor.loadJSON(JSON.parse(localStorage["editorState"]))

Observing Editor Changes

The <trix-editor> element emits several events which you can use to observe and respond to changes in editor state.

  • trix-before-initialize fires when the <trix-editor> element is attached to the DOM just before Trix installs its editor object. If you need to use a custom Trix configuration you can change Trix.config here.

  • trix-initialize fires when the <trix-editor> element is attached to the DOM and its editor object is ready for use.

  • trix-change fires whenever the editor’s contents have changed.

  • trix-paste fires whenever text is pasted into the editor. The paste property on the event contains the pasted string or html, and the range of the inserted text.

  • trix-selection-change fires any time the selected range changes in the editor.

  • trix-focus and trix-blur fire when the editor gains or loses focus, respectively.

  • trix-file-accept fires when a file is dropped or inserted into the editor. You can access the DOM File object through the file property on the event. Call preventDefault on the event to prevent attaching the file to the document.

  • trix-attachment-add fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute. See the attachment example for detailed information.

  • trix-attachment-remove fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.

Contributing to Trix

Trix is open-source software, freely distributable under the terms of an MIT-style license. The source code is hosted on GitHub.

We welcome contributions in the form of bug reports, pull requests, or thoughtful discussions in the GitHub issue tracker. Please see the Code of Conduct for our pledge to contributors.

Trix was created by Javan Makhmali and Sam Stephenson, with development sponsored by 37signals.

Building From Source

Trix uses Yarn to manage dependencies and Rollup to bundle its source.

Install development dependencies with:

$ yarn install

To generate distribution files run:

$ yarn build

Developing In-Browser

You can run a watch process to automatically generate distribution files when your source file change:

$ yarn watch

When the watch process is running you can run a web server to serve the compiled assets:

$ yarn dev

With the development server running, you can visit /index.html to see a Trix debugger inspector, or /test.html to run the tests on a browser.

For easier development, you can watch for changes to the JavaScript and style files, and serve the results in a browser, with a single command:

$ yarn start

Running Tests

You can also run the test in a headless mode with:

$ yarn test

© 37signals, LLC.

NPM DownloadsLast 30 Days