Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS - InfoQ

[BT](http://www.infoq.com/int/bt/ "bt")

InfoQ Software Architects' Newsletter

A monthly overview of things you need to know as an architect or aspiring architect.

View an example

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

Close

Live Webinar and Q&A: Shipping Faster, Breaking More: Rethinking Delivery Systems in the Age of AI (May 28, 2026)Save Your Seat

Close

Toggle Navigation

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

English edition

• English edition
• Chinese edition
• Japanese edition
• French edition

[Write for InfoQ](http://www.infoq.com/write-for-infoq/ "Write for InfoQ")

Search

RegisterSign in

Unlock the full InfoQ experience

Unlock the full InfoQ experience by logging in! Stay updated with your favorite authors and topics, engage with content, and download exclusive resources.

Log In

or

Don't have an InfoQ account?

Register

• **Stay updated on topics and peers that matter to you**Receive instant alerts on the latest insights and trends.
• **Quickly access free resources for continuous learning**Minibooks, videos with transcripts, and training materials.
• **Save articles and read at anytime**Bookmark articles to read whenever youre ready.

Logo - Back to homepage

NewsArticlesPresentationsPodcastsGuides

Topics

[Development](http://www.infoq.com/development/ "Development")

• [Java](http://www.infoq.com/java/ "Java")
• [Kotlin](http://www.infoq.com/kotlin/ "Kotlin")
• [.Net](http://www.infoq.com/dotnet/ ".Net")
• [C#](http://www.infoq.com/c_sharp/ "C#")
• [Swift](http://www.infoq.com/swift/ "Swift")
• [Go](http://www.infoq.com/golang/ "Go")
• [Rust](http://www.infoq.com/rust/ "Rust")
• [JavaScript](http://www.infoq.com/javascript/ "JavaScript")

Featured in Development

• #### From VR to Flat Screens: Bridging the Input and Immersion Gap

Dany Lepage discusses the architectural journey of porting a hit VR title to seven non-VR platforms. He explains how his team solved the challenges of cross-progression, diverse input paradigms, and maintaining release velocity across Steam, iOS, and PlayStation. Beyond the tech, he shares candid lessons on the "product fit" gap when translating immersive social presence to 2D screens.


All in developmentFollow Topic

[Architecture & Design](http://www.infoq.com/architecture-design/ "Architecture & Design")

• [Architecture](http://www.infoq.com/architecture/ "Architecture")
• [Enterprise Architecture](http://www.infoq.com/enterprise-architecture/ "Enterprise Architecture")
• [Scalability/Performance](http://www.infoq.com/performance-scalability/ "Scalability/Performance")
• [Design](http://www.infoq.com/design/ "Design")
• [Case Studies](http://www.infoq.com/Case_Study/ "Case Studies")
• [Microservices](http://www.infoq.com/microservices/ "Microservices")
• [Service Mesh](http://www.infoq.com/servicemesh/ "Service Mesh")
• [Patterns](http://www.infoq.com/DesignPattern/ "Patterns")
• [Security](http://www.infoq.com/Security/ "Security")

Featured in Architecture & Design

• #### Event-Driven Patterns for Cloud-Native Banking - What Works, What Hurts?

Chris Tacey-Green discusses the shift from synchronous commands to asynchronous events within highly regulated environments. He explains the critical role of Inbox and Outbox patterns in preventing data loss, the nuances of event versioning, and how to maintain decoupling between domains. He shares "battle-tested" principles for implementing fault tolerance and managing eventual consistency.


All in architecture-designFollow Topic

[AI Infrastructure](http://www.infoq.com/ai-ml-data-eng/ "AI Infrastructure")

• [Big Data](http://www.infoq.com/bigdata/ "Big Data")
• [Machine Learning](http://www.infoq.com/machinelearning/ "Machine Learning")
• [NoSQL](http://www.infoq.com/nosql/ "NoSQL")
• [Database](http://www.infoq.com/database/ "Database")
• [Data Analytics](http://www.infoq.com/data-analytics/ "Data Analytics")
• [Streaming](http://www.infoq.com/streaming/ "Streaming")

Featured in AI, ML & Data Engineering

• #### Lakehouse Tower of Babel: Handling Identifier Resolution Rules across Database Engines

Lakehouse architectures enable multiple engines to operate on shared data using open table formats such as Apache Iceberg. However, differences in SQL identifier resolution and catalog naming rules create interoperability failures. This article examines these behaviors and explains why enforcing consistent naming conventions and cross-engine validation is critical.


All in ai-ml-data-engFollow Topic

[Culture & Methods](http://www.infoq.com/culture-methods/ "Culture & Methods")

• [Agile](http://www.infoq.com/agile/ "Agile")
• [Diversity](http://www.infoq.com/diversity/ "Diversity")
• [Leadership](http://www.infoq.com/leadership/ "Leadership")
• [Lean/Kanban](http://www.infoq.com/lean/ "Lean/Kanban")
• [Personal Growth](http://www.infoq.com/personal-growth/ "Personal Growth")
• [Scrum](http://www.infoq.com/scrum/ "Scrum")
• [Sociocracy](http://www.infoq.com/sociocracy/ "Sociocracy")
• [Software Craftmanship](http://www.infoq.com/software_craftsmanship/ "Software Craftmanship")
• [Team Collaboration](http://www.infoq.com/team-collaboration/ "Team Collaboration")
• [Testing](http://www.infoq.com/testing/ "Testing")
• [UX](http://www.infoq.com/ux/ "UX")

Featured in Culture & Methods

• #### Empower Your Developers: How Open Source Dependencies Risk Management Can Unlock Innovation

Celine Pypaert discusses the ubiquitous nature of open-source software and shares a blueprint for securing modern applications. She explains how to prioritize high-risk vulnerabilities using exploitability data, the role of Software Bill of Materials (SBOM), and the importance of bridging the gap between DevOps and Security through clear accountability and automated governance.


All in culture-methodsFollow Topic

DevOps

• [Infrastructure](http://www.infoq.com/infrastructure/ "Infrastructure")
• [Continuous Delivery](http://www.infoq.com/continuous_delivery/ "Continuous Delivery")
• [Automation](http://www.infoq.com/automation/ "Automation")
• [Containers](http://www.infoq.com/containers/ "Containers")
• [Cloud](http://www.infoq.com/cloud-computing/ "Cloud")
• [Observability](http://www.infoq.com/observability/ "Observability")

Featured in DevOps

• #### Beyond One-Click: Designing an Enterprise-Grade Observability Extension for Docker

Docker Extensions boost developer speed but create a "visibility gap" by isolating telemetry. To meet enterprise needs, extensions must act as bridges to centralized platforms. This article details how to use OpenTelemetry, policy-as-code, and encryption to build secure pipelines. Learn to balance developer productivity with the governance required for scalable, compliant observability.


All in devopsFollow Topic

[Events](https://events.infoq.com/ "Events")

Helpful links

• [About InfoQ](http://www.infoq.com/about-infoq "About InfoQ")
• [InfoQ Editors](http://www.infoq.com/infoq-editors "InfoQ Editors")
• [Write for InfoQ](http://www.infoq.com/write-for-infoq "Write for InfoQ")
• [About C4Media](https://c4media.com/ "About C4Media")
• [Diversity](https://c4media.com/diversity "Diversity")

Choose your language

• [En](http://www.infoq.com/news/2026/04/pretext-js-120fps-text-layout/# "InfoQ English")
• 中文
• 日本
• Fr


[InfoQ Homepage](http://www.infoq.com/ "InfoQ Homepage")[News](http://www.infoq.com/news "News")Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

[Web Development](http://www.infoq.com/Web-Development/ "Web Development")

Shipping Faster, Breaking More: Rethinking Delivery Systems in the Age of AI (Webinar May 28th)

Pretext.js Bypasses DOM Layout Reflow, Enabling Advanced UX Patterns at 120 FPS

Apr 20, 2026 3 min read

by

• [](http://www.infoq.com/profile/Bruno-Couriol/)Bruno Couriol

Follow Application Consultant

#### Write for InfoQ

**Feed your curiosity.**Help 550k+ global

senior developers

each month stay ahead.Get in touch

Log in to listen to this article

Loading audio

Your browser does not support the audio element.

0:00 0:00

Normal 1.25x 1.5x

Like

• Reading list

Cheng Lou, a Midjourney engineer and former React core team member, recently released Pretext, a 15KB open-source TypeScript library that measures and lays out text without touching the DOM. This approach eschews expensive browser layout reflows, enabling advanced UX/UI patterns like infinite lists, masonry layouts, and scroll position anchoring to run at 60-120 fps. Pretext was built using an AI loop that reverse-engineered the DOM’s layout calculations.

For consumer-driven (e.g., B2C) applications, the end-user experience is a major driver of differentiation and adoption. Web applications have long used advanced UI/UX patterns such as masonry layouts (e.g., Pinterest, Tumblr), virtual list scrolling (e.g., X, formerly Twitter), and scroll position anchoring. Some of these patterns are being normalized into CSS standards like CSS Grid for masonry and `overflow-anchor`, though browser support varies. Any custom, JavaScript-based implementation of these patterns is vulnerable to layout thrashing and its associated performance costs.

When an application needs to calculate the height of text—such as for virtualized lists with thousands of items, masonry grids, or continuous streaming AI chat interfaces—it traditionally queries the Document Object Model (DOM) using commands like `getBoundingClientRect` or `offsetHeight`. The browser responds by triggering a layout reflow, forcing its rendering engine to recalculate the geometry and position of every element on the page. On heavy pages or with tight rendering budgets, reflow leads to frame drops and sluggish interfaces.

Pretext.js eschews reflow entirely. The tool operates in two distinct phases. The `prepare()` phase uses the Canvas API’s `measureText()` to analyze text and determine the pixel width of every segment (based on font, spacing, and Unicode rules) independently of the DOM. These results are then cached. The `prepare()` cost is paid once. The `layout()` phase then uses pure arithmetic on these cached widths to derive the total line count and final height based on the container size. `layout()` is the hot path that may be called as often as needed to reflect changes in the container’s dimensions. Neither phase reads from the DOM, thus causing no expensive reflows.

According to multiple performance testsshared by the community, a single layout operation on 500 blocks of text takes approximately 0.09 milliseconds with Pretext, making it up to 600 times faster than traditional DOM-based methods. This makes it easier for applications to maintain 120 frames per second, even when users manipulate elements that require text to wrap dynamically in real-time.

Interestingly, Lou explains that AI played a major role in the successful multi-language implementation of the library:

The engine is tiny (a few KB), aware of browser quirks, and supports all the languages you’ll need, including Korean mixed with RTL Arabic and platform-specific emojis. This was achieved by showing Claude and Codex the browser’s ground truth and having them measure and iterate against those results at every significant container width, running over a period of weeks.

This method, using working software as an oracle for verification, illustrates the potential of autonomous AI loops. Recently, sixteen Claude agents built a C compiler that passes 99% of `gcc` tests. While that compiler is not production-grade, it required merely two weeks of work and minimal human intervention.

Developers have reacted with overwhelming positivity to the release. The repository gained 16,000 GitHub stars within 24 hours of the announcement. Developers have already begun applying the tool to interfaces previously considered too heavy for the web, as highlighted by Simon Willison on his blog, where he detailed the library’s ability to recreate professional-grade print typography on the web.

One designer said:

There’s always been a gap between what print designers do and what web designers are allowed to do. It mostly comes down to text. I have been completely obsessed with these beautiful Pretext demos, and have collected some of my favourites.

[…] For graphic designers it means using text on the web with the same flexibility you get in print.

Interested developers can review the many available demos and use cases, such as variable-height virtual scroll, dynamic AI chat bubbles, and a multilingual content feed. Those inclined toward mathematics and typesetting can also review an interactive comparison of justification algorithms, pitting Pretext against the Web’s standard and the Knuth-Plass algorithm (used in the famed TeX/LaTeX typesetting system).

About the Author

[](http://www.infoq.com/profile/Bruno-Couriol/)

#### **Bruno Couriol**

MSc in Telecommunications. BSc in Mathematics.

Show more Show less

#### This content is in the Web Development topic

Follow Topic

##### Related Topics:

• Development### Development

Followers: 4088

Follow Topic

• JavaScript Libraries### JavaScript Libraries

Followers: 113

Follow Topic

• Web Development### Web Development

Followers: 953

Follow Topic

• TypeScript### TypeScript

Followers: 86

Follow Topic

* #### Popular in Web Development

• ##### Tailwind CSS 4.2 Ships Webpack Plugin, New Palettes and Logical Property Utilities

• ##### Safari Adds Scrollend Event Support, Completing Baseline Browser Coverage

• ##### Vercel Releases JSON-Render: a Generative UI Framework for AI-Driven Interface Composition

• ##### Effect v4 Beta: Rewritten Runtime, Smaller Bundles and Unified Package System

• ##### Astro Announces Version 6 Beta with Redesigned Development Server and First-Class Cloudflare Workers

* #### Related Sponsors

• ##### The missing layer in the agentic AI stack: Why AI applications need durable sessions

• ##### Cutting Java Costs in 2026 Without Slowing Delivery

• ##### Shipping Faster, Breaking More: Rethinking Delivery Systems in the Age of AI (Live Webinar May 28th) - Save Your Seat

• ##### Stateful agents, stateful infra: The transport gap AI teams are patching by hand

• ##### Scalable Enterprise Java for the Cloud - Download the eBook

• #### Related Sponsor

Move from complexity to control. Run and scale your Jakarta EE, Spring, and Quarkus applications on a unified platform that replaces infrastructure chaos with deployment simplicity and total autonomy. **Learn More**.

Related Content

• ##### Effect v4 Beta: Rewritten Runtime, Smaller Bundles and Unified Package System

Apr 18, 2026

• ##### Pulumi Adds Full Bun Runtime Support

Apr 18, 2026

• ##### Cloudflare Launches Code Mode MCP Server to Optimize Token Usage for AI Agents

Apr 16, 2026

• ##### Cloudflare Introduces EmDash: TypeScript CMS Positioned as WordPress Successor

Apr 09, 2026

• ##### ESLint v10: Flat Config Completion and JSX Tracking

Apr 01, 2026

• ##### TanStack Start Introduces Import Protection to Enforce Server and Client Boundaries

Mar 31, 2026

• ##### Nuxt Test Utils v4: Vitest v4 Requirement, Mocking Overhaul and Stricter Environment Setup

Mar 29, 2026

• ##### Building Production-Ready tRPC APIs: The TypeScript Alternative to Apollo Federation

Apr 20, 2026 

• Icon##### Speed at Scale: Optimizing the Largest CX Platform out There

Apr 17, 2026 

Related Sponsors

• #### The Essential Guide to AI Tools for Jakarta EE Developers

Enterprise Java teams face growing delivery pressure. This guide shows how AI tools reduce boilerplate, automate tasks, and improve code quality, with real examples of code generation, testing, and workflows for Jakarta EE developers.

• Sponsored by


Related Content

• ##### Safari Adds Scrollend Event Support, Completing Baseline Browser Coverage

Apr 10, 2026

• ##### Tailwind CSS 4.2 Ships Webpack Plugin, New Palettes and Logical Property Utilities

Apr 08, 2026

• ##### Module Federation 2.0 Reaches Stable Release with Wider Support outside of Webpack

Apr 03, 2026

• ##### Axios npm Package Compromised in Supply Chain Attack

Apr 02, 2026

• ##### FOSDEM 2026: Intro to WebTransport - the Next WebSocket?!

Mar 29, 2026

• ##### Experimental Web Install API Seeks to Improve Application Discovery and Distribution

Mar 27, 2026

**The InfoQ** Newsletter

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

• Development

• ##### [C++26: Reflection, Memory Safety, Contracts, and a New Async Model](http://www.infoq.com/news/2026/04/cpp-26-reflection-safety-async/ "C++26: Reflection, Memory Safety, Contracts, and a New Async Model")

• ##### [From VR to Flat Screens: Bridging the Input and Immersion Gap](http://www.infoq.com/presentations/game-vr-flat-screens/ "From VR to Flat Screens: Bridging the Input and Immersion Gap")

• ##### [Cursor 3 Introduces Agent-First Interface, Moving beyond the IDE Model](http://www.infoq.com/news/2026/04/cursor-3-agent-first-interface/ "Cursor 3 Introduces Agent-First Interface, Moving beyond the IDE Model")

• Architecture & Design

• ##### [Event-Driven Patterns for Cloud-Native Banking - What Works, What Hurts?](http://www.infoq.com/presentations/patterns-payment-system/ "Event-Driven Patterns for Cloud-Native Banking - What Works, What Hurts?")

• ##### [Engineering Stable, Secure and Scalable Platforms: A Conversation with Matthew Liste](http://www.infoq.com/podcasts/engineering-stable-secure-scalable-platforms/ "Engineering Stable, Secure and Scalable Platforms: A Conversation with Matthew Liste")

• ##### [Meta Reports 4x Higher Bug Detection with Just-in-Time Testing](http://www.infoq.com/news/2026/04/meta-jit-testing-ai-detection/ "Meta Reports 4x Higher Bug Detection with Just-in-Time Testing")

• Culture & Methods

• ##### [Platform as a Product: Delivering Value While Balancing Competing Priorities](http://www.infoq.com/news/2026/04/platform-product-deliver-value/ "Platform as a Product: Delivering Value While Balancing Competing Priorities")

• ##### [Empower Your Developers: How Open Source Dependencies Risk Management Can Unlock Innovation](http://www.infoq.com/presentations/open-source-dependencies/ "Empower Your Developers: How Open Source Dependencies Risk Management Can Unlock Innovation")

• ##### [Tiger Teams, Evals and Agents: The New AI Engineering Playbook](http://www.infoq.com/podcasts/tiger-teams-evals-agents/ "Tiger Teams, Evals and Agents: The New AI Engineering Playbook")

• AI, ML & Data Engineering

• ##### [Subagents in Gemini CLI Enable Task Delegation and Parallel Agent Workflows](http://www.infoq.com/news/2026/04/subagents-gemini-cli/ "Subagents in Gemini CLI Enable Task Delegation and Parallel Agent Workflows")

• ##### [Google’s Aletheia Advances the State of the Art of Fully Autonomous Agentic Math Research](http://www.infoq.com/news/2026/04/deepmind-aletheia-agentic-math/ "Google’s Aletheia Advances the State of the Art of Fully Autonomous Agentic Math Research")

• ##### [Anthropic Introduces Agent-Based Code Review for Claude Code](http://www.infoq.com/news/2026/04/claude-code-review/ "Anthropic Introduces Agent-Based Code Review for Claude Code")

• DevOps

• ##### [AWS Announces General Availability of DevOps Agent for Automated Incident Investigation](http://www.infoq.com/news/2026/04/aws-devops-agent-ga/ "AWS Announces General Availability of DevOps Agent for Automated Incident Investigation")

• ##### [Pulumi Adds Full Bun Runtime Support](http://www.infoq.com/news/2026/04/pulumi-bun-support/ "Pulumi Adds Full Bun Runtime Support")

• ##### [CNCF Warns Kubernetes Alone Is Not Enough to Secure LLM Workloads](http://www.infoq.com/news/2026/04/kubernetes-secure-workloads/ "CNCF Warns Kubernetes Alone Is Not Enough to Secure LLM Workloads")

**The InfoQ** Newsletter

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

• Get a quick overview of content published on a variety of innovator and early adopter technologies
• Learn what you don’t know that you don’t know
• Stay up to date with the latest information from the topics you are interested in

Enter your e-mail address

Select your country - [x] I consent to InfoQ.com handling my data as explained in this Privacy Notice.

We protect your privacy.

**May 7 | June 10, 2026 | Online** Architecture decisions are hard to validate while shipping. Join a **5-week online cohort** for **senior engineers, architects, and team leads** to pressure-test real decisions, apply practical frameworks, and work through challenges with a confidential peer group. Facilitated by Luca Mezzalira, Principal Architect at AWS, this cohort helps you: * Pressure-test real decisions. * Apply frameworks to real problems. * Publish on InfoQ.com and earn your certification. **RESERVE YOUR PLACE**

[Home](http://www.infoq.com/ "Home")[Create account](http://www.infoq.com/reginit.action "Create account")Log In[QCon Conferences](http://qconferences.com/ "QCon Conferences")Events[Write for InfoQ](http://www.infoq.com/write-for-infoq/ "Write for InfoQ")[InfoQ Editors](http://www.infoq.com/infoq-editors/ "InfoQ Editors")[About InfoQ](http://www.infoq.com/about-infoq/ "About InfoQ")[About C4Media](https://c4media.com/ "About C4Media")[Media Kit](https://get.infoq.com/infoq-mediakit/ "Media Kit")[InfoQ Developer Marketing Blog](https://devmarketing.c4media.com/?utm_source=infoq "InfoQ Developer Marketing Blog")[Diversity](https://c4media.com/diversity "Diversity")

#### Events

• ##### Online InfoQ Architect Certification

May 7, 2026

• ##### QCon AI Boston

June 1-2, 2026

• ##### Online InfoQ Architect Certification

June 10, 2026

• ##### QCon San Francisco

November 16-20, 2026

#### Follow us on

Youtube 232K FollowersLinkedin 26K FollowersRSS 19K ReadersX 57.1k FollowersFacebook 21K LikesBluesky New

#### Stay in the know

The InfoQ PodcastEngineering Culture PodcastThe Software Architects' Newsletter

General Feedback [feedback@infoq.com](mailto:feedback@infoq.com) Advertising [sales@infoq.com](mailto:sales@infoq.com) Editorial [editors@infoq.com](mailto:editors@infoq.com) Marketing [marketing@infoq.com](mailto:marketing@infoq.com)

InfoQ.com and all content copyright © 2006-2026 C4Media Inc.

Privacy Notice, Terms And Conditions, Cookie Policy

Close

[BT](http://www.infoq.com/int/bt/ "bt")