R

Razor Formatter

NewCtrl+N
Open file(s)Ctrl+O
PasteCtrl+V
DownloadCtrl+S
Download all
Compare two files
Copy link with settings
Export settings
Import settings
Import .editorconfig
Undo formatCtrl+Z
Copy formattedCtrl+Shift+C
Copy with highlighting
Format selectionCtrl+Shift+S
Find in outputCtrl+F
Go to lineCtrl+G
FormatCtrl+Enter
✓Collapse @() expressions
✓Sort directives
✓Normalise blank lines
Blank lines around tags
✓Auto-copy on format
✓Format on paste
✓Error checking
Collapse after format
✓Indent guides
Format on type
Accessibility checker
Indent: Tab●
Indent: 4 spaces
Indent: 2 spaces
Custom components...
Reset all to defaults
Diff viewCtrl+D
Word-level diff
✓Word wrap
Component report
Collapse input
Collapse output
Restore panels
Minimal mode
Larger fontCtrl+=
Smaller fontCtrl+−
Font: DM Mono
Font: Fira Code
Font: JetBrains Mono
Toggle themeCtrl+T
How it works
Features
Take the tour
Keyboard shortcuts
Load sample
My stats
💜 Say thanks
✉ Get in touch
Version
0 lines
0 changed
0 chars
Input
📄 Drop .razor files here
Output
INPUT ▸
◂ OUTPUT
How It Works

1. Pre-processing

Multi-line @() expressions are collapsed. Directives sorted by convention. Blank lines normalised.

2. Formatting

Each line classified as tag, brace, Razor block, or content. A state machine tracks quoted attributes and @() depth across multi-line tags. Indent adjusted per line type.

3. Blazor awareness

20+ built-in components registered. Self-closing vs container detected across multi-line spans. Custom components via Format menu.

4. Razor C#

Allman braces: @if/@foreach don't indent (the { handles it). else/catch stay level with preceding }.

5. Post-processing

Error detection (unclosed tags, braces), accessibility checks, fold map, and LCS diff all run in a Web Worker off the main thread.

Keyboard Shortcuts
FormatCtrl+Enter
Format selectionCtrl+Shift+S
Copy formattedCtrl+Shift+C
Open filesCtrl+O
DownloadCtrl+S
ClearCtrl+N
Diff viewCtrl+D
Find in outputCtrl+F
Go to lineCtrl+G
ThemeCtrl+T
Font largerCtrl+=
Font smallerCtrl+−
IndentTab
OutdentShift+Tab
CloseEsc
Features
✨Formatting Engine
Razor + HTML + C# — understands all three languages in one file. Tracks @() expression depth inside quoted attributes across multiple lines.
Allman braces — @if/@foreach blocks get braces on their own line. else/catch/finally stay level with the closing }.
Directive sorting — orders @page → @rendermode → @using → @inject following Microsoft's recommended convention.
Expression collapsing — multi-line @(condition ? "a" : "b") ternaries collapsed to single lines so attributes stay readable.
30+ Blazor components — knows InputText, EditForm, AuthorizeView, QuickGrid, HeadOutlet, Routes, SectionOutlet, and more. Correctly handles self-closing vs container.
Custom components — register your project's own components so they indent correctly. Saved in localStorage, survives browser restarts.Format ‣ Custom components
Format on type — see output update as you type. 800ms debounce prevents flicker. Auto-disables for files over 150k characters.Format ‣ Format on type
Format on paste — paste from VS Code, GitHub, or Slack and get clean indentation instantly. Toggle in Format menu.
Format selection — highlight a block in the input, format just that region. Useful for fixing one section without re-formatting the whole file.Ctrl+Shift+S
🔍Output & Navigation
Virtual scrolling — only ~100 DOM nodes regardless of file size. 30k-line files scroll at 60fps because we never render what you can't see.
Syntax highlighting — 10 token types: tags, components, attributes, strings, keywords, comments, Razor directives, braces, and more. Results cached per line.
Code folding — collapse any block, tag, or Razor region. Click the arrow in the gutter, or use View ‣ Collapse all to fold everything at once.
Indent guides — faint vertical lines showing nesting depth. Helps spot where a deeply nested <div> actually closes.Format ‣ Indent guides
Find in output — search formatted code, navigate between matches. The viewport jumps to each result automatically.Ctrl+F
Go to line — type a number, land there. Useful after error detection tells you which line has an issue.Ctrl+G
Bracket & tag matching — click any { or <div> to highlight its partner. The match glows for 3 seconds so you can find it.
🔄Diff & Analysis
LCS diff — uses the Myers algorithm (same as git diff). Shows real changes, not just positional shifts from re-indentation.Ctrl+D
Word-level diff — within a changed line, highlights exactly which words differ. Toggle alongside line-level diff for maximum clarity.View ‣ Word-level diff
Compare two files — drop or open two .razor files and diff them raw (no formatting applied). Useful for code review.File ‣ Compare two files
Error detection — finds unclosed HTML/Blazor tags and unmatched braces. Click any error to jump straight to the line.
Accessibility checker — catches missing alt on images, empty links, click handlers on non-interactive elements, and inputs without labels.Format ‣ Accessibility checker
Component report — lists every Blazor component in your file with usage count, self-closing vs container, and whether it's a custom registration.View ‣ Component report
📁Files & Settings
Multi-file batch — open multiple files at once. Each gets a tab. Format all, then download individually or as a batch.
Drag & drop — drop .razor, .cshtml, or .html files anywhere on the page. Works with single or multiple files.
Auto-save — your work is saved every 5 seconds to localStorage. Close the tab by accident? It's still there when you come back (up to 24 hours).
Copy with highlighting — copies syntax-highlighted HTML to your clipboard. Paste into Word, Google Docs, Notion, or Keynote with colours intact.
.editorconfig support — import your project's .editorconfig file. Reads indent_style and indent_size from [*.razor] or [*] sections.File ‣ Import .editorconfig
Theme & fonts — dark and light themes. Three monospace fonts (DM Mono, Fira Code, JetBrains Mono). Font size adjustable with Ctrl+=/Ctrl+−.
Export & share — save all settings to a file, or copy a URL that encodes your preferences. Send it to your team for consistent formatting.
🚀Performance & Privacy
Web Worker — formatting, error detection, fold mapping, and diff all run off the main thread. The UI never freezes, even on huge files.
Smart caching — won't re-format if nothing changed. Won't re-copy if the output is the same. Syntax highlighting is cached per line and only computed for visible lines.
100% client-side — your code never leaves your browser. No server, no telemetry on code content, no accounts. Works offline once loaded.
EU made & hosted — built by Tahleel Consultancy. Analytics via Plausible (cookieless, GDPR-compliant). No ads, no tracking pixels.
Custom Components

Add your Blazor component names (one per line). These will be treated as self-closing and won't trigger "unclosed" errors.

Component Report

Format code first to generate a report.

FormatCtrl+Enter
Format selectionCtrl+Shift+S
Copy formatted
Undo format
Collapse all
Expand all

The only formatter built for Razor

Every other formatter breaks your Blazor code. This one understands it.

Why Razor files are hard to format

Razor files mix three languages in one file: HTML markup, C# logic, and Blazor component syntax. Generic formatters like Prettier treat @if blocks as broken HTML. Visual Studio's built-in formatter doesn't handle multi-line tag attributes with Razor expressions like @(condition ? "value-a" : "value-b"). Razor Formatter was built from scratch to handle exactly these cases.

What it does

Paste any .razor or .cshtml file and get properly indented code in milliseconds. The formatter applies Allman-style braces for C# blocks, correctly indents nested Blazor components like EditForm, AuthorizeView, and InputSelect, sorts your @using and @inject directives by convention, and collapses multi-line Razor expressions. It knows the difference between self-closing components like InputText and container components like CascadingValue.

Built for real Blazor projects

Register your project's custom components so they're formatted correctly. Import your .editorconfig to match your team's indent style. Open multiple files at once with batch formatting. Compare two files with a proper LCS diff algorithm. Run an accessibility check to catch missing alt attributes and unlabelled inputs before they reach code review.

Private by design

Your code is processed entirely in your browser. Nothing is sent to any server, ever. The formatting engine runs in a Web Worker for performance, but it's still local JavaScript. No telemetry, no analytics on code content, no accounts required. Made and hosted in the EU by Tahleel Consultancy.

Fast enough for large files

Virtual scrolling renders only the visible lines, keeping the DOM under 100 nodes even for 30,000-line files. Syntax highlighting is cached per line with pre-compiled regex patterns. The diff engine caps at 8,000 trace steps to prevent memory issues. Smart dirty tracking means the formatter won't re-run if nothing has changed.

Free and open

Razor Formatter is free to use with no limits. No sign-up, no paywall, no ads. Format as many files as you need. Works on any device with a modern browser.

Razor Formatter supports .razor and .cshtml files for ASP.NET Core, Blazor Server, Blazor WebAssembly, and Blazor United (.NET 8+). Compatible with all modern browsers. Made by Tahleel Consultancy.