Ruby on Rails
Built on Meta's open-source Lexical engine after rejecting venture-backed rivals, Lexxy resolves a decade of browser contenteditable breakages to become the new standard editor for Ruby on Rails.
AI-assisted summary of Lexxy: a new text editor for Action Text - Jorge Manrubia Díez — original source. Check the original for full context.
Source published:
Key ideas
- 37signals introduced Lexxy 1.0, an open-source rich text editor designed to replace Trix as the official default editor for Action Text in Ruby on Rails. (27:49)
- Trix's flat document model inherently blocked nested elements like tables, driving 37signals to adopt Meta's dependency-free Lexical framework and its virtual DOM reconciliation model. (0:06)
- Lexxy adds roughly 13,000 lines of vanilla JavaScript on top of Lexical, delivering sub-50-millisecond keystroke responsiveness and native Action Text canonical HTML storage. (11:44)
- The team scaled bug fixing by running 10 to 15 concurrent AI agents on Playwright-based test suites, paired with an automated PR validation agent that cleared a 300-card backlog. (25:17)
Detailed notes
## Background Published on YouTube by the Ruby on Rails channel on October 1, 2026, this talk features Jorge Manrubia Díez of 37signals presenting at Rails World 2026. The description notes that Jorge introduces Lexxy, the company's new open-source rich text editor for Action Text, and details the reasons and engineering journey behind its development.
## TL;DR Addressing the structural limitations of Trix's flat document model and the persistent instability of browser contenteditable implementations, 37signals built Lexxy on top of Meta's Lexical framework. The presentation walks through the editor's architectural foundation, its deep accessibility work, and its seamless adapter integration with Action Text in Rails. Jorge also outlines how adopting Playwright enabled the team to deploy swarms of parallel Claude AI agents with automated verification pipelines to clear a 300-bug backlog. The talk culminates in the announcement of Lexxy 1.0, positioned as a frictionless upgrade and the slated default editor for Rails.
## Atmosphere & style The presentation carries an earnest, technically lucid keynote vibe that blends pragmatic software craftsmanship with palpable excitement for modern AI-augmented workflows. Jorge candidly recounts years of frustration navigating browser updates, failed prototypes, and architectural dead ends before shifting into an exhilarating breakdown of team breakthroughs and parallel agent execution. It feels both celebratory and grounded, moving from an honest post-mortem of past pain points to a triumphant, confident rollout of a major Rails ecosystem milestone.
## Bulletin - [27:49](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1669s) 37signals introduced Lexxy 1.0, an open-source rich text editor designed to replace Trix as the official default editor for Action Text in Ruby on Rails. - [00:06](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=6s) Trix's flat document model inherently blocked nested elements like tables, driving 37signals to adopt Meta's dependency-free Lexical framework and its virtual DOM reconciliation model. - [11:44](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=704s) Lexxy adds roughly 13,000 lines of vanilla JavaScript on top of Lexical, delivering sub-50-millisecond keystroke responsiveness and native Action Text canonical HTML storage. - [25:17](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1517s) The team scaled bug fixing by running 10 to 15 concurrent AI agents on Playwright-based test suites, paired with an automated PR validation agent that cleared a 300-card backlog.
## Key takeaways - [00:06](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=6s) Trix relies on a flat list of text blocks with metadata labels, making hierarchical structures like tables architecturally impossible to represent. - [03:29](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=209s) Frequent mobile OS and browser updates break contenteditable implementations, prompting an internal 'code red' at 37signals after a 2024 iOS update broke Trix. - [06:33](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=393s) 37signals rejected VC-backed editor alternatives like TipTap to prevent future risks of paywalled features or restrictive commercial licensing, choosing Meta's Lexical instead. - [06:33](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=393s) Lexical decouples state from the browser DOM by treating contenteditable as an I/O surface and managing updates via immutable snapshots and a reconciler. - [11:44](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=704s) Building Lexxy required writing around 13,000 lines of vanilla JavaScript to manage complex edge cases such as Microsoft Word clipboard pasting and multi-image caret placement. - [12:39](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=759s) Lexxy followed an accelerated timeline from its first pull request in May 2025 to production deployment in Fizzy in December 2025 and Basecamp 5 in May 2026. - [15:00](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=900s) Lexxy natively supports tables, Prism-based code syntax highlighting for over 20 languages, markdown formatting, attachment previews, and customizable prompt APIs. - [15:00](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=900s) A clean Action Text adapter architecture introduced in Rails 8.2 decouples rich text storage from specific frontend editors while preserving canonical attachment formats. - [19:02](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1142s) Accessibility was prioritized through deep keyboard navigation support, focus management, and Alt+F10 toolbar toggles developed in collaboration with blind Rails programmer Bruno Prito. - [25:17](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1517s) Migrating editor tests from Capybara to Playwright provided low-level keyboard and focus primitives that enabled AI coding agents to write reliable browser tests. - [25:17](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1517s) Jorge orchestrated 10 to 15 concurrent Claude agents working simultaneously to clear a backlog of nearly 300 reactive bug reports and polish cards. - [26:34](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1594s) A custom validation agent evaluated PRs by reproducing bugs against production and confirming fixes locally, attaching a 'validated' label to streamline human review. - [27:49](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1669s) Lexxy 1.0 is set to become the standard editor in Ruby on Rails, providing an essentially seamless migration path for legacy Trix applications.
## Detailed walkthrough ### [00:06](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=6s) Introducing Lexxy and the Limits of Trix
Jorge Manrubia Díez introduces Lexxy, a brand-new open-source rich text editor created and released by 37signals. To contextualize why the company built Lexxy, Jorge steps back to examine Trix, the editor 37signals released in 2015 that later shipped as the default editor bundled with Action Text in Rails 6. Trix is battle-tested, robust, and served millions of users reliably for over a decade. However, in recent years, 37signals felt Trix began falling short of evolving product requirements. Customers routinely requested features—most notably tables inside Basecamp—that the engineering team struggled or outright failed to implement.
```mermaid flowchart TD accTitle: Trix Flat Document Model Limitation accDescr: Demonstrates how Trix flattens nested elements into sequential blocks with label attributes.
subgraph UserView["Rendered HTML View"] Blockquote["Blockquote container"] Bullet["Nested Bullet Item"] Blockquote --> Bullet end
subgraph TrixModel["Internal Trix Model (Flat)"] B1["Block 1: Text chunk + [blockquote]"] B2["Block 2: Text chunk + [blockquote, bullet]"] B1 --> B2 end ```
The root cause of these limitations lies in Trix’s internal document model. Trix models rich text as a strictly flat list of blocks, where each block is a text fragment annotated with metadata labels. If a user intends to display a bulleted item nested within a blockquote, Trix does not store a nested hierarchy; instead, it stores one block tagged with a blockquote attribute, immediately followed by another block tagged with both blockquote and bullet attributes. Trix only reconstructs the visual nesting at rendering time. While this flat structure delivers significant advantages—document cursor positions can be modeled with just two numbers, and clean HTML is practically guaranteed—it makes hierarchical structures like tables fundamentally impossible to represent, as tables require nested structures where rows contain cells, and cells hold arbitrary HTML.
- Trix was released in 2015 and bundled with Action Text in Rails 6. - Trix uses a flat list of text blocks with attribute labels rather than a hierarchical node tree. - Cursor positions in Trix require only two integers to represent, keeping serialization straightforward. - True nesting (such as table rows holding cells with nested markup) cannot be expressed inside Trix's flat block model.
[03:29](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=209s) The Contenteditable Nightmare and the Chronology of Spikes
Beyond document model limits, maintaining a modern text editor on the web presents an ongoing engineering struggle against `contenteditable`. Jorge characterizes `contenteditable` as profoundly unstable ground: it behaves inconsistently across different browsers and frequently breaks when underlying operating systems update. In 2024, a succession of iOS update releases broke Trix's handling of autocompletion, dictation, and cursor positioning. When the 37signals team discovered on an early iOS beta that Trix was completely broken, it triggered an internal "code red" to avert widespread breakage across their production apps before the official mobile OS release.
The pursuit of an alternative had been ongoing across multiple iterations:
- **2022:** 37signals spent one to two weeks spiking table support inside Trix, ultimately abandoning the effort after confirming the flat document model made an appealing implementation impossible. - **2023:** Jorge explored an integration spike with TipTap inside HEY to solve incoming and outgoing email formatting, but the team set it aside due to the sheer complexity of arbitrary email formatting. - **2024:** 37signals launched Writebook featuring HouseMD, a "what you see is what you mean" Markdown editor rather than a WYSIWYG editor. While HouseMD was well-suited for long-form books and documentation, early 2025 experiments proved it was not the right fit for mainstream, general-purpose productivity tools where users expect a true WYSIWYG experience.
[06:33](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=393s) Rejecting VC-Backed Open Source and Finding Meta's Lexical
In early 2025, Brian Baily (Head of Product Strategy at 37signals) reopened the strategic discussion around replacing Trix. While TipTap resurfaced as a candidate, David Heinemeier Hansson (DHH) and the team firmly rejected it due to governance and business model risks. They refused to rely on an open-source project backed by venture capital, where business tension often leads to moving open-source features behind proprietary paywalls or gating critical security patches behind commercial licenses—an open-source model failure 37signals had experienced previously with Chef.
```mermaid flowchart LR accTitle: Lexical Document Architecture accDescr: Lexical treats contenteditable as I/O while maintaining an immutable internal snapshot resolved by a reconciler.
subgraph InputOutput["Browser DOM Layer"] CE["contenteditable (I/O & render surface only)"] end
subgraph LexicalCore["Lexical Core Engine"] State["Immutable Document Snapshots"] Reconciler["Reconciler (Virtual-DOM style diff)"] Cmds["Command Bus"] Trans["Node Transformers"] end
CE -->|"User event"| Cmds Cmds -->|"Dispatches update"| State State -->|"Snapshot diff"| Reconciler Reconciler -->|"Patches minimal mutations"| CE ```
Later in 2025, the team evaluated Lexical, an open-source rich text framework developed by Meta, and immediately adopted it as their foundational framework. Lexical features an ultra-lean core with zero third-party dependencies. Like Trix a decade before, Lexical treats `contenteditable` strictly as an input/output rendering surface rather than the source of truth. Internal document state is modeled as immutable snapshots. Changes are calculated via an internal reconciler—similar to the virtual DOM approach popularized by React—which applies minimal, optimized updates directly to the browser DOM. The core engine is complemented by an internal command event bus and transform hooks, with extended capabilities (rich text formatting, markdown shortcuts, tables, clipboard handling) packaged as modular satellite libraries.
- Meta powers high-volume flagship apps like WhatsApp and Instagram on Lexical, ensuring device-level keyboard and mobile OS bugs are surfaced and resolved before affecting downstream adopters. - Meta's incentives align with keeping Lexical fully open and robust without needing to monetize the editing framework itself via dual-licensing or paid enterprise add-ons. - Lexical's immutable snapshots and virtual DOM-like reconciler prevent browser-induced state corruption.
[11:44](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=704s) The Reality of Building Lexxy on Lexical
Initial assumptions that 37signals could simply assemble Lexical’s existing modules, wrap them in a custom toolbar, and ship the product quickly proved overly optimistic. Crafting a polished, resilient editing experience required managing immense edge-case complexity. Rich text editors represent an extraordinarily volatile state space where document states undergo permutations in countless directions multiple times per second. Delivering the final polished experience demanded writing roughly 13,000 lines of vanilla JavaScript directly on top of Lexical's foundation, which together form the Lexxy codebase.
[12:39](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=759s) Technical Hurdles and Development Timeline
The engineering complexities of building a robust rich text editor are immense, involving tricky edge cases like managing cursor blinking between two adjacent images when DOM space is tight, or handling messy copy-and-paste inputs from applications like Microsoft Word that use non-standard markup. Jorge Manrubia outlines the key release milestones for Lexxy: development kicked off with a first pull request in May 2025, followed by the first real-world customer usage in the "Fizzy" app in December 2025, and a broader rollout in May 2026 with Basecamp 5.
Jorge expresses deep gratitude to team members Sultan Hotsu and Sam Pesher at 37signals, who took a very green prototype of Lexxy and handled the immense complexity of building features, fixing countless bugs, and polishing it for release in Basecamp 5. Rather than settling for a "Trix with tables," the team aimed high, leveraging the power of the Lexical editing framework combined with AI agents as productivity multipliers to deliver the full package: speed, accessibility, security, documentation, extensibility, and rich configuration APIs.
- **May 2025:** First pull request for Lexxy. - **December 2025:** First production usage with Fizzy. - **May 2026:** Widespread adoption with Basecamp 5. - **Key Contributors:** Sultan Hotsu and Sam Pesher.
---
[15:00](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=900s) Feature Tour and Action Text Integration
Lexxy packs a comprehensive set of features, including a color highlighter (previously proprietary to Basecamp in Trix), beautifully designed tables, Markdown syntax support, and real-time code highlighting for over 20 languages powered by Prism. It also supports image galleries with vastly improved drag-and-drop and keyboard handling, automatic URL link creation, attachment previews for PDFs and movies, and a powerful prompt API for features like emoji pickers and company user mentions.
A crucial architectural achievement is Lexxy's integration with Action Text. Action Text uses a normalized canonical HTML storage format for attachments (like image galleries, file attachments, and custom mentions) that remains independent of any specific editor. While Trix required cumbersome back-and-forth conversions, Lexxy leverages Lexical's customization capabilities to natively manage this canonical format. Furthermore, the team created a clean adapter architecture in Rails (landing in Rails 8.2 and already in the main branch) that allows different editors to plug into Action Text. Jorge credits Sean Doyle from ThoughtBot for picking up an early pull request for this adapter and driving it across the finish line.
---
[19:02](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1142s) Extensibility, Performance, and Accessibility
Lexxy is built to be fully extendable via a robust API that exposes Lexical's underlying extension capabilities, allowing developers to define new node types, create custom commands, and add toolbar buttons. Battle-tested across roughly 10 internal extensions in Lexxy and another 9 or 10 in Basecamp, this architecture powers complex proprietary features like Basecamp's voice notes. Performance-wise, Lexxy stays well under the crucial 50-millisecond threshold from keypress to UI update, rendering it vastly more responsive than Trix.
Accessibility was treated as a top-tier priority, spearheaded by Michael Dallesio (QA team lead and accessibility champion) alongside Bruno Prito—an outstanding Rails and frontend programmer who is blind. Drawing on his lived experience suffering through inaccessible editors, Bruno ensured Lexxy generates impeccably structured, accessible HTML with robust keyboard support, focus management, and specialized conventions like `Alt+F10` to effortlessly toggle between the editor and specific toolbars or sort images using arrow keys. Security was similarly rigorous, enlisting experts Jeremy Dailey and Mike Dallesio to implement dedicated DOMPurify sanitization, URL sanitization, and strict node-type controls against modern AI-discovered vulnerabilities.
- **Performance Threshold:** Under 50 milliseconds response time. - **Accessibility Champions:** Michael Dallesio and Bruno Prito. - **Security Experts:** Jeremy Dailey and Mike Dallesio.
---
[23:47](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1427s) Building with AI Agents and Testing Evolution
Reflecting on the development process, Jorge shares that Lexxy was the first major project where he built everything from scratch using Claude, noting that like every developer in 2025, he was utterly blown away by the productivity multiplier of AI agents. His testing strategy evolved during the build: he started with Capybara for system tests to exercise Action Text boundaries and server payloads, but eventually introduced Playwright into the suite. While Capybara remained anchored to server-side tests, Playwright provided superior cross-browser testing robustness for intricate text-editing interactions.
- **AI Integration:** Built from scratch leveraging Claude as an agentic coding assistant. - **Testing Stack:** Capybara for server-side Action Text payload tests; Playwright for cross-browser text-editing interactions.
<FollowUp label="Want to know more about how Bruno Prito and the team implemented keyboard accessibility features in Lexxy?" query="Explain how Bruno Prito and the 37signals team implemented keyboard accessibility and focus management in Lexxy."/>
[25:17](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1517s) Migrating to Playwright and Scaling Bug Fixes with Claude
Switching the test suite over to Playwright marked a dramatic turning point for automated development on Lexxy. Jorge admits that the shift felt almost miraculous when combined with AI agents: "it was wonderful for Claude. It was like if Claude was saying, 'finally!' like it blossomed." The core reason Playwright unlocked such high agent performance was its robust set of low-level browser primitives, especially around keyboard management and focus handling. Writing tests for a rich text editor is notoriously fiddly and error-prone, but with Playwright, Claude and automated agents genuinely shined, making the migration easily the single best decision of the entire project from an AI agent tooling perspective.
Armed with this testing foundation, Jorge experimented for the first time with deploying massive concurrency—orchestrating 10 to 15 autonomous agents working on bug fixes simultaneously. After the initial release and leading up to Basecamp, the team had amassed a queue of roughly 300 bug reports, polish tasks, and general cards. None of these were major new feature designs; they represented the intense, reactive stabilization work required to get Lexxy production-ready across edge cases. Watching swarms of parallel agents churn through this mountain of polish proved both exhilarating and transformative for the team's velocity.
- Playwright provided the low-level focus and keyboard manipulation primitives that AI agents needed to reliably script rich text editor tests. - 10 to 15 agents were deployed in parallel to tackle reactive polish and edge-case fixes. - The team cleared an accumulated backlog of nearly 300 bug cards leading into Basecamp.
---
[26:34](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1594s) Automated PR Verification Workflows with AI Agents
Running massive batches of parallel agents immediately exposed a downstream bottleneck: how does a human maintain code quality and review so many pull requests without drowning? To solve this, the team turned agents back onto the review process itself by creating a dedicated verification skill. When an agent opens a pull request for a bug fix or user-facing change, a validation agent spins up with a completely clean context window. It executes a test script against the Lexxy production sandbox on the homepage to confirm the bug actually exists in production, runs the exact same reproduction steps against the local branch with the proposed fix, and checks whether the issue is resolved.
If both conditions pass—reproduced in production, fixed locally—the validation agent applies an automated `validated` label to the pull request on GitHub. This visual signal fundamentally alters the mental load of code review. When an engineer sits down to review a queue of 15 incoming pull requests and sees that 11 of them already carry the `validated` badge with reproducible before-and-after proof, they can review and merge the changes at unprecedented speed.
```mermaid flowchart TD accTitle: Automated PR Verification Workflow accDescr: Flowchart illustrating how an AI agent validates bug fix pull requests against production and local environments before labeling.
subgraph Evaluation ["Evaluation in Fresh Context"] A["Agent submits PR"] --> B["Validation Skill initialized"] B --> C["Reproduce bug on production sandbox"] C --> D["Run same test script on local fix branch"] end
subgraph Verification ["Result & Triage"] D -->|Both checks pass| E["Apply 'validated' label to PR"] D -->|Fails check| F["Flag for developer investigation"] E --> G["Accelerated human review and merge"] end ```
- A custom skill launches with clean context to independently reproduce the issue against the live production sandbox. - The same verification script runs against the local branch containing the proposed patch. - Successful verification automatically marks the PR as `validated`, allowing reviewers to breeze through the majority of pull requests with high confidence.
---
[27:49](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1669s) Announcing Lexxy 1.0 and the Future of Action Text
Jorge officially announces the release of Lexxy version 1.0 on stage at Rails World. While the editor has already enjoyed stability in real-world usage for several months, the team deliberately saved the milestone 1.0 version number for this presentation. Crucially, Lexxy is slated to become the official default rich text editor in Ruby on Rails, replacing Trix for Action Text applications.
For developers building greenfield Rails applications today, Jorge strongly recommends starting immediately with Lexxy, calling it "absolutely the future." For teams maintaining legacy applications powered by Trix, the transition is designed to be remarkably frictionless. Unless an application relies on intricate custom patches or deeply coupled extensions to Trix's internal architecture, upgrading to Lexxy should be completely seamless—the exact migration path 37signals verified while upgrading Basecamp. Jorge concludes with confidence that Lexxy stands as a top contender among the absolute best web editors available today, inviting the Rails community to embrace it in their own projects.
- Lexxy 1.0 is officially released, having already achieved production stability over several months. - Lexxy is slated to replace Trix as the out-of-the-box default rich text editor for Action Text in Ruby on Rails. - Migration from Trix is largely seamless out of the box, matching the frictionless upgrade path proven in Basecamp.
## Notable quotes > [03:29](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=209s) contenteditable is profoundly unstable ground — Jorge Manrubia Díez
> [25:17](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1517s) it was wonderful for Claude. It was like if Claude was saying, 'finally!' like it blossomed. — Jorge Manrubia Díez
> [27:49](https://www.youtube.com/watch?v=UIXwabQ9jIU&t=1669s) absolutely the future — Jorge Manrubia Díez
## Mentioned Jorge Manrubia Díez, 37signals, Lexxy, Trix, Action Text, Ruby on Rails, Rails World 2026, Basecamp, Basecamp 5, HEY, Writebook, HouseMD, TipTap, Meta, Lexical, React, WhatsApp, Instagram, Brian Baily, David Heinemeier Hansson (DHH), Chef, Sultan Hotsu, Sam Pesher, Fizzy, Prism, Sean Doyle, ThoughtBot, Rails 8.2, Michael Dallesio, Bruno Prito, Jeremy Dailey, DOMPurify, Claude, Capybara, Playwright, Shopify
## Video description At Rails World 2026, Jorge Manrubia Díez of 37signals introduces Lexxy, the new open-source rich text editor for Action Text, and explains why the team built it.
#RailsWorld #RubyOnRails #ActionText #Lexxy #37signals #OpenSource
Thank you Shopify for sponsoring the editing and post-production of these videos. Check out insights from the Engineering team at: https://shopify.engineering/
[Source](https://www.youtube.com/watch?v=UIXwabQ9jIU)