Prettier Playground

Format JavaScript, TypeScript, HTML, CSS, Markdown, and JSON with real Prettier — no install required.

Prettier Playground

Client-side

About this tool

The Prettier Playground runs the actual Prettier formatter — the same tool used in millions of production codebases — entirely in your browser, using Prettier's standalone build. Pick a parser (JavaScript/JSX via babel, TypeScript/TSX, HTML, CSS, Markdown, or JSON), paste your code, and click Run to get back consistently formatted output.

Unlike a regex-based "beautifier," Prettier fully parses your code into an AST and re-prints it using an opinionated set of formatting rules, which is why its output is deterministic and matches what your team's CI would produce with the same Prettier version and options. You can adjust print width (80 or 120 columns), tab width (2 or 4 spaces), single vs. double quotes, semicolons on/off, and trailing comma style (none, es5, or all) to match your project's .prettierrc.

Formatting is not live-as-you-type — it runs on demand via the Run button, since Prettier's parser plugins are fetched lazily on first use (you'll see a "Loading Prettier…" state briefly on the first run in a session). This keeps the tool's initial page weight minimal while still giving you full-fidelity formatting. If your code has a syntax error, Prettier reports the exact problem including line and column, the same diagnostic it would show in an editor integration. Nothing is uploaded — formatting happens entirely client-side.

FAQ

Is this the real Prettier, or a reimplementation?

It is the actual Prettier package (the "standalone" browser build) running its real parser and printer plugins in your browser via JavaScript. Output matches what you would get from running prettier locally with the same version and options.

Why is there a "Loading Prettier…" delay on first run?

Prettier's parser plugins are fairly large and are only fetched when you first click Run, rather than being bundled into the page upfront. Subsequent runs in the same session are instant since the plugin is cached.

Why does my TypeScript need the estree plugin too?

In Prettier v3, the typescript and babel parsers produce an AST that the estree printer plugin knows how to print. Both plugins are loaded together automatically whenever you pick the TypeScript or JavaScript parser.

Can I format JSON with comments (JSONC)?

The JSON parser here uses Prettier's standard JSON mode, which does not support comments. For JSON5 or JSONC-style comments, strip them first or use the babel parser, which is more permissive.

Does this tool send my code anywhere?

No. Formatting runs entirely in your browser using Prettier's JavaScript build. No code is uploaded to any server.