### Install Dependencies with Yarn

Source: https://github.com/excalidraw/docs/blob/main/README.md

Installs project dependencies using the Yarn package manager. This is a prerequisite for running other development commands.

```shell
yarn
```

--------------------------------

### Start Local Development Server with Yarn

Source: https://github.com/excalidraw/docs/blob/main/README.md

Starts a local development server for the Docusaurus website. Changes are reflected live without manual restarts. Opens the site in a browser.

```shell
yarn start
```

--------------------------------

### Development Server Commands (Bash)

Source: https://context7.com/excalidraw/docs/llms.txt

Provides essential bash commands for managing the Docusaurus development environment. This includes installing dependencies with 'yarn' and starting a local development server with hot reloading using 'yarn start'. The output confirms the server is running and provides the local URL.

```bash
# Install dependencies
yarn

# Start development server on port 3100
yarn start

# Expected output:
# [INFO] Starting the development server...
# [SUCCESS] Docusaurus website is running at http://localhost:3100/

```

--------------------------------

### Build Static Website with Yarn

Source: https://github.com/excalidraw/docs/blob/main/README.md

Generates the static files for the Docusaurus website into the 'build' directory. These files can be deployed to any static hosting service.

```shell
yarn build
```

--------------------------------

### Static Site Build and Serve Commands (Bash)

Source: https://context7.com/excalidraw/docs/llms.txt

Contains bash commands for building and serving a production-ready static version of the Docusaurus documentation site. 'yarn build' generates optimized static files, while 'yarn serve' allows local testing of the built site. 'yarn deploy' is also included for deployment.

```bash
# Build the static site
yarn build

# Expected output:
# [INFO] Creating an optimized production build...
# [SUCCESS] Generated static files in "build" directory
# [INFO] Use `yarn serve` to test your build locally

# Serve the built site locally
yarn serve

# Deploy to hosting
yarn deploy

```

--------------------------------

### Markdown Documentation Page Structure (Markdown)

Source: https://context7.com/excalidraw/docs/llms.txt

Illustrates the structure of a documentation page using Markdown with frontmatter metadata. Pages support MDX, enabling the embedding of React components within the Markdown content. The frontmatter includes 'sidebar_position' and 'title' for navigation and identification.

```markdown
---
sidebar_position: 1
title: Introduction
---

Want to integrate your Excalidraw into your app? Head over to the [package docs](/docs/package/overview).

If you're looking into the Excalidraw codebase itself, start [here](/docs/codebase/overview).

```

--------------------------------

### Homepage Component for Excalidraw Docs

Source: https://context7.com/excalidraw/docs/llms.txt

Renders the main landing page of the Excalidraw documentation site using Docusaurus components. It displays the site header, tagline, and feature highlights, providing a consistent and professional user interface.

```javascript
// src/pages/index.js
import React from "react";
import clsx from "clsx";
import Layout from "@theme/Layout";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import styles from "./index.module.css";
import HomepageFeatures from "@site/src/components/HomepageFeatures";

function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx("hero hero--primary", styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/get-started"
          >
            Get started
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

```

--------------------------------

### Docusaurus Package.json Configuration (JSON)

Source: https://context7.com/excalidraw/docs/llms.txt

Defines the project's metadata, scripts, and dependencies for the Excalidraw documentation site. It specifies Docusaurus 2 beta and React 17 as core dependencies and includes various scripts for development, building, deployment, and utility functions related to Docusaurus.

```json
{
  "name": "excalidraw-docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start --port 3100",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
    "@docusaurus/core": "2.0.0-beta.17",
    "@docusaurus/preset-classic": "2.0.0-beta.17",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.1.1",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

```

--------------------------------

### Docusaurus Configuration for Excalidraw Docs

Source: https://context7.com/excalidraw/docs/llms.txt

Defines the site's metadata, navigation, theme, and build options for the Excalidraw documentation using Docusaurus. It specifies URLs, broken link handling, and preset configurations, including theme and documentation paths.

```javascript
// docusaurus.config.js
const config = {
  title: "Excalidraw developer docs",
  tagline: "For Excalidraw contributors or those integrating the Excalidraw editor",
  url: "https://docs.excalidraw.com.com",
  baseUrl: "/",
  onBrokenLinks: "throw",
  onBrokenMarkdownLinks: "warn",
  favicon: "img/favicon.ico",
  organizationName: "Excalidraw",
  projectName: "excalidraw",

  presets: [
    [
      "classic",
      {
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          editUrl: "https://github.com/excalidraw/docs/tree/master/",
        },
        theme: {
          customCss: require.resolve("./src/css/custom.css"),
        },
      },
    ],
  ],

  themeConfig: {
    navbar: {
      title: "My Site",
      logo: {
        alt: "My Site Logo",
        src: "img/logo.svg",
      },
      items: [
        {
          type: "doc",
          docId: "get-started",
          position: "left",
          label: "Get started",
        },
        {
          to: "https://blog.excalidraw.com",
          label: "Blog",
          position: "left",
        },
      ],
    },
    footer: {
      style: "dark",
      copyright: `Made with ❤️ Built with Docusaurus`,
    },
  },
};

module.exports = config;

```

--------------------------------

### Docusaurus Sidebar Configuration (JavaScript)

Source: https://context7.com/excalidraw/docs/llms.txt

Defines the navigation structure for the Docusaurus documentation site. It supports both autogenerated sidebars based on folder structure and manually defined navigation trees. This file controls how documentation pages are organized and linked within the sidebar.

```javascript
const sidebars = {
  // Automatically generates sidebar from docs folder structure
  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],

  // Manual sidebar configuration example:
  // tutorialSidebar: [
  //   {
  //     type: 'category',
  //     label: 'Tutorial',
  //     items: ['hello'],
  //   },
  // ],
};

module.exports = sidebars;

```

--------------------------------

### Homepage Features Component (JavaScript)

Source: https://context7.com/excalidraw/docs/llms.txt

A React component that renders feature cards for the Excalidraw documentation homepage. It uses an array of feature objects, each containing a title, SVG icon, and description, to dynamically display value propositions. This component relies on React and Docusaurus styling modules.

```javascript
import React from "react";
import clsx from "clsx";
import styles from "./styles.module.css";

const FeatureList = [
  {
    title: "Learn how Excalidraw works",
    Svg: require("@site/static/img/undraw_innovative.svg").default,
    description: (
      <>
        Want to contribute to Excalidraw but got lost in the codebase?
      </>
    ),
  },
  {
    title: "Integrate Excalidraw",
    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
    description: (
      <>
        Want to build your own app powered by Excalidraw by don't know where to
        start?
      </>
    ),
  },
  {
    title: "Help us improve",
    Svg: require("@site/static/img/undraw_add_files.svg").default,
    description: (
      <>
        Are the docs missing something? Anything you had trouble understanding
        or needs an explanation? Come contribute to the docs to make them even
        better!
      </>
    ),
  },
];

function Feature({ Svg, title, description }) {
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.