whatisgithub

What is craco?

dilanx/craco — explained in plain English

Analysis updated 2026-06-24

7,435TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A tool that lets you customise Create React App's build configuration, webpack, Babel, ESLint, PostCSS, by adding one config file, without ejecting from CRA and losing the ability to update it.

Mindmap

mindmap
  root((craco))
    What it does
      Overrides CRA config
      No eject needed
      Intercepts build step
    Customisable areas
      webpack settings
      Babel plugins
      ESLint rules
      PostCSS setup
    Setup
      Install CRACO package
      Add craco.config.js
      Update package.json scripts
    Audience
      React developers
      CRA project owners
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a custom Babel plugin to a Create React App project without ejecting, by defining it in craco.config.js

USE CASE 2

Override webpack settings in a CRA project to support path aliases or custom file loaders while keeping react-scripts updatable

USE CASE 3

Set up custom ESLint rules or PostCSS plugins in a CRA project through a single CRACO config file

What is it built with?

TypeScriptNode.jswebpackBabel

How does it compare?

dilanx/cracogsd-build/gsd-2pablodelucca/pixel-agents
Stars7,4357,4387,424
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity2/53/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Full configuration API and plugin system docs live on the external CRACO website, not in this repository.

So what is it?

Create React App (CRA) is a popular tool that sets up a React project with sensible defaults and a pre-configured build system. The tradeoff is that those defaults are mostly locked in, and to change them you typically have to "eject," which exposes all the internal configuration files and means you are responsible for maintaining them going forward. Once you eject, you cannot undo it. CRACO (Create React App Configuration Override) solves this by adding a layer on top of CRA that intercepts the build configuration before it runs, allowing you to modify it without ever ejecting. You add a single file called craco.config.js to the root of your project, write your overrides there, and then replace the react-scripts commands in your package.json with craco commands. From that point on, your project starts, builds, and runs tests through CRACO, which applies your overrides before handing off to the underlying CRA tooling. The things you can customize through CRACO include ESLint rules, Babel plugins and presets, PostCSS setup, webpack settings, and more. There is also a plugin system documented on the project website, where the full configuration API and example configs are available. The README is brief and focuses on the three-step setup: install the package, create the config file, and update the scripts in package.json. All further documentation lives on the external website rather than in this repository. This is a developer tool, not something end users interact with directly. If you received a React codebase that uses CRACO and are wondering what it does, it is the layer that lets the project customize its build process without having ejected from Create React App.

Copy-paste prompts

Prompt 1
I have a Create React App project and want to use CRACO to add webpack path aliases. Show me the craco.config.js I need and how to update the package.json scripts.
Prompt 2
Using dilanx/craco, how do I add a Babel plugin to my CRA project? Show me the install command and the craco.config.js entry.
Prompt 3
My CRA project uses CRACO. How do I override the webpack config to add a custom loader for SVG files as React components?
Prompt 4
What do I need to change in package.json when switching a Create React App project from react-scripts to craco commands?

Frequently asked questions

What is craco?

A tool that lets you customise Create React App's build configuration, webpack, Babel, ESLint, PostCSS, by adding one config file, without ejecting from CRA and losing the ability to update it.

What language is craco written in?

Mainly TypeScript. The stack also includes TypeScript, Node.js, webpack.

How hard is craco to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is craco for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.