Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions get-started.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
title: Introduction
slug: ../
---

## Try now

Go to [excalidraw.com](https://excalidraw.com) to start sketching.

## How are these docs structured

These docs are focused on developers, and structured in the following way:

- [Introduction](/docs/) — development setup and introduction.
- [Onboarding](/docs/introduction/onboarding) — first-week setup and ramp-up guide for new engineers.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Potential broken internal link to onboarding page.

Line 15 points to /docs/introduction/onboarding, but this PR adds onboarding.mdx as a top-level docs page, which usually resolves to /docs/onboarding. Please align the URL (or explicitly set a slug in onboarding.mdx) to avoid a dead link.

Suggested fix
-- [Onboarding](/docs/introduction/onboarding) — first-week setup and ramp-up guide for new engineers.
+- [Onboarding](/docs/onboarding) — first-week setup and ramp-up guide for new engineers.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- [Onboarding](/docs/introduction/onboarding) — first-week setup and ramp-up guide for new engineers.
- [Onboarding](/docs/onboarding) — first-week setup and ramp-up guide for new engineers.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@get-started.mdx` at line 15, The link in get-started.mdx currently points to
/docs/introduction/onboarding but the new page was added as onboarding.mdx
(top-level); update the reference in get-started.mdx to /docs/onboarding or
alternatively add an explicit slug (e.g., "slug: /docs/introduction/onboarding")
inside onboarding.mdx so the existing link resolves—modify either the link
target in get-started.mdx or the frontmatter slug in onboarding.mdx to make them
match.

- [@excalidraw/excalidraw](/docs/@excalidraw/excalidraw/installation) — docs for the npm package to help you integrate Excalidraw into your own app.
- Editor — IN PROGRESS. Docs describing the internals of the Excalidraw editor to help in contributing to the codebase.
- [@excalidraw/mermaid-to-excalidraw](/docs/@excalidraw/mermaid-to-excalidraw/installation) - Docs for the mermaid to excalidraw parser
135 changes: 135 additions & 0 deletions onboarding.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
# Onboarding for New Engineers

This guide helps new employees become productive in the Excalidraw monorepo quickly, with practical setup steps, codebase orientation, and a suggested first-week path.

## What You Are Working In

Excalidraw uses a monorepo with two main product surfaces:

- `packages/excalidraw/` - the published React package `@excalidraw/excalidraw`.
- `excalidraw-app/` - the full web app (the code that powers excalidraw.com).

Supporting packages used by the editor live in `packages/`:

- `@excalidraw/common`
- `@excalidraw/element`
- `@excalidraw/math`
- `@excalidraw/utils`

```text
excalidraw/
|- excalidraw-app/ # product app
|- packages/
| |- excalidraw/ # npm package
| |- common/
| |- element/
| |- math/
| `- utils/
|- dev-docs/ # this documentation site
`- examples/ # integration examples
```

## Architecture At A Glance

```mermaid
flowchart LR
A[Excalidraw App<br/>excalidraw-app] --> B[@excalidraw/excalidraw]
B --> C[@excalidraw/element]
B --> D[@excalidraw/common]
B --> E[@excalidraw/math]
B --> F[@excalidraw/utils]
G[Examples] --> B
```

Use this mental model:

- If it is app-specific behavior, investigate `excalidraw-app/`.
- If it should be reusable by consumers, implement in `packages/excalidraw/` or a core package.

## Local Setup

### Prerequisites

- Node.js
- Yarn (workspace-aware)
- Git

### One-time setup

```bash
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
yarn
```

### Start development

```bash
yarn start
```

Then open `http://localhost:3000`.

## Daily Development Workflow

1. Pull latest changes and sync your branch.
1. Run the app with `yarn start`.
1. Make a focused change in the appropriate package/app area.
1. Run quality gates before opening a PR:
- `yarn test:typecheck`
- `yarn test:update`
- `yarn fix` (if needed)

## Typical Change Routing

```mermaid
flowchart TD
S[Start from issue or task] --> Q{Where does it belong?}
Q -->|Reusable editor behavior| P[packages/excalidraw or core packages]
Q -->|App-only UX/integration| A[excalidraw-app]
P --> T[Run tests and typecheck]
A --> T
T --> R[Open PR]
```

## First Week Ramp-Up Plan

### Day 1

- Complete local setup and run `yarn start`.
- Read `introduction/development` and `introduction/contributing`.
- Skim root `README.md` for product context.

### Day 2-3

- Pick a small issue (or shadow one) and trace code path from UI to data model.
- Make a small documentation or bugfix PR to validate workflow end-to-end.

### Day 4-5

- Implement one scoped change with tests.
- Request review early, incorporate feedback, and document what you learned.

## Collaboration and Expectations

- Prefer small, reviewable PRs over large batches.
- Include tests for bug fixes and non-trivial features.
- Ask for early alignment when changing shared editor behavior.
- Keep docs updated when behavior or APIs change.

## Debugging and Validation Checklist

Before requesting review, verify:

- [ ] App runs locally (`yarn start`).
- [ ] Type checks pass (`yarn test:typecheck`).
- [ ] Tests and snapshots are updated (`yarn test:update`).
- [ ] Formatting/lint checks are clean (`yarn fix` as needed).
- [ ] Manual smoke test of changed behavior in browser.

## Useful Pointers

- Development guide: `/docs/introduction/development`
- Contribution guide: `/docs/introduction/contributing`
- Package docs: `/docs/@excalidraw/excalidraw/installation`
- Mermaid parser docs: `/docs/@excalidraw/mermaid-to-excalidraw/installation`