This showcase demonstrates @chenglou/pretext, a library that measures and lays out text without triggering expensive DOM reflows. Browse many real-world UI patterns across multiple categories, each with a live DevTools panel showing layout metrics in real time.
Every example ships with source code and a one-line shadcn install command, so you can drop any pattern directly into your project.
Click anywhere on the label and the input snaps to that exact size, caret lands at your click position, measured by pretext before the input mounts.
Click the label to edit
Click me to edit this labelpretext measures text width before input renders — no hidden span needed
DevTools
Interact with the demo to see metrics
npx shadcn@latest add https://upskills.dev/r/pretext-inline-text-editing.jsonEach cell''s input expands to fit content as you type. Pretext measures the text before the input renders, so there''s no initial jump.
Click a cell to edit — input resizes to fit content exactly
| Product | Qty | Price |
| Widget Pro | 12 | $24.99 |
| Gadget Lite | 3 | $9.50 |
pretext measures each cell before the input mounts — no resize jank
DevTools
Interact with the demo to see metrics
npx shadcn@latest add https://upskills.dev/r/pretext-editable-table-cells.jsonThe headline fills the full card width at the largest font size that still fits on one line. Pretext binary-searches font sizes off-DOM, no reflows.
pretext binary-searches font sizes to find the exact fit — no DOM layout required
DevTools
Interact with the demo to see metrics
npx shadcn@latest add https://upskills.dev/r/pretext-auto-fit-headline.jsonAbout the author
NAB, Lead Engineer
I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building products for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.
Upskills is where I share practical, real-world knowledge to help others build and maintain projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.
Upskills Community
Upskills
upskills.dev
Join our community on Discord to get help about the tutorials and ask your questions.
GitHub
@upskillsdev
Checkout our GitHub to find the source code and submit any issues or feature requests.
Vu Nguyen
@nphivu414
Follow me on X to get the latest updates and news about Upskills.