Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UI Strings Scanner

npm version npm downloads node version license

UI Strings Scanner

UI Strings Scanner lists every string that could reach the user in a React (JSX/TSX) codebase. It parses the AST with ts-morph instead of running the code, so one command covers any React project without a build step or a dev server. Detection relies on JSX semantics, so the scanner is React-only.

Use it to audit hardcoded copy, review tone and wording, catch untranslated strings, or take stock before adopting i18n. The scanner inventories strings and leaves translation-key management to your i18n tooling.

HTML report: every UI string grouped by route, with search, surface filters, and stats

The HTML report for shadcn/ui: 27,000+ strings from 3,550 files, grouped by route and laid out like the page.

Quick Start

Run it at the root of your React project:

npx ui-strings scan
Scanning: /path/to/my-app/src/**/*.{ts,tsx,js,jsx}

214 strings (+18 internal) / 52 files scanned
  visible      163
  interactive  31
  internal     18
  a11y         14
  meta         6

→ /path/to/my-app/ui-strings-report/ui-strings.json
→ /path/to/my-app/ui-strings-report/ui-strings.md
→ /path/to/my-app/ui-strings-report/ui-strings.html

Review copy, then fix it with your AI agent

The HTML report doubles as a copy-review tool. Spot a string that needs work, click ✎, and type the new copy. The report shows old → new and keeps your edits across reloads.

Inline editing in the report: the old string is struck through, the replacement shown next to it, with an edits bar at the bottom

Once your pass is done, Copy fix prompt turns every edit into one prompt with file:line locations. Paste it into Claude Code, Cursor, Codex, or any coding agent, and the agent rewrites the exact literals you marked.

Fix Prompt modal: a generated prompt listing each edit as file path, line number, current text, and replacement text

Table view shows one row per string with surface, kind, context, and location columns. Rows copy out as TSV for spreadsheet work.

Table view: one row per string with surface, kind, context, and file:line location columns

Features

  • Sentence-level extraction - <p>Hello <b>world</b>,<br />welcome</p> comes out as one string. Embedded expressions become {count} placeholders.
  • Condition tracking - Strings inside cond ? A : B or cond && X carry their condition, so you know when they show.
  • Symbol resolution - An option array rendered with .map() links back to its declaration, across import chains and @/ aliases.
  • Surface classification - Every string carries a tag for how it reaches the user: visible (rendered as-is), interactive (toasts, validation, API messages), a11y (aria-*, alt, title), meta (Next.js metadata), or internal (console/throw).
  • Noise filtering - Class names, import paths, and directives never make the list. Detection combines a string's position (attribute, object key, call argument) with its shape, and treats non-Latin text as copy in any position, so mixed-language projects work.
  • Next.js aware - Entries group by App Router route, and metadata lands under meta.
  • Fix prompts - Edit strings in the HTML viewer, then copy all edits as a ready-to-run prompt for an AI coding agent.

Usage

npx ui-strings scan [projectDir] [options]

projectDir defaults to the current directory.

Option Default Description
--src <glob> src/**/*.{ts,tsx,js,jsx} files to scan (relative to projectDir)
--exclude <globs> none extra exclude globs, comma-separated (*.test.* / *.spec.* / __tests__ / __mocks__ are always excluded)
--out <dir> ./ui-strings-report output directory
--format <list> json,md,html output formats
--include-internal off include console/throw strings in the Markdown listing
--open off open the HTML report in a browser

The scanner reads the target project's tsconfig.json when present and resolves path aliases such as @/* through it.

Output

  • ui-strings.json - every entry with text, file, line, kind, surface, and condition
  • ui-strings.md - counts by surface, kind, and group, plus the full listing
  • ui-strings.html - single-file viewer with search, filters, TSV row copy, and inline editing

Limitations

Strings built at runtime, such as API responses and computed values, stay invisible to static analysis. The scanner records copy passed across components at its declaration and resolves render sites only for the array .map() pattern. Unknown copy attributes fall back to lexical detection.

Development

The published CLI runs on Node. Development uses Bun.

bun install
bun test
bun run typecheck
bun run build   # bundle dist/cli.js

To try a local build in another React project without publishing:

bun run build
npm link
# In another React project
ui-strings scan

Contributing

Issues and pull requests are welcome.

License

MIT

Author

Junsei Nagao https://github.com/junseinagao

About

CLI that extracts every user-facing string from React (JSX/TSX) code via static AST analysis and writes JSON, Markdown, and HTML reports.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages