Pretext.js

Pretext.js - DOMに触れず高速テキスト測定 | Pure JS

はじめに

Pretext.jsは純粋JSでDOM読み込みゼロのテキスト測定エンジン。prepare()でCanvas測定、layout()で純粋算術レイアウト。多言語対応、TypeScriptネイティブ。仮想スクロール・AIチャットに最適、14k+ GitHubスター。


更新日:

2026年4月7日

月間訪問者数:

SimilarWeb Icon
--

アフィリエイト・プログラム:

Yes

Pretext.js's 概要

Pretext.js is a pure JavaScript and TypeScript-first library for fast text measurement and layout without touching the DOM. It eliminates forced synchronous reflows by using Canvas for one-time glyph measurements via prepare(), followed by instant pure arithmetic layouts with layout(). Achieving ~2ms for 1,000 blocks, it supports 12+ writing systems including CJK, Arabic, Hebrew, Thai, Hindi, and Korean. Zero runtime dependencies, real font metrics, reusable handles for multiple widths. Perfect for virtual scrolling, AI chat bubbles, multilingual feeds, and performance-critical text-heavy UIs. 14k+ GitHub stars.


Pretext.js's 特徴

  • Zero DOM reads after prepare()

  • Real font metrics via Canvas measureText()

  • Multilingual support for 12+ writing systems

  • TypeScript-first with full types

  • Reusable prepared handles for multiple container widths

  • Zero runtime dependencies

  • Pure arithmetic layout for instant results

  • Accurate line breaking and bidirectional text


Pretext.js's Q&A


Pretext.js's 長所と短所

長所

  • Blazing fast: 500x faster than DOM reflows, ~2ms for 1000 blocks
  • Accurate real browser font metrics
  • Production-ready multilingual support
  • Zero dependencies, small bundle size
  • Excellent TypeScript integration

短所

  • Requires initial Canvas-based prepare() call
  • Focused on height/lineCount, not full DOM positioning
  • Dependent on browser Canvas API availability
  • Learning curve for prepare/layout workflow
  • Limited to text measurement, not styling or rendering

Pretext.js's 使用例

  • Variable-height virtual scrolling for 10,000+ items
  • Pre-computing heights for AI chat bubbles in streaming responses
  • Multilingual content feeds mixing scripts like Chinese, Arabic, Korean
  • Performance-critical text-heavy UIs like code editors or social feeds

Pretext.js's ターゲット・オーディエンス

  • Frontend developers optimizing performance
  • React and framework-agnostic UI builders
  • i18n and multilingual app developers
  • Virtual list and infinite scroll implementers
  • AI chat interface creators

Pretext.js's 価格

Free open-source library published on npm with zero runtime dependencies. No paid tiers or subscriptions mentioned.

Pretext.js's アナリティクス

ウェブサイト概要

主なパフォーマンス指標 pretextjs.dev

直帰率

0.00%

ページ / 訪問

0.00

総訪問者数

0

現地滞在時間

0m 0s

グローバルランク

#0

国別ランク

#0

トップ

国別トラフィック分布

No data available.

    総来場者数

    過去3ヶ月の月間ビジター統計

    トレンドダウン by 0.0% 今月
    December - February 2026

    トラフィック・ソース

    トラフィック・ソースの分布

    Social:
    0.0%
    Paid Referrals:
    0.0%
    Mail:
    0.0%
    Referrals:
    0.0%
    Search:
    0.0%
    Direct:
    0.0%
    支配的なソース: Social
    0.0% 全トラフィックの

    Pretext.js's 代替案