Prettier Config

Prettier Config

About Us

About Prettier Config

A free, open-source tool built to help developers configure Prettier without the hassle of reading documentation for every single option.

What is this tool?

Prettier Config Generator is an interactive web application that makes configuring Prettier effortless. Instead of manually writing JSON and looking up every option in the documentation, you can visually toggle and adjust every Prettier setting, format real code against your config in 16 languages, and share the result with a single link. It was built for developers who want to spend time writing code, not configuring tools.

Features

Round-Trip Your Existing Config

Paste an existing .prettierrc, prettier.config.js, or the prettier key from package.json — the form populates to match. Tweak, share, or copy out, all keys preserved.

Every Prettier Version

Pick any Prettier 3.x release (3.0 – 3.6 and latest). The exact options for that version load on demand from jsDelivr.

All Languages, Both Tabs

Preview ships a purpose-built sample per parser (TS, CSS, HTML, JSON/JSON5/JSONC, Markdown, YAML, Vue, GraphQL, and more) so every Prettier option has somewhere to show its effect. Your Code auto-detects the parser from your paste, with manual override.

Real Code Editor

CodeMirror 6 powers the input panel with syntax highlighting, line numbers, tab indent, and a theme that follows light/dark mode.

Shareable Configurations

Click Share and your version, options, code, and parser are packed into the URL hash. Send it anywhere; everything stays in the browser.

GitHub-Style Diff

See exactly what Prettier changes with a unified or split diff, plus a +X / −Y summary header just like a pull request.

AI Token Counter

Live token count for the input and output across GPT-4o, GPT-4, GPT-3.5, Claude, Gemini, Llama 3, and Mistral — handy for AI-pipeline cost estimates.

Surfaced Parse Errors

When Prettier rejects your input, the exact SyntaxError and its line:column appear above the diff instead of being silently swallowed.

Persistent Selections

Your Prettier version and option picks are saved to localStorage, so a refresh — or coming back tomorrow — keeps everything intact.

20 Languages

Fully localised across English, Thai, Chinese, Spanish, Hindi, German, French, Portuguese, Japanese, Korean, Russian, Vietnamese, Indonesian, Italian, Polish, Turkish, Ukrainian, Bengali, plus Arabic and Persian (RTL).

Built With

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uinext-intlCodeMirror 6prettier/standalone (CDN)lz-string

Open Source

This tool is completely free and open source. Contributions, bug reports, and suggestions are always welcome.

View on GitHub

Creator

Built by

NooobtimeX

Built with care for the developer community. If you find this tool useful, consider starring the repository on GitHub.