Request Demo

Support

How can we help you?

Get answers to all your Stark-related questions with
step-by-step guides from our Support center.

Using Source Code Integrations

Scan your code files using Stark in realtime and send your results up for monitoring

Quick-start with an AI prompt

Copy this into your AI coding agent of choice to get set up without having to work through the steps below by hand.

Choose a prompt
Set up Stark's source code accessibility scanning in this React project.

Facts to use as-is (don't guess at flags or invent options):
- Package: `@stark-lab-inc/stark-accessibility-react`, installed as a dev dependency.
- CLI: `npx stark-scan-react <path>` — e.g. `npx stark-scan-react src/`. A Stark token
  is required for every scan; there is no tokenless mode.
- Token comes from `STARK_TOKEN` in the environment, a `.env` file at the project root,
  or `--stark-token <token>`. The CLI checks all three.
- CLI options, and only these: `--stark-token <token>`, `--name <name>` (defaults to the
  current directory name), `--silent`, `--merge-config`, `--help`.
- By default the CLI uses its own embedded ESLint config and ignores yours.
  `--merge-config` makes it find and merge your local `eslint.config.js` — needed if
  your rules depend on custom parser or environment settings.
- Separately, the package ships an ESLint plugin for in-IDE feedback, exposed as
  `starkAccessibilityReact.configs.recommended`.
- My Stark token: PASTE_YOUR_TOKEN_HERE

Steps:
1. Confirm this is a React project, tell me the source root you'd scan, and check
   whether an `eslint.config.js` already exists. Report back before changing anything.
2. Install the package as a dev dependency.
3. Put the token in `.env` as `STARK_TOKEN`, and verify `.env` is gitignored before
   writing it. If it isn't, stop and tell me.
4. Run a first scan with an explicit `--name` describing this codebase rather than
   letting it default to the directory name.
5. Summarize what came back: how many issues, grouped by rule, and which look like real
   WCAG failures versus lint-level cleanup. Don't start fixing them.

Once I've reviewed:
6. Propose (don't write yet) the ESLint plugin wiring for IDE feedback. Plain JS uses the
   flat-config array form with `starkAccessibilityReact.configs.recommended`; TypeScript
   uses `tseslint.config([...])` with the recommended config in `extends`. Match whichever
   this project actually is.
7. Propose a CI step running the scan with `--silent`, token supplied as a secret.

Constraints: use only the flags listed above, don't add a config file the docs don't
describe, and if the scan errors show me the real output before proposing a fix.

With Stark's source code integration, you get a CLI tool to scan your React, Vue, or Angular codebase, automatic syncing to your Stark dashboard, and integration with your existing ESLint setup for IDE support.

Getting Started with React

Begin by installing the package:

npm install --save-dev @stark-lab-inc/stark-accessibility-react

Using CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your React code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

  1. Log in to your Stark account at app.getstark.co
  2. Navigate to your project and create or edit a source code asset
  3. Find your project's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
  4. Copy this token - you'll need it for running the tool
  5. Configure your token (see configuration options below)
  6. Run accessibility checks

Stark Token Configuration

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-react src/

Option 2: .env File (Recommended for Development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-react src/

Option 3: Command Line Argument

npx stark-scan-react src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Usage Examples

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-react src/

# With custom scan name
npx stark-scan-react src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-react src/ --silent

# Merge with local ESLint configuration
npx stark-scan-react src/ --merge-config

# Help
npx stark-scan-react --help

CLI Options

  • --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
  • --name <name> - Custom scan name (defaults to current directory name)
  • --silent - Suppress console output except errors
  • --merge-config - Enable config merging (search for and merge with local ESLint configurations)
  • --help - Show help message

Configuration Merging

By default, the CLI ships with an embedded configuration that works out of the box. However, you can use the --merge-config flag to integrate your existing ESLint configuration:

  • Without --merge-config: Uses the embedded configuration
  • With --merge-config: Searches for and merges local ESLint configs (eslint.config.js) with the embedded configuration

This is useful for projects that have specific requirements or custom ESLint configuration options (like specialized parser settings, environment configurations, or particular project needs).

ESLint Plugin Integration

If you prefer to integrate accessibility checking directly into your existing ESLint setup (for IDE support, custom workflows, etc.), you can use our ESLint plugin:

Basic Configuration

Add Stark to your existing ESLint configuration:

// eslint.config.js
import starkAccessibilityReact from '@stark-lab-inc/stark-accessibility-react';

export default [
  starkAccessibilityReact.configs.recommended,
  {
    files: ['**/*.{js,jsx}'],
  },
];

TypeScript Configuration

For TypeScript projects:

// eslint.config.js
import tseslint from 'typescript-eslint';
import starkAccessibilityReact from '@stark-lab-inc/stark-accessibility-react';

export default tseslint.config([
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      starkAccessibilityReact.configs.recommended
    ],
  },
]);

Getting Started with Vue

Begin by installing the package:

npm install --save-dev @stark-lab-inc/stark-accessibility-vue

CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your Vue code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

  1. Log in to your Stark account at app.getstark.co
  2. Navigate to your project and create or edit a source code asset
  3. Find your asset's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
  4. Copy this token - you'll need it for running the tool
  5. Configure your token (see configuration options below)
  6. Run accessibility checks

Stark Token Configuration

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD

export STARK_TOKEN="your-stark-token"
npx stark-scan-vue src/

Option 2: .env File (Recommended for Development

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-vue src/

Option 3: Command Line Argument

npx stark-scan-vue src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Usage Examples

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-vue src/

# With custom scan name
npx stark-scan-vue src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-vue src/ --silent

# Merge with local ESLint configuration
npx stark-scan-vue src/ --merge-config

# Help
npx stark-scan-vue --help

CLI Options

  • --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
  • --name <name> - Custom scan name (defaults to current directory name)
  • --silent - Suppress console output except errors
  • --merge-config - Enable config merging (search for and merge with local ESLint configurations)
  • --help - Show help message

Configuration Merging

By default, the CLI ships with an embedded configuration that works out of the box. However, you can use the --merge-config flag to integrate your existing ESLint configuration:

  • Without --merge-config: Uses the embedded configuration
  • With --merge-config: Searches for and merges local ESLint configs (eslint.config.js) with the embedded configuration

This is useful for projects that have specific requirements or custom ESLint configuration options (like specialized parser settings, environment configurations, or particular project needs).

ESLint Plugin Integration

If you prefer to integrate accessibility checking directly into your existing ESLint setup (for IDE support, custom workflows, etc.), you can use our ESLint plugin:

Basic Configuration

Add Stark to your existing ESLint configuration:

// eslint.config.js
import starkAccessibilityVue from '@stark-lab-inc/stark-accessibility-vue';
import { defineConfig } from 'eslint/config';

export default defineConfig({
  extends: [starkAccessibilityVue.configs.recommended],
});

Getting Started with Angular

Begin by installing the package:

npm install --save-dev @stark-lab-inc/stark-accessibility-angular

CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your Angular code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

  1. Log in to your Stark account at app.getstark.co
  2. Navigate to your project and create or edit a source code asset
  3. Find your asset's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
  4. Copy this token - you'll need it for running the tool
  5. Configure your token (see configuration options below)
  6. Run accessibility checks

Stark Token Configuration

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-angular src/

Option 2: .env File (Recommended for Development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-angular src/

Option 3: Command Line Argument

npx stark-scan-angular src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Usage Examples

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-angular src/

# With custom scan name
npx stark-scan-angular src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-angular src/ --silent

# Merge with local ESLint configuration
npx stark-scan-angular src/ --merge-config

# Help
npx stark-scan-angular --help

CLI Options

  • --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
  • --name <name> - Custom scan name (defaults to current directory name)
  • --silent - Suppress console output except errors
  • --merge-config - Enable config merging (search for and merge with local ESLint configurations)
  • --help - Show help message

Configuration Merging

By default, the CLI ships with an embedded configuration that works out of the box. However, you can use the --merge-config flag to integrate your existing ESLint configuration:

  • Without --merge-config: Uses the embedded configuration
  • With --merge-config: Searches for and merges local ESLint configs (eslint.config.js) with the embedded configuration

This is useful for projects that have specific requirements or custom ESLint configuration options (like specialized parser settings, environment configurations, or particular project needs).

ESLint Plugin Integration

If you prefer to integrate accessibility checking directly into your existing ESLint setup (for IDE support, custom workflows, etc.), you can use our ESLint plugin:

Basic Configuration

Add Stark to your existing ESLint configuration:

// eslint.config.js
import starkAccessibilityAngular from '@stark-lab-inc/stark-accessibility-angular';
import { defineConfig } from 'eslint/config';

export default defineConfig({
  extends: [starkAccessibilityAngular.configs.recommended],
});

TypeScript Configuration

For TypeScript projects:

// eslint.config.js
import starkAccessibilityAngular from '@stark-lab-inc/stark-accessibility-angular';
import { defineConfig } from 'eslint/config';

export default defineConfig({
  extends: [starkAccessibilityAngular.configs.recommended],
});

Getting Started with Svelte

Begin by installing the package:

npm install --save-dev @stark-lab-inc/stark-accessibility-svelte

Using CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your Svelte code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

  1. Log in to your Stark account at app.getstark.co
  2. Navigate to your project and create or edit a source code asset
  3. Find your project's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
  4. Copy this token - you'll need it for running the tool
  5. Configure your token (see configuration options below)
  6. Run accessibility checks

Stark Token Configuration

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-svelte src/

Option 2: .env File (Recommended for Development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-svelte src/

Option 3: Command Line Argument

npx stark-scan-svelte src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Usage Examples

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-svelte src/

# With custom scan name
npx stark-scan-svelte src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-svelte src/ --silent

# Merge with local ESLint configuration
npx stark-scan-svelte src/ --merge-config

# Help
npx stark-scan-svelte --help

CLI Options

  • --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
  • --name <name> - Custom scan name (defaults to current directory name)
  • --silent - Suppress console output except errors
  • --merge-config - Enable config merging (search for and merge with local ESLint configurations)
  • --help - Show help message

Configuration Merging

By default, the CLI uses an embedded configuration and ignores any local ESLint config in your project. Pass --merge-config to have it search for and merge your local eslint.config.js — useful if you have custom parser settings or environment configuration that the rules depend on.

How scanning works

Each run performs two passes over your .svelte files:

  1. ESLint pass — runs the stark-accessibility-svelte plugin rules (button types, ARIA correctness, duplicate directives, event handler validity, and more)
  2. Svelte compiler pass — invokes the Svelte compiler directly and captures its built-in a11y diagnostics (missing alt, invalid href, keyboard event pairing, role validity, etc.)

ESLint Plugin Integration

To integrate accessibility checking directly into your existing ESLint setup for IDE support:

// eslint.config.js
import starkAccessibilitySvelte from '@stark-lab-inc/stark-accessibility-svelte';
import { defineConfig } from 'eslint/config';

export default defineConfig({
  extends: [starkAccessibilitySvelte.configs.recommended],
});

The recommended config automatically:

  • Sets svelte-eslint-parser as the parser for .svelte files
  • Configures @typescript-eslint/parser for TypeScript inside <script> blocks
  • Enables all rules at their default severities

Go back to articles