Quick Start

Get up and running with React Scanner Studio in just a few minutes.

Step 1: Initialize Configuration

Navigate to your React project's root directory and run:

npx react-scanner-studio init

This command will:

1. Check for react-scanner — If not installed, it will offer to install it for you
2. Prompt for configuration — You'll be asked two questions:
   • crawlFrom: The directory to scan (default: ./src)
   • importedFrom: The package to track components from (e.g., @mui/material, @chakra-ui/react)
3. Create config file — Generates a react-scanner.config.js in your project root
4. Update ignore files — Adds .react-scanner-studio/ to your .gitignore, .eslintignore, and .prettierignore

Example Initialization

$ npx react-scanner-studio init

╭─────────────────────────────────────────────╮
│                                             │
│   Welcome to React Scanner Studio           │
│   Initializing your project...              │
│                                             │
╰─────────────────────────────────────────────╯

crawlFrom  The directory where react-scanner will start crawling for React components.
This is typically your source folder (e.g., ./src, ./app).

? Enter the path to crawl from: ./src

importedFrom  The package or path that components are imported from.
This filters which components to track (e.g., @mui/material, @chakra-ui/react, ./components).

? Enter the import source to track: @mui/material

✔ Created react-scanner.config.js
✔ Added .react-scanner-studio/ to: .gitignore, .eslintignore, .prettierignore

╭─────────────────────────────────────────────╮
│                                             │
│   Initialization Complete                   │
│   Your project is now configured for        │
│   React Scanner Studio.                     │
│   Run react-scanner-studio start to begin.  │
│                                             │
╰─────────────────────────────────────────────╯

Step 2: Start the Dashboard

Start the interactive dashboard:

npx react-scanner-studio start

Since this is your first time, you'll be prompted to generate a scan report:

   ⚠ No scan report found.
? Would you like to generate a scan report now? (Y/n)

Press Enter (or type Y) to scan your codebase and start the dashboard.

Automatic Scan Detection

The start and build commands automatically detect if a scan report exists. If one is found, you'll be asked whether to use it or generate a fresh one. This means you don't always need to run scan manually!

Step 3: View Your Dashboard

The development server will start and automatically open your browser to http://localhost:3000.

╭──────────────────────────────────────────────────╮
│                                                  │
│   🚀 React Scanner Studio: Server Running        │
│                                                  │
│   Local:    http://localhost:3000                │
│                                                  │
│   Press Ctrl+C to stop the server                │
│                                                  │
╰──────────────────────────────────────────────────╯

Step 4: Build for Sharing (Optional)

To generate a portable, static version of the dashboard:

npx react-scanner-studio build

This creates a .react-scanner-studio/ directory containing:

• index.html — The main dashboard page
• scan-report.json — The embedded scan data
• Static assets (JS, CSS)

You can serve this directory with any static file server:

npx serve .react-scanner-studio

Or deploy it to GitHub Pages, Netlify, Vercel, or any other static hosting service.

Complete Workflow

Here's the complete workflow:

# One-time setup
npx react-scanner-studio init

# Start the dashboard (will prompt to scan if needed)
npx react-scanner-studio start

Or add these scripts to your package.json:

{
  "scripts": {
    "studio": "react-scanner-studio start",
    "studio:scan": "react-scanner-studio scan",
    "studio:build": "react-scanner-studio build",
    "studio:build:ci": "react-scanner-studio scan && react-scanner-studio build --ci"
  }
}

Then simply run:

npm run studio

Manual Scanning

If you prefer to control when scanning happens, you can still run react-scanner-studio scan manually. The start and build commands will then detect the existing report and ask if you want to use it.

What's Next?

• CLI Commands — Learn about all available commands and options
• Configuration — Customize your react-scanner configuration
• CI/CD Integration — Automate scanning in your pipeline