---
title: Biome
head:
  - tag: title
    content: Biome, toolchain of the web
template: splash
description: Format, lint, and more in a fraction of a second.
editUrl: false
next: false

banner:
    content: |
      🎉 <strong>GritQL</strong> has found a new home under the <a href="/blog/gritql-under-biome-umbrella/"><b>Biome umbrella</b></a>.

hero:
  title: One toolchain for your web project
  tagline: Format, lint, and more in a fraction of a second.
  image:
    alt: Biome, Toolchain of the web
    dark: "@/assets/svg/slogan-dark-transparent.svg"
    light: "@/assets/svg/slogan-light-transparent.svg"
  actions:
    - text: Get started
      link: /guides/getting-started/
      icon: right-arrow
      variant: primary
    - text: View on GitHub
      link: https://github.com/biomejs/biome
      icon: external
      variant: secondary
---

import { Card, CardGrid } from "@astrojs/starlight/components";
import Inputf from "@/components/formatter/input.md";
import Outputf from "@/components/formatter/output.md";
import ProgressBarContainer from "@/playground/components/Progress.tsx";
import Community from "@/components/generated/Community.astro";
import { Icon } from "@astrojs/starlight/components";
import arrow from "@/assets/svg/arrow-right.svg";
import { Image } from "astro:assets";
import "@/styles/_performance.css";
import "@/styles/_installation.css";
import "@/styles/_community.css";
import Netlify from "@/components/Netlify.astro";
import Sponsors from "@/components/Sponsors.astro";
import LinterExample from "@/components/linter/example.md";
import NumberOfRules from "@/components/generated/linter/NumberOfRules.astro";
import AwardBanner from "@/components/AwardBanner.astro"
import FeaturedUsers from "@/components/FeaturedUsers.astro"

<div class="gradient"></div>

<div class="hero-code">
    <h2 class="head">Format code like Prettier, save time</h2>

    **Biome is a [fast formatter](https://github.com/biomejs/biome/tree/main/benchmark#formatting)** for _JavaScript_,
    _TypeScript_, _JSX_, _TSX_, _JSON_, _HTML_, _CSS_ and _GraphQL_ that scores **[97% compatibility with
    _Prettier_](https://console.algora.io/challenges/prettier)**, **saving CI and developer time**.

    Biome can even **format malformed code** as you write it in [your favorite editor](/guides/editors/first-party-extensions/).

    <div class="linter format">
        <div class="inp">
            <span>CODE</span>
            <Inputf/>
        </div>
        <div class="out">
            <span>OUTPUT</span>
            <Outputf/>
        </div>
        <div class="perf-out">
            <span>PERFORMANCE</span>
            <div class="bench-comp">
                <div class="bench">
                    <div>
                        <ProgressBarContainer
                            client:visible
                            data={[
                                {duration: 0.41, label: "Biome", color: "MediumSeaGreen"},
                                {duration: 14.35, label: "Prettier", color: "IndianRed"}
                            ]}
                        />
                    </div>
                </div>
                <div class="perf-comp">
                    <div class="comp">~35x</div>
                    <div class="comp-des">
                        Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7
                        1270P.
                    </div>
                </div>
            </div>
        </div>
    </div>

    Try the Biome formatter on the [playground](/playground/) or directly on your project:

    ```shell
    npm i -D --save-exact @biomejs/biome
    npx @biomejs/biome format --write ./src
    ```
</div>


<div class="hero-code">
    <h2 class="head">Fix problems, learn best practice</h2>

    **Biome is a [performant linter](https://github.com/biomejs/biome/tree/main/benchmark#linting)** for _JavaScript_,
    _TypeScript_, _JSX_, _CSS_ and _GraphQL_ that features **[<NumberOfRules/> rules](/linter/)** from ESLint,
    TypeScript ESLint, and [other sources](/linter/rules-sources/).

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

    <LinterExample/>

    Try the Biome linter on the [playground](/playground/) or directly on your project:

    ```shell
    npm i -D --save-exact @biomejs/biome
    npx @biomejs/biome lint --write ./src
    ```

</div>


<div class="hero-code">
    <h2 class="head">Everything all at once</h2>

    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:

    ```shell
    npm i -D --save-exact @biomejs/biome
    npx @biomejs/biome check --write ./src
    ```

</div>



<div class="card-cnt">

    <CardGrid>
        <Card title="Fast" icon="rocket">
            Built with Rust and an innovative architecture inspired by rust-analyzer.
        </Card>
        <Card title="Simple" icon="pencil">
            Zero configuration needed to get started. Extensive options available for
            when you need them.
        </Card>
        <Card title="Scalable" icon="random">
            Designed to handle codebases of any size. Focus on growing product instead
            of your tools.
        </Card>
        <Card title="Actionable & Informative" icon="information">
            Avoid obscure error messages, when we tell you something is wrong, we tell
            you exactly where the problem is and how to fix it.
        </Card>
        <Card title="Batteries Included" icon="add-document">
            Out of the box support for all the language features you use today. First
            class support for TypeScript and JSX.
        </Card>
        <Card title="Enterprise Support" icon="phone">
            We offer <a href="/enterprise/">commercial support</a> to organizations that
            need it through our community of contributors.
        </Card>
    </CardGrid>
</div>
<div class="installation-body">
    <div class="installation">
        <div class="installation-left">
            <h2 class="head">Try Biome</h2>
            <div class="installation-description">
                Install Biome using your preferred package manager AND integrate it in your editor.
            </div>
            <a class="installation-biome" href="/guides/getting-started/#installation">
                Install with package manager
                <Image src={arrow} alt="arrow"/>
            </a>
            <a
                href="/guides/editors/first-party-extensions/"
                class="installation-extension"
            >
                Integrate Biome in your editor
                <Image src={arrow} alt="arrow"/>
            </a>
        </div>

        <div class="extension-img"></div>

    </div>
</div>

<AwardBanner/>

<FeaturedUsers/>

<div class="community">
    <div class="community-grid"></div>
    <h2 class="head">Community</h2>
    <div class="community-connect">
        <div class="community-description">
            Powered by our open-source contributors
        </div>
        <div class="community-links">
            <a href="https://biomejs.dev/chat" class="discord">
                <Icon name="discord"/>
                <p>Discord</p>
            </a>
            <a href="https://github.com/biomejs/biome" class="github">
                <Icon name="github"/>
                <p>GitHub</p>
            </a>
            <a href="https://bsky.app/profile/biomejs.dev" class="blueSky">
                <Icon name="blueSky" />
                <p>BlueSky</p>
            </a>
            <a href="https://fosstodon.org/@biomejs" class="mastodon">
                <Icon name="mastodon"/>
                <p>Mastodon</p>
            </a>
        </div>
    </div>
    <div class="connect">
        <Community/>
    </div>
</div>

<Sponsors title="Sponsors"/>

<Netlify/>