Lexxy - The next generation rich text editor for Rails

What is Lexxy?

Lexxy is a new rich text editor for Action Text, developed by Basecamp. It is built on top of Lexical.

Lexical is a fast, robust, flexible framework for building text editors, developed by Meta (and used in WhatsApp and Facebook apps).

Lexxy makes it easy to write and format rich text content. It is designed to work smoothly with Action Text and Active Storage, so users can add images, videos, and other files directly in the editor.

Motivation for Lexxy

Lexxy was created because Trix didn’t meet Basecamp’s expectations or support all the features they wanted to offer. With Lexxy, the team now has a strong foundation to build on.

Let’s see which features Lexxy offers as compared to Trix.

Trix vs Lexxy

Watch how the comparison works directly in the Trix and Lexxy playgrounds.

Trix editor

Lexical editor

Features in Lexxy

• Clean HTML output: Paragraphs are made with proper <p> tags, so styling the text is easier.

• Markdown shortcuts: We can type or paste Markdown, and it automatically turns into formatted text.

• Real-time code highlighting: When we write code, it gets highlighted right away and we can pick which language it is.

• Smart links: Pasting a link links it instantly. Selecting text and pasting a link turns the text into a link.

• Rich attachment previews: We can see PDFs and videos directly while editing, just like they’ll appear later.

• Prompts for mentions and commands: If we type “@” or “/”, menus pop up for mentions, hashtags, or commands, and we can set these menus to show items from the server, filter them in the browser, or add our own choices. Both special attachments and basic HTML are supported in these menus.

Installation

• Add the gem to the Gemfile

#Gemfile
gem 'lexxy', '~> 0.1.4.beta' # Need to specify the version since it's a pre-release

Run below command

bundle install

• With import maps

# importmap.rb
pin "lexxy", to: "lexxy.js"
pin "@rails/activestorage", to: "activestorage.esm.js" # to support attachments

Then import it in the JavaScript entry point:

// app/javascript/application.js
import "lexxy"

• With JavaScript bundlers

When using jsbundling-rails, esbuild, webpack, or any JavaScript bundler, the NPM package can be installed.

yarn add @37signals/lexxy
yarn add @rails/activestorage # to support attachments

Then import it in the JavaScript entry point:

// app/javascript/application.js
import "@37signals/lexxy"

Future Plans for Lexxy

Lexxy is still in early beta but evolving fast. The roadmap includes:

• Configurable editors in Action Text: Choose between Lexxy, Trix, or third-party editors like tiptap—make the editor interchangeable.

• More features coming soon: Table support, text color highlighting, image galleries for full compatibility with Trix’s HTML, and a standalone JS package for non-Rails use.

• Better configuration and distribution: Easier installs, streamlined settings, and broadening Lexxy’s usability beyond Rails.

• Battle-tested reliability: Lexxy is already in use at Basecamp, but not yet fully mature. Expect rapid improvements as more users adopt it.

Key Takeaways

Lexxy represents a big leap forward for rich text in Rails. It brings modern editing features, better HTML output, markdown support, and smart integration with Action Text. For anyone building a Rails app that needs great WYSIWYG editing, Lexxy is worth trying out, just remember it is still in beta, so keep an eye on the updates.

Quick references

• Lexxy github
• Blog post by Jorge Manrubia
• Lexxy playground
• Trix playground