Source code
318 chars | 12 lines. Limit: 64 KB and 5,000 lines.
Paste TypeScript, JSON or Markdown, adjust a small Prettier config and see the formatted output plus a readable diff without sending source code to a backend.
Prettier removes many style debates, but teams still need to see how options such as printWidth, semi, trailingComma, proseWrap and arrowParens change real files. This playground focuses on the config review moment: one sample, one config, one formatted result and the smallest diff needed to understand the effect.
Formatting runs in a dedicated browser worker. The MVP rejects large inputs before the worker starts, terminates the worker on timeout and does not send pasted code or config to a backend service.
Choose a preset, edit the source and config JSON, then run Prettier standalone in a browser worker.
Shows semicolons, trailing commas, arrow parens and object wrapping on a typed export.
318 chars | 12 lines. Limit: 64 KB and 5,000 lines.
Supported MVP options include printWidth, tabWidth, useTabs, semi, singleQuote, trailingComma, bracketSpacing, arrowParens and proseWrap.
Run formatting to see the formatted output, diff and config warnings.
The TypeScript preset shows the options most teams debate during code review: semicolons, trailing commas, arrow parens, print width and quote style.
The JSON preset keeps the parser strict and makes it easy to see how compact payloads become readable config or API examples.
The Markdown preset demonstrates proseWrap and list spacing, which matter when docs, changelogs and README files are formatted by CI.
Prettier is the formatter: it decides layout, whitespace, wrapping and a narrow set of style choices. ESLint is the code-quality layer: it catches unsafe patterns, unused values and project-specific rules. A healthy setup keeps Prettier focused on deterministic formatting and avoids duplicating the same rule in a linter, editor and CI script.
Parser choice matters. TypeScript, JSON and Markdown use different Prettier plugins, so a config that makes sense for proseWrap may not affect JSON at all. The playground also warns when config JSON contains unsupported or unknown options, because public MVP scope should be predictable instead of pretending every plugin ecosystem option is loaded.
No. The MVP formats in a browser worker and rejects large inputs before the worker starts.
No. The public playground supports the built-in TypeScript, JSON and Markdown parser matrix only.
The route keeps parser selection visible so the user can compare TypeScript, JSON and Markdown behavior without hiding it inside pasted config.
Treat them as a review signal. Some options are outside the MVP and some are typos that would make a real project config confusing.
No. Use it to inspect examples and then put the final config under version control with normal CI checks.
The diff makes config impact visible. It is easier to review a style decision when the changed lines are isolated.