Run Prettier in the browser with full config options for JS, TS, CSS, HTML, JSON, and Markdown.
This playground runs Prettier in the browser: paste JavaScript, TypeScript, CSS, HTML, JSON or Markdown, and the code is reformatted under Prettier's rules with the full option set - printWidth, quotes, semicolons, trailing commas, indentation and more - exposed as controls. Formatting works by parsing the input into a syntax tree and reprinting it, not by patching lines, so two things surprise first-time users: syntactically invalid input yields an error rather than a partial cleanup, and output can differ from a local run when the bundled Prettier version's defaults differ from the one on your machine.
A concrete input and expected output from the current implementation.
Input
const config={host:"localhost",port:3000,retries:5,timeout:10000,verbose:false}; Expected output
const config = {
host: "localhost",
port: 3000,
retries: 5,
timeout: 10000,
verbose: false,
}; The single-line object is 94 characters, past the default print width of 80, so the literal reprints with one property per line at two-space indent. The rest is defaults: double quotes, a space inside the braces, and a trailing comma, which both the "es5" default (Prettier 2) and "all" default (Prettier 3) add to object literals.
Prettier does no find-and-replace patching. The input is parsed with a language-specific parser into an abstract syntax tree, and the tree is printed back out under Prettier's layout rules. That design is why output is deterministic - identical input and options always yield identical bytes - and why a single syntax error rejects the whole input instead of producing partial cleanup.
Every control on the page feeds the reprint step, never the parse: printWidth sets the wrap column, tabWidth and useTabs set indentation, and semi, singleQuote, trailingComma, arrowParens and bracketSpacing change punctuation and layout. proseWrap and htmlWhitespaceSensitivity govern Markdown and HTML. Because the same engine powers the CLI, output here should match a local npx prettier run given matching options and version.
Prettier itself ships parsers for YAML, GraphQL and Vue and Angular templates, but this page lists JS, TS, CSS, HTML, JSON and Markdown only. If the language is absent from the page, the tool will not format it; the official playground at prettier.io/playground covers more languages and their options.
printWidth is a target, not a hard limit. A string, URL, comment or identifier cannot be split at a character boundary, so a line with no legal break point stays long. Long string literals are the usual culprit - split them with concatenation or template literals if wrapping matters to you.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.