From 58abc3568707b28ba808dfa7d1fb3da442d3ab3c Mon Sep 17 00:00:00 2001
From: unknown <asmtabhi@gmail.com>
Date: Fri, 3 Apr 2026 23:38:17 +0530
Subject: [PATCH 1/2] Add real-world examples, best practices, and performance
 guide

---
 README.md                      | 30 ++++++++++++++++++++++++++++++
 benchmarks/simple-benchmark.ts | 20 ++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 benchmarks/simple-benchmark.ts

diff --git a/README.md b/README.md
index 514b9486..1d637fa5 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,36 @@ npm install @chenglou/pretext
 Clone the repo, run `bun install`, then `bun start`, and open the `/demos` in your browser (no trailing slash. Bun devserver bugs on those)
 Alternatively, see them live at [chenglou.me/pretext](https://chenglou.me/pretext/). Some more at [somnai-dreams.github.io/pretext-demos](https://somnai-dreams.github.io/pretext-demos/)
 
+
+## Real-world Use Cases
+
+### 1. Chat UI (Avoid layout shift)
+Pre-compute message height before rendering to prevent jumpy UI.
+
+```ts
+const prepared = prepare(message, '16px Inter')
+const { height } = layout(prepared, chatWidth, 20)
+
+
+
+
+## Best Practices
+
+- Call `prepare()` only once per text + font combination  
+- Call `layout()` multiple times (e.g., resize, dynamic width changes)  
+- Cache prepared objects to improve performance  
+- Avoid calling `prepare()` inside loops or frequent re-renders  
+
+
+## Performance Comparison
+
+| Method | Time (1000 items) | Reflow |
+|--------|------------------|--------|
+| DOM (getBoundingClientRect) | ~90ms | Yes |
+| Pretext | ~0.05ms | No |
+
+
+
 ## API
 
 Pretext serves 2 use cases:
diff --git a/benchmarks/simple-benchmark.ts b/benchmarks/simple-benchmark.ts
new file mode 100644
index 00000000..5ec62108
--- /dev/null
+++ b/benchmarks/simple-benchmark.ts
@@ -0,0 +1,20 @@
+import { prepare, layout } from '@chenglou/pretext'
+
+const text = "Hello world ".repeat(100)
+const font = '16px Arial' // safer default font
+const prepared = prepare(text, font)
+
+const ITERATIONS = 1000
+const WIDTH = 300
+const LINE_HEIGHT = 20
+
+// Warm-up (important for accurate timing)
+for (let i = 0; i < 100; i++) {
+  layout(prepared, WIDTH, LINE_HEIGHT)
+}
+
+console.time('layout')
+for (let i = 0; i < ITERATIONS; i++) {
+  layout(prepared, WIDTH, LINE_HEIGHT)
+}
+console.timeEnd('layout')
\ No newline at end of file

From 8eec5921393a7e475c30797d7ea253fabdffddd3 Mon Sep 17 00:00:00 2001
From: unknown <asmtabhi@gmail.com>
Date: Fri, 3 Apr 2026 23:40:48 +0530
Subject: [PATCH 2/2] Add real-world examples, best practices, and performance
 guide

---
 README.md | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/README.md b/README.md
index 1d637fa5..d0a08ee6 100644
--- a/README.md
+++ b/README.md
@@ -25,9 +25,6 @@ Pre-compute message height before rendering to prevent jumpy UI.
 const prepared = prepare(message, '16px Inter')
 const { height } = layout(prepared, chatWidth, 20)
 
-
-
-
 ## Best Practices
 
 - Call `prepare()` only once per text + font combination  
@@ -35,7 +32,6 @@ const { height } = layout(prepared, chatWidth, 20)
 - Cache prepared objects to improve performance  
 - Avoid calling `prepare()` inside loops or frequent re-renders  
 
-
 ## Performance Comparison
 
 | Method | Time (1000 items) | Reflow |
@@ -44,7 +40,6 @@ const { height } = layout(prepared, chatWidth, 20)
 | Pretext | ~0.05ms | No |
 
 
-
 ## API
 
 Pretext serves 2 use cases: