Skip to content
Biome, Toolchain of the web Biome, Toolchain of the web

One toolchain for your web project

Format, lint, and more in a fraction of a second.

Format code like Prettier, save time

Biome is a fast formatter for JavaScript, TypeScript, JSX, TSX, JSON, CSS and GraphQL that scores 97% compatibility with Prettier, saving CI and developer time.

Biome can even format malformed code as you write it in your favorite editor.

CODE
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
if(!greeting){return null};
// TODO: Don't use random in render
let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")
return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
<strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
{greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
<em>
{ greeted }
</em>
{ (silent)
? "."
: "!"}
</div>;
}
OUTPUT
function HelloWorld({
greeting = "hello",
greeted = '"World"',
silent = false,
onMouseOver,
}) {
if (!greeting) {
return null;
}
// TODO: Don't use random in render
let num = Math.floor(Math.random() * 1E+7)
.toString()
.replace(/.d+/gi, "");
return (
<div
className="HelloWorld"
title={`You are visitor number ${num}`}
onMouseOver={onMouseOver}
>
<strong>
{greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
</strong>
{greeting.endsWith(",") ? (
" "
) : (
<span style={{ color: "grey" }}>", "</span>
)}
<em>{greeted}</em>
{silent ? "." : "!"}
</div>
);
}
PERFORMANCE
Biome
0.00s
Prettier
0.00s
~35x

Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7 1270P.

Try the Biome formatter on the playground or directly on your project:

Terminal window
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src

Fix problems, learn best practice

Biome is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features 300 rules from ESLint, TypeScript ESLint, and other sources.

Biome outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer!

complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   The call chain .map().flat() can be replaced with a single .flatMap() call.

    1 │ const array = ["split", "the text", "into words"];
  > 2 │ array.map(sentence => sentence.split(' ')).flat();
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 

   Safe fix: Replace the chain with .flatMap().

    1 1  const array = ["split", "the text", "into words"];
    2  - array.map(sentence·=>·sentence.split('·')).flat();
      2+ array.flatMap(sentence·=>·sentence.split('·'));
    3 3  

Try the Biome linter on the playground or directly on your project:

Terminal window
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome lint --write ./src

Everything all at once

Not only can you format and lint your code separately, you can do it all at once with a single command!

Every tool integrates seamlessly with others to create a cohesive toolchain for web projects.

Run all tools with the check command:

Terminal window
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src

Fast

Built with Rust and an innovative architecture inspired by rust-analyzer.

Simple

Zero configuration needed to get started. Extensive options available for when you need them.

Scalable

Designed to handle codebases of any size. Focus on growing product instead of your tools.

Optimized

With tight internal integration we are able to reuse previous work and any improvement to one tool improves them all.

Actionable & Informative

Avoid obscure error messages, when we tell you something is wrong, we tell you exactly where the problem is and how to fix it.

Batteries Included

Out of the box support for all the language features you use today. First class support for TypeScript and JSX.

Try Biome

Install Biome using your preferred package manager AND integrate it in your editor.

Install with package manager

arrow

Integrate Biome in your editor

arrow

Community

Powered by our open-source contributors

User ematipico User sebmck User Conaclos User MichaReiser User leops
User denbezrukov User xunilrj User Sec-ant User yassere
User dyc3 User arendjr User IWANABETHATGUY User diokey User yeonjuan User EduardoLopes
User unvalley User ooflorent User faultyserver User nissy-dev User jer3m01
User togami2864 User bitpshr User nhedger
User macovedj User vohoanglong0107 User ah-yu User vasucp1207 User chansuke
User fireairforce User victor-teles User Boshen User Kelbie

Sponsors