Skip to content

CLAUDE.md

Latest commit

 

History

History
66 lines (48 loc) · 2.31 KB

CLAUDE.md

File metadata and controls

66 lines (48 loc) · 2.31 KB

CLAUDE.md

Project Structure

Excalidraw is a monorepo with a clear separation between the core library and the application:

  • packages/excalidraw/ - Main React component library published to npm as @excalidraw/excalidraw
  • excalidraw-app/ - Full-featured web application (excalidraw.com) that uses the library
  • packages/ - Core packages: @excalidraw/common, @excalidraw/element, @excalidraw/math, @excalidraw/utils
  • examples/ - Integration examples (NextJS, browser script)

Development Workflow

  1. Package Development: Work in packages/* for editor features
  2. App Development: Work in excalidraw-app/ for app-specific features
  3. Testing: Always run yarn test:update before committing
  4. Type Safety: Use yarn test:typecheck to verify TypeScript

Local Development Server

Run the development server to test changes in real-time and monitor for errors:

# Start the local development server (runs on http://localhost:5173)
yarn start

Important: Run the dev server in the background during implementation to catch runtime errors early. Monitor the console output for:

  • TypeScript compilation errors
  • React component errors
  • Vite HMR (Hot Module Replacement) issues
  • Runtime exceptions

To run the server in the background and monitor logs:

# Start server in background and tail logs
yarn start 2>&1 | tee /tmp/excalidraw-dev.log &

# Or simply run in a separate terminal and watch for errors
yarn start

When errors appear in the console during development:

  1. Fix TypeScript/compilation errors immediately before proceeding
  2. Check browser DevTools console for runtime errors
  3. Vite will auto-reload on file changes - watch for HMR errors

Development Commands

yarn test:typecheck  # TypeScript type checking
yarn test:update     # Run all tests (with snapshot updates)
yarn fix             # Auto-fix formatting and linting issues

Architecture Notes

Package System

  • Uses Yarn workspaces for monorepo management
  • Internal packages use path aliases (see vitest.config.mts)
  • Build system uses esbuild for packages, Vite for the app
  • TypeScript throughout with strict configuration

Development Best Practices

  • Test Driven Development: I want to follow TDD to implement new features, and make incremental commits.