Skip to content
CAI
Software that uses CAICheck a score

carbon-app/carbon

48.7

Weak · 1 October 2026

11.7k

lines of production code

JavaScript

primary language

2

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

This system is a web-based code snippet editor and sharing platform, now rebuilt on Next.js for server-side rendering and Vercel deployment. It allows users to write code with extensive syntax highlighting and theming, then generate shareable images or embeds. The application supports user accounts for saving snippets, manages URL state for reproducibility, and includes automated visual regression testing to ensure UI stability.

How it got here

2017 — Next.js migration and architecture overhaul

8 changes.

The project underwent a comprehensive migration from a legacy Express-based structure to a modern Next.js architecture, enabling Vercel deployment and dynamic routing. This period involved restructuring core logic into a centralized library, updating dependencies to support React 17 and Next.js 12, and implementing new UI components for typography, icons, and global styles.

2018–2021 — Editor features and testing infrastructure

11 changes.

This period focused on enhancing the code editor with new syntax highlighting modes, custom theme creation, and auto-closing brackets. It also established a robust testing and deployment infrastructure by integrating Cypress with Applitools for visual regression testing and automating releases via Vercel.

Features

Add Black Lives Matter announcement banner

A new Announcement component has been added to display a temporary banner supporting Black Lives Matter with a link to the Campaign Zero organization. The banner is controlled by a feature flag (currently disabled) and uses local storage to ensure it is shown only once per user session, with specific styling for the toast notification.

components · high confidence

Added auto-closing brackets feature for code editors

Introduced a new \autoCloseBrackets\ module for CodeMirror that automatically inserts closing brackets, quotes, and braces as users type, and intelligently handles backspace and Enter key behavior within these pairs. This enhances the coding experience by reducing manual typing and maintaining proper syntax structure in supported editors.

lib/custom · high confidence

Added syntax highlighting for Apache, Elixir, GraphQL, Nim, RISC-V, and Solidity

The code editor now supports syntax highlighting for Apache configuration files, Elixir, GraphQL, Nim, RISC-V assembly, and Solidity smart contracts. This is achieved by adding new custom mode files in the \lib/custom/modes\ directory, which register the respective language definitions with CodeMirror to provide accurate tokenization and styling for these languages.

lib/custom/modes · high confidence

Automated deployment workflow via Vercel

A new deployment script (bin/deploy.sh) has been added to automate the release process. The script switches the Vercel context to the 'carbon-app' project, triggers a deployment, and automatically runs end-to-end tests against the resulting preview URL. Upon successful testing, it copies the preview URL to the clipboard and prompts the user to optionally promote the deployment to the production alias (carbon.now.sh).

bin · high confidence

Enhanced PWA support and expanded code editor theming

The application now offers improved mobile and installable web app experiences through a new \manifest.json\ that supports maskable icons, alongside updated \robots.txt\ rules to control search engine indexing. Additionally, users can now choose from a wider variety of visual styles for their code snippets, as five new syntax highlighting themes (Night Owl, Nord, One Dark, One Light, and Synthwave '84) have been added to the public static assets.

public · high confidence

Integrate Applitools visual testing into Cypress

The Cypress plugin configuration now initializes the Applitools Eyes SDK. This enables visual regression testing capabilities within the existing Cypress integration tests, allowing users to capture and compare screenshots against baselines during test runs.

cypress/plugins · high confidence

Introduce global font, reset, and typography styles

The application now includes dedicated style components for global font definitions, CSS resets, and typography scales. Font.js registers a wide range of monospaced fonts (including Monoid, Fantasque Sans Mono, Hack, Fira Code, JetBrains Mono, Cascadia Code, IBM Plex Mono, Anonymous Pro, Droid Sans Mono, Inconsolata, Source Code Pro, Ubuntu Mono, and Space Mono) via @font-face rules with woff2/woff sources. Reset.js applies a Meyer Web CSS reset, sets system font stacks for body text, and styles kbd elements. Typography.js establishes a modular scale for headings and spacing utilities using CSS variables.

components/style · high confidence

New SVG icon components for UI elements

Added a suite of new React SVG components in the \components/svg\ directory to support recent UI updates. These include directional arrows (\Arrows\), a checkmark (\Checkmark\), window controls in multiple styles (\Controls\), a copy icon (\Copy\), a language globe (\Language\), the main application logo (\Logo\), a remove/close icon (\Remove\), settings and theme icons (\Settings\, \Theme\), and a watermark component (\Watermark\) that adapts its color based on a \light\ prop.

components/svg · high confidence

New theme creation UI and global syntax highlighting support

The Themes component now includes a dedicated interface for creating custom themes, allowing users to select a preset and individually adjust syntax highlight colors (such as strings, comments, variables, and keywords) via a new ThemeCreate dialog. Additionally, a new GlobalHighlights component injects global CSS styles to apply these custom highlight colors to the CodeMirror editor, supporting specific token types like built-ins and variable variants, while also applying theme-specific cursor and line-number styling for themes like Dracula, VS Code, and Solarized.

components/Themes · high confidence

Removals

Removed image upload handler

The image upload handler has been removed from the application. This eliminates the ability to submit base64-encoded images to the Imgur API via the previous endpoint, meaning users can no longer upload images through this specific mechanism.

handlers · high confidence

Architecture

Introduce centralized lib module for API, routing, and utilities

This change introduces a new \lib\ directory that centralizes core application logic previously scattered across the codebase. It includes \api.js\ for managing HTTP requests (Twitter, Imgur, Unsplash, and snippets), \client.js\ for Firebase authentication initialization, \routing.js\ for URL state serialization and deserialization, and \util.js\ for helper functions like HTML escaping and local storage management. This restructuring provides a single source of truth for these critical services, improving maintainability and separation of concerns.

lib · high confidence

Repository restructured for Next.js and Vercel deployment

The project has been reorganized to support a modern Next.js architecture and deployment on Vercel. The legacy Express-based server (server.js) and custom API module (api.js) have been removed in favor of Next.js API routes and static file handling. Configuration files have been standardized, including a new ESLint setup with React and accessibility rules, Prettier formatting, and a .npmrc to disable package-lock.json. Deployment is now managed via vercel.json and .vercelignore, and the application includes PWA support via next-pwa. Documentation has been consolidated, with translations moved to the docs folder and a new .all-contributorsrc file managing contributor recognition.

(repo-wide) · high confidence

Behavioural changes

Cypress configuration centralized and video recording disabled

Cypress test configuration has been moved into a dedicated cypress/config.json file, which sets the base URL to https://carbon.now.sh/, assigns a project ID, and explicitly disables video recording. Additionally, a new cypress/util.js module was introduced to export a shared environment configuration defining the default viewport dimensions (1000x768) and browser name (chrome) for use across tests.

cypress · high confidence

Introduce server-side rendering for embed pages

The embed pages now use Next.js server-side rendering (getServerSideProps) to fetch snippet data on the server before sending the initial HTML to the client. This change improves initial load performance and SEO for embed URLs by ensuring the content is available immediately upon page load, rather than waiting for client-side data fetching.

pages/embed · high confidence

Migrate to Next.js pages and introduce dynamic snippet routing

The application has been refactored to use Next.js's page-based routing system. A new \pages/\_document.js\ standardizes the HTML structure, while \pages/index.js\ now serves as the main entry point, wrapping the editor in an \EditorContainer\ and handling service worker registration. A new \pages/\[id\].js\ enables dynamic routing for individual snippets, fetching data via \getServerSideProps\ and supporting a \filename\ query parameter. Existing pages like \about.js\, \account.js\, and \snippets.js\ have been rewritten as Next.js components, with \account.js\ introducing a pricing table for 'Free' and 'Diamond' plans and \snippets.js\ providing a list view with delete functionality.

pages · high confidence

Migration of API routes to Next.js pages directory

The image generation and oEmbed API endpoints have been moved from their previous location into the Next.js \pages/api\ directory structure. This change introduces \pages/api/image/\[id\].js\ for generating code snippet images using Puppeteer and \pages/api/oembed.js\ for providing oEmbed metadata, aligning the backend routes with the Next.js framework conventions.

pages/api · high confidence

Test coverage

Add Cypress support utility for editor visibility checks; Added comprehensive end-to-end test suite for editor features and security.

Dependencies

Carbon project dependency overhaul and version bump to 4.9.10

The project dependencies have been significantly updated, bumping the package version to 4.9.10 and upgrading core libraries including Next.js to ^12.1.6, React to ^17.0.2, and Axios to ^0.28.0. The dependency tree now includes modern tooling such as Cypress for end-to-end testing, ESLint with Next.js configuration, and various CodeMirror extensions for syntax highlighting. Development dependencies have also been refreshed to support the new build and linting scripts, ensuring the application runs on Node.js 12 or higher.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

How this codebase got here

Score

  • CAI 52 → 49 (-3.7)
  • Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

Lenses

  • Code Health 51 → 48 (-2.8)
  • Architecture 81 → 76 (-4.9)
  • Maturity 49 → 49 (+0.0)
  • Readiness 53 → 40 (-13.6)
  • Security 62 → 75 (+12.7)
  • Performance 100 (new)

Resolved (6)

  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
  • Documentation: no installation or build instructions
  • Documentation: no licence statement
  • Documentation: no usage examples
  • High CVE: [GHSA redacted] (yarn.lock)
  • Medium CVE: [GHSA redacted] (yarn.lock)

New (38)

  • Documentation: no installation or build instructions (README.md)
  • Documentation: no installation or build instructions (docs/README.ru.md)
  • Documentation: no usage examples (docs/README.ru.md)
  • FunctionTooLong: dom-to-image.newUtil (lib/dom-to-image.js)
  • High CVE: [GHSA redacted] (yarn.lock)
  • High CVE: [GHSA redacted] (yarn.lock)
  • Outdated (npm): @next/bundle-analyzer
  • Outdated (npm): @reach/visually-hidden
  • Outdated (npm): axios
  • Outdated (npm): chrome-aws-lambda
  • Outdated (npm): codemirror
  • Outdated (npm): codemirror-graphql
  • Outdated (npm): date-fns
  • Outdated (npm): downshift
  • Outdated (npm): firebase
  • Outdated (npm): graphql
  • Outdated (npm): highlight.js
  • Outdated (npm): match-sorter
  • Outdated (npm): next
  • Outdated (npm): next-pwa
  • …and 18 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

Survey your own repository

carbon-app/carbon was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.

About this page

  • The score is its most recent published measurement, taken on 1 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit 1334429ae63f9a3d052d59ec8c6b158fa5db0943 — the exact code this score is about.
  • Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.