Claude Code RTL (Arabic)

English | العربية

Makes the Claude Code for VS Code chat render Arabic text right-to-left — both the conversation and what you type. English stays left-to-right. Code blocks, tool calls and thinking blocks always stay left-to-right — even when their content is Arabic.

Commands

Open the Command Palette (Cmd/Ctrl+Shift+P):

• Claude Code RTL (Arabic): Enable RTL
• Claude Code RTL (Arabic): Disable RTL

After enabling or disabling, choose Reload when prompted so the change takes effect.

How it works

VS Code isolates each extension's webview, so there is no API for one extension to style another's chat UI. This extension therefore appends a small, marked, auditable block to Claude Code's own webview assets on disk (webview/index.css and webview/index.js):

• A CSS block forces code / tool / thinking subtrees to stay LTR.
• A tiny script sets dir="rtl" on each message block whose first word is Arabic (a debounced MutationObserver keeps up with streaming). Detection targets the Arabic Unicode block, so Hebrew stays LTR.
• The composer input flips too: your Arabic text right-aligns as you type — both the caret and the visible text — while English stays left.

Direction is decided per paragraph, so a message mixing Arabic and English paragraphs renders each side correctly.

Auto re-apply on update

A Claude Code update replaces its files and wipes the patch. This extension watches for extension changes and re-applies the patch silently on the next startup or update, then offers a Reload prompt.

Limitations

• Arabic and Persian share the same script, so pure Persian text may also render RTL. This is an accepted, unavoidable limitation for Arabic users. Hebrew is cleanly excluded.
• This modifies another extension's installed files. That is the only way to reach its webview. The patch is marker-delimited and fully removed by Disable RTL.

Develop

npm install
npm run build        # or: npm run watch
npm run typecheck

Press F5 to launch an Extension Development Host with the real Claude Code extension installed, then run Enable RTL.

Build outputs:

• dist/extension.js — the extension (Node).
• dist/rtl.runtime.js — the compiled webview payload (browser IIFE).
• dist/rtl.css — the CSS payload.

Contributing

Contributions are welcome. Fork the repo and open a pull request — every PR requires the maintainer's review and approval before it can be merged into main.

License

MIT © Mohamed Masoud. Free to use, modify and distribute.

npm install
npm run build        # or: npm run watch
npm run typecheck