# 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( , 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)]

## 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)]

	Stars	Issues	Version	Updated	Created
ace-builds	2,994	0	1.36.2	21 days ago	9 years ago
brace	1,059	76	0.11.1	7 years ago	11 years ago
codemirror	70	0	6.0.1	2 years ago	12 years ago
monaco-editor	39,906	581	0.52.0	21 hours ago	8 years ago
react-ace	4,042	215	12.0.0	3 months ago	10 years ago
react-codemirror	1,554	68	1.0.0	7 years ago	9 years ago

ace-builds vs brace vs codemirror vs monaco-editor vs react-ace vs react-codemirror

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past