About Code Formatter

The Code Formatter is powered by Prettier — the most widely adopted opinionated code formatter in the JavaScript ecosystem. It supports JavaScript, JSX, TypeScript, TSX, CSS, SCSS, HTML, JSON, Markdown, and GraphQL, all configurable with options like tab width, semicolons, single quotes, and trailing commas to match any project's style guide.

Prettier is loaded on demand directly from a CDN in your browser — your source code is never sent to a server. This makes it safe to format proprietary business logic, internal API schemas, or unreleased code without any data leaving your device.

Common Use Cases

Quickly formatting a JavaScript or TypeScript snippet copied from a bug report or Stack Overflow before adding it to a codebase.
Reformatting a minified or obfuscated JSON response from an API so it is human-readable.
Checking how Prettier would format code before enforcing a .prettierrc config in CI.
Normalizing a GraphQL schema pasted from documentation into properly indented SDL syntax.

How to Use

Select the language of your code from the Language dropdown (JavaScript, TypeScript, CSS, HTML, JSON, etc.).
Adjust formatting options — tab width, semicolons, single quotes, trailing commas — to match your style guide.
Paste your code into the Input panel, then click "Format (Prettier)" to run the formatter.
Review the formatted output and click "Copy" to paste it back into your editor.

Frequently Asked Questions

Why does Prettier take a moment to load on first use?

Prettier and its language plugins are loaded on demand from a CDN when you first click "Format". This keeps the page fast for users who never need formatting, and the assets are then cached in your browser so subsequent uses are instant. A status badge in the toolbar shows when Prettier is ready.

How do I match my project's .prettierrc settings?

Use the options panel above the editor — set Tab width (2 or 4), toggle "Use tabs" for tab-based indentation, toggle Semicolons, Single quotes, and Trailing commas to replicate your .prettierrc values. The formatter will produce output identical to running the Prettier CLI with the same options.

Can I format JSX and TSX files?

Yes. Select "JSX" in the language dropdown to format React JSX code using Prettier's Babel parser, or select "TSX" to use the TypeScript parser with JSX support. Both modes correctly handle JSX self-closing tags, attribute indentation, and embedded expressions.