# react-ace

> A react component for Ace Editor

Latest version **15.0.0** (published 2026-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ace
pnpm add react-ace
yarn add react-ace
bun add react-ace
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 15.0.0 |
| Published | 2026-07-29 |
| First published | 2014-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 4207 |
| Author | James Hrisho |
| Maintainers | securingsincity |
| Keywords | ace, ace editor, react-component, react |

## Links

- npm: https://www.npmjs.com/package/react-ace
- Repository: https://github.com/securingsincity/react-ace
- Homepage: https://github.com/securingsincity/react-ace#readme
- Issues: https://github.com/securingsincity/react-ace/issues
- npm.io page: https://npm.io/package/react-ace

## Dependencies (4)

- [ace-builds](https://npm.io/package/ace-builds.md) ^1.36.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [fast-equals](https://npm.io/package/fast-equals.md) ^5.3.3
- [diff-match-patch](https://npm.io/package/diff-match-patch.md) ^1.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 15.0.0 (latest) — 2026-07-29
- 14.1.0 — 2026-07-29
- 14.0.1 — 2025-02-11
- 13.0.0 — 2024-11-02
- 12.0.0 — 2024-06-25
- 11.0.1 — 2024-03-24
- 10.1.0 — 2022-04-26
- 10.0.0 — 2022-04-15
- 9.5.0 — 2021-10-22
- 9.4.4 — 2021-09-22
- 9.4.5 — 2021-09-22
- 9.4.3 — 2021-07-31
- 9.4.1 — 2021-06-06
- 9.4.0 — 2021-03-28
- 9.3.0 — 2021-02-01
- … 90 more at https://npm.io/package/react-ace/versions

## README

# React-Ace

![logo](https://github.com/securingsincity/react-ace/raw/master/logo.png)

[![Backers on Open Collective](https://opencollective.com/react-ace/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-ace/sponsors/badge.svg)](#sponsors) [![Greenkeeper badge](https://badges.greenkeeper.io/securingsincity/react-ace.svg)](https://greenkeeper.io/)

[![npm version](https://badge.fury.io/js/react-ace.svg)](http://badge.fury.io/js/react-ace)
[![CDNJS](https://img.shields.io/cdnjs/v/react-ace.svg)](https://cdnjs.com/libraries/react-ace)
[![Coverage Status](https://coveralls.io/repos/github/securingsincity/react-ace/badge.svg?branch=main)](https://coveralls.io/github/securingsincity/react-ace?branch=main)


A set of react components for Ace

_NOTE FOR VERSION 8!_ : We have stopped support for Brace and now use Ace-builds. Please read the documentation on how to migrate. Examples are being updated.

[DEMO of React Ace](https://securingsincity.github.io/react-ace/)

[DEMO of React Ace Split Editor](https://securingsincity.github.io/react-ace/split.html)

[DEMO of React Ace Diff Editor](https://securingsincity.github.io/react-ace/diff.html)

## Install

`npm install react-ace ace-builds`

`yarn add react-ace ace-builds`

## Basic Usage

```javascript
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);
```

## Examples

Checkout the `example` directory for a working example using webpack.

## Documentation

[Ace Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md)

[Split View Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Split.md)

[Diff Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Diff.md)

[How to add modes, themes and keyboard handlers](https://github.com/securingsincity/react-ace/blob/master/docs/Modes.md)

[Frequently Asked Questions](https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md)

[Migrate to version 8](https://github.com/securingsincity/react-ace/blob/master/docs/Migrate-v7-to-v8.md)

## Backers

Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-ace#backer)]

<a href="https://opencollective.com/react-ace/backer/0/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/1/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/2/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/3/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/4/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/5/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/6/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/7/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/8/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/9/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/10/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/11/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/12/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/13/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/14/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/15/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/16/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/17/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/18/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/19/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/20/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/21/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/22/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/23/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/24/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/25/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/26/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/27/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/28/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/backer/29/website" target="_blank"><img src="https://opencollective.com/react-ace/backer/29/avatar.svg"></a>

## Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-ace#sponsor)]

<a href="https://opencollective.com/react-ace/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/react-ace/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-ace/sponsor/9/avatar.svg"></a>

---
_Source: https://npm.io/package/react-ace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
