Get started with react-ace CDN

MIT licensed

React-ACE is a React component for integrating the ACE code editor into React applications.

Tags:
  • ace
  • ace editor
  • react-component
  • react
  • brace

Stable version

Copied!

How to start using react-ace CDN


import React from 'react';
import 'react-ace/dist/react-ace.css'; // Import the CSS file

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <div style={{ height: '50vh' }}>
        <h1>Simple React Ace Editor Example</h1>
        <div className="react-ace" editorProps={{ mode: 'html' }}>
          <p>Type some HTML here!</p>
        </div>
      </div>
      <div style={{ height: '50vh' }}>
        <h1>JavaScript Example</h1>
        <div className="react-ace" editorProps={{ mode: 'javascript' }}>
          <p>Type some JavaScript here!</p>
        </div>
      </div>
    </div>
  );
};

export default App;
Copied!
Copied!
Copied!

All versions