Browserslist Config Generator
Create .browserslistrc files for browser compatibility targeting used by Babel, Autoprefixer, and PostCSS
About this ToolHow it works, benefits & use casesTap to collapse
The Browserslist Config Generator assembles a .browserslistrc file from selectable queries — the shared target-browser config read by Babel, Autoprefixer, PostCSS, and ESLint. Instead of remembering query syntax, you build the file from a dropdown of common queries (last 2 versions, > 0.5%, not dead, last 2 Chrome versions, Firefox ESR, IE 11, last 2 iOS versions, not op_mini all, and more), adding or removing rows as needed. Four presets load curated query sets in one click: Modern targets the last two versions of Chrome, Firefox, Safari, and Edge; Legacy reaches back to IE 11 and broad market share; Production uses > 0.2%, not dead, not op_mini all; and Development targets only the latest of the major engines. Output updates live as you edit — one query per line — and downloads as .browserslistrc. Your configuration is saved in the browser, and a reference panel reminds you how the file is consumed.
How to Use
- 1Click a preset — Modern, Legacy, Production, or Development — to load a ready query set, or start from the default.
- 2Use "Add query" to append a row, then pick a query from the dropdown of common Browserslist queries.
- 3Remove any query with its trash button; the live output updates as soon as one valid query exists.
- 4Copy the generated .browserslistrc or download it to your project root.
- 5Optionally add a "browserslist" key to package.json instead, then verify with npx browserslist.
Key Benefits
- Builds .browserslistrc from a curated dropdown of common queries — no syntax to memorize
- Four one-click presets: Modern, Legacy, Production, and Development
- Live output that updates one-query-per-line as you add or remove rows
- Produces config consumed by Babel, Autoprefixer, PostCSS, and ESLint
- Add or remove individual queries to fine-tune your target set
- Downloads directly as .browserslistrc and configuration persists in the browser
- Reset button and a reference panel explaining how the file is used
Common Use Cases
- Standardizing target browsers across a project's build toolchain
- Loosening targets to support legacy browsers including IE 11
- Tightening a production config to drop dead and Opera Mini browsers
- Using a lean development target for faster local builds
- Generating the shared config that Autoprefixer uses to add CSS prefixes
Presets
Browser queries
Updates live as you edit — save as .browserslistrc in your project root
last 2 versions not dead
What is Browserslist?
- Used by Babel, Autoprefixer, PostCSS, and ESLint to determine target browsers
- Save as
.browserslistrcin project root, or add a"browserslist"key topackage.json - Tools will automatically pick up the configuration
- Use
npx browserslistto see which browsers match your queries
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related guide
Related tools
- Package.json GeneratorBuild a complete package.json with framework presets, scripts, deps, exports map, engines, and live validation
- Next.js Config BuilderBuild next.config.js interactively with common configurations
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- TOML to JSONConvert TOML to JSON format
- User Agent ParserParse and analyze user agent strings
- Chrome Extension Manifest GeneratorBuild a valid manifest.json (V3 or V2) with a permission picker, a live install-warning preview that mirrors Chrome’s consent dialog, validation, and a runnable starter-project ZIP
Browserslist is the shared target-browser source used by Babel, Autoprefixer, PostCSS, and ESLint, among others. They automatically pick up a .browserslistrc in your project root (or a "browserslist" key in package.json) to decide which transforms, prefixes, and lint rules apply.
Modern targets the last 2 versions of Chrome, Firefox, Safari, and Edge. Legacy uses > 0.5%, last 2 versions, Firefox ESR, not dead, and IE 11. Production uses > 0.2%, not dead, not op_mini all. Development targets only the last 1 version of Chrome, Firefox, and Safari for fast builds.