> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/serenityOS/serenity/llms.txt
> Use this file to discover all available pages before exploring further.

# SerenityOS Documentation

> A graphical Unix-like operating system built from scratch

<div className="relative overflow-hidden dark:bg-[#0f1117] bg-white">
  <div className="absolute inset-0 dark:bg-gradient-to-br dark:from-[#cd2213]/10 dark:via-transparent dark:to-[#6c1e18]/5 bg-gradient-to-br from-[#cd2213]/5 via-transparent to-transparent" />

  <div className="relative py-20 px-4 sm:px-6 lg:px-8">
    <div className="max-w-7xl mx-auto">
      <div className="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
        <div className="lg:col-span-7">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold dark:text-white text-gray-900 mb-6">
            SerenityOS Documentation
          </h1>

          <p className="text-lg sm:text-xl dark:text-gray-300 text-gray-600 mb-8 max-w-2xl">
            A love letter to '90s user interfaces with a custom Unix-like core. Built from scratch with sincerity, accountability, and fun.
          </p>

          <div className="flex flex-wrap gap-4">
            <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg text-white font-semibold transition-all duration-200 shadow-lg hover:shadow-xl" style={{ backgroundColor: '#cd2213' }}>
              Get Started

              <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>

            <a href="/architecture/overview" className="inline-flex items-center px-6 py-3 rounded-lg font-semibold transition-all duration-200 dark:border-white/30 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 border-gray-300 bg-gray-100 text-gray-900 hover:bg-gray-200 border">
              Explore Architecture
            </a>
          </div>
        </div>

        <div className="hidden lg:block lg:col-span-5 mt-10 lg:mt-0">
          <div className="relative">
            <img src="https://media.brand.dev/3006f941-d3d9-4c87-bb6f-ec29c8fc7c9a.png" alt="SerenityOS Logo" noZoom className="w-full h-auto max-w-md mx-auto" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold dark:text-white text-gray-900 mb-4">Quick start</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Get SerenityOS running on your machine in a few steps</p>

  <Steps>
    <Step title="Clone the repository">
      Clone the SerenityOS repository from GitHub to your local machine.

      ```bash theme={null}
      git clone https://github.com/SerenityOS/serenity.git
      cd serenity
      ```
    </Step>

    <Step title="Install dependencies">
      Install the required build dependencies for your platform. SerenityOS supports Linux, macOS, and Windows (with WSL2).

      <Tabs>
        <Tab title="Ubuntu/Debian">
          ```bash theme={null}
          sudo apt install build-essential cmake curl libmpfr-dev libmpc-dev libgmp-dev e2fsprogs ninja-build qemu-system-x86 qemu-utils ccache rsync unzip texinfo libssl-dev
          ```
        </Tab>

        <Tab title="macOS">
          ```bash theme={null}
          brew install coreutils e2fsprogs qemu bash gcc@13 imagemagick ninja cmake ccache rsync
          ```
        </Tab>

        <Tab title="Windows (WSL2)">
          ```bash theme={null}
          sudo apt install build-essential cmake curl libmpfr-dev libmpc-dev libgmp-dev e2fsprogs ninja-build qemu-system-x86 qemu-utils ccache rsync unzip texinfo
          ```
        </Tab>
      </Tabs>
    </Step>

    <Step title="Build the toolchain">
      Build the cross-compilation toolchain. This step takes 30-60 minutes depending on your hardware.

      ```bash theme={null}
      Meta/serenity.sh rebuild-toolchain
      ```

      <Note>The toolchain only needs to be built once and can be reused for subsequent builds.</Note>
    </Step>

    <Step title="Build and run SerenityOS">
      Build the operating system and launch it in QEMU.

      ```bash theme={null}
      Meta/serenity.sh run
      ```

      <Info>SerenityOS will boot in a QEMU window with hardware or software virtualization enabled as supported.</Info>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold dark:text-white text-gray-900 mb-4">Explore by topic</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">Dive into different aspects of SerenityOS</p>

  <CardGroup cols={3}>
    <Card title="Architecture" icon="sitemap" href="/architecture/overview">
      Learn about the system architecture, kernel design, and userland components.
    </Card>

    <Card title="Kernel Development" icon="microchip" href="/kernel/introduction">
      Explore the 64-bit kernel with pre-emptive multi-threading and modern features.
    </Card>

    <Card title="Browser Engine" icon="browser" href="/features/browser">
      Discover LibWeb, the custom browser engine with JavaScript and WebAssembly support.
    </Card>

    <Card title="Developer Tools" icon="wrench" href="/tools/ide-setup">
      Set up your development environment with IDE configuration and debugging tools.
    </Card>

    <Card title="System Libraries" icon="book-open" href="/api/ak">
      Reference documentation for AK, LibC, LibCore, LibGUI, and other system libraries.
    </Card>

    <Card title="Contributing" icon="code-pull-request" href="/development/contributing">
      Join the community and learn how to contribute to SerenityOS.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold dark:text-white text-gray-900 mb-4">Key features</h2>
  <p className="text-base dark:text-gray-400 text-gray-600 mb-8">What makes SerenityOS unique</p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 dark:border-[#27272a] border-gray-200 border">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <div className="flex items-center justify-center h-12 w-12 rounded-lg" style={{ backgroundColor: '#cd2213' }}>
            <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900 mb-2">Security-focused</h3>

          <p className="dark:text-gray-400 text-gray-600 text-sm">
            Hardware protections, pledge & unveil syscalls, KASLR, W^X memory, and web-content isolation.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 dark:border-[#27272a] border-gray-200 border">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <div className="flex items-center justify-center h-12 w-12 rounded-lg" style={{ backgroundColor: '#cd2213' }}>
            <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
          </div>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900 mb-2">Built from scratch</h3>

          <p className="dark:text-gray-400 text-gray-600 text-sm">
            Custom kernel, LibC, GUI toolkit, browser engine, and all applications—no external dependencies.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 dark:border-[#27272a] border-gray-200 border">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <div className="flex items-center justify-center h-12 w-12 rounded-lg" style={{ backgroundColor: '#cd2213' }}>
            <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900 mb-2">Complete desktop environment</h3>

          <p className="dark:text-gray-400 text-gray-600 text-sm">
            Window server, GUI applications, text editor, terminal, browser, media players, and games.
          </p>
        </div>
      </div>
    </div>

    <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-lg p-6 dark:border-[#27272a] border-gray-200 border">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <div className="flex items-center justify-center h-12 w-12 rounded-lg" style={{ backgroundColor: '#cd2213' }}>
            <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
            </svg>
          </div>
        </div>

        <div className="ml-4">
          <h3 className="text-lg font-semibold dark:text-white text-gray-900 mb-2">Modern web standards</h3>

          <p className="dark:text-gray-400 text-gray-600 text-sm">
            JavaScript engine with high spec compliance, CSS support, WebAssembly, and more.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="dark:bg-[#1a1d27] bg-gray-50 rounded-2xl p-8 dark:border-[#27272a] border-gray-200 border">
    <div className="text-center">
      <h2 className="text-2xl sm:text-3xl font-bold dark:text-white text-gray-900 mb-4">Ready to dive in?</h2>

      <p className="text-base dark:text-gray-400 text-gray-600 mb-6 max-w-2xl mx-auto">
        Join the SerenityOS community and start building a Unix-like operating system from scratch.
      </p>

      <div className="flex flex-wrap justify-center gap-4">
        <a href="/quickstart" className="inline-flex items-center px-6 py-3 rounded-lg text-white font-semibold transition-all duration-200" style={{ backgroundColor: '#cd2213' }}>
          Build SerenityOS
        </a>

        <a href="https://serenityos.org/discord" className="inline-flex items-center px-6 py-3 rounded-lg font-semibold transition-all duration-200 dark:border-white/30 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 border-gray-300 bg-white text-gray-900 hover:bg-gray-100 border">
          Join Discord
        </a>
      </div>
    </div>
  </div>
</div>