{"id":11643,"library":"react-ace","title":"React-Ace Editor Component","description":"React-Ace provides a set of React components that wrap the Ace Editor, a high-performance code editor, allowing developers to easily embed sophisticated code editing capabilities into their React applications. The current stable version is 14.0.1, which includes support for React 19. The project demonstrates an active release cadence with frequent minor and patch updates, alongside periodic major version bumps to incorporate new features, bug fixes, and dependency upgrades, often aligning with updates to `ace-builds` itself. Key differentiators include its robust API for controlling editor behavior, support for various modes, themes, and extensions through the `ace-builds` package, and dedicated components for split view and diff editing, offering a comprehensive solution for interactive code snippets, IDE-like features, or rich text editing with syntax highlighting.","status":"active","version":"14.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/securingsincity/react-ace","tags":["javascript","ace","ace editor","react-component","react","typescript"],"install":[{"cmd":"npm install react-ace","lang":"bash","label":"npm"},{"cmd":"yarn add react-ace","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-ace","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Ace Editor functionality, including modes, themes, and extensions. Required for React-Ace to function.","package":"ace-builds","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"AceEditor is a default export from the `react-ace` package.","wrong":"import { AceEditor } from 'react-ace'; // Incorrect named import","symbol":"AceEditor","correct":"import AceEditor from 'react-ace';"},{"note":"Configuration options for Ace Editor (like disabling workers or setting base path) are accessed via the `ace-builds` package's global `ace.config` object. Ensure `ace-builds` is imported or globally available.","wrong":"import { setOptions } from 'react-ace'; // Not directly exported by react-ace","symbol":"setOptions","correct":"import ace from 'ace-builds'; ace.config.setOptions({ useWorker: false });"},{"note":"Modes, themes, and extensions are imported for their side effects to register with the Ace Editor. They do not export symbols directly for consumption.","wrong":"import { javascript } from 'ace-builds/src-noconflict/mode-javascript';","symbol":"mode-javascript","correct":"import 'ace-builds/src-noconflict/mode-javascript';"}],"quickstart":{"code":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport AceEditor from \"react-ace\";\n\nimport \"ace-builds/src-noconflict/mode-javascript\";\nimport \"ace-builds/src-noconflict/theme-github\";\nimport \"ace-builds/src-noconflict/ext-language_tools\";\n\nfunction MyAceEditor() {\n  const onChange = (newValue) => {\n    console.log(\"Editor content changed:\", newValue);\n  };\n\n  return (\n    <AceEditor\n      mode=\"javascript\"\n      theme=\"github\"\n      onChange={onChange}\n      name=\"code-editor-instance\"\n      editorProps={{ $blockScrolling: true }}\n      setOptions={{\n        enableBasicAutocompletion: true,\n        enableLiveAutocompletion: true,\n        enableSnippets: true,\n        showLineNumbers: true,\n        tabSize: 2,\n      }}\n      style={{\n        width: '100%',\n        height: '300px'\n      }}\n      placeholder=\"Start coding here...\"\n    />\n  );\n}\n\nconst container = document.getElementById('example');\nif (container) {\n  const root = createRoot(container);\n  root.render(<MyAceEditor />);\n} else {\n  console.error(\"Root element 'example' not found.\");\n}\n","lang":"typescript","description":"This quickstart demonstrates rendering a basic AceEditor component with JavaScript mode, GitHub theme, and essential extensions like language tools for autocompletion. It logs changes to the console and includes basic editor options for enhanced usability."},"warnings":[{"fix":"Remove `brace` from your dependencies. Install `ace-builds` (`npm install ace-builds`). Update all `import 'brace/mode/...'` statements to `import 'ace-builds/src-noconflict/mode/...'` and similar for themes and extensions. Refer to the 'Migrate to version 8' documentation.","message":"Version 8.0.0 of `react-ace` dropped support for `brace` and now directly depends on `ace-builds`. This requires updating your imports and potentially refactoring how modes, themes, and extensions are loaded.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Ensure you `npm install ace-builds` alongside `react-ace`. Import necessary modes (e.g., `import 'ace-builds/src-noconflict/mode-javascript';`) and themes (e.g., `import 'ace-builds/src-noconflict/theme-github';`) at the top level of your application or before your AceEditor component renders.","message":"Modes, themes, and extensions for Ace Editor are not bundled with `react-ace`. They must be explicitly imported from `ace-builds` for the editor to function correctly with specific languages or visual styles.","severity":"gotcha","affected_versions":">=8.0.0"},{"fix":"While often included in examples for compatibility, consider if `$blockScrolling: true` is truly necessary. For optimal performance and modern rendering, try to structure your CSS and components to avoid situations where `$blockScrolling` would be required. If you encounter issues, consult Ace Editor's documentation for alternatives.","message":"The `$blockScrolling` property within `editorProps` is a legacy setting from older Ace Editor versions. While still supported, it's often recommended to avoid it or address the underlying reasons for its use (e.g., complex layout issues) in modern React development, as it can sometimes lead to performance concerns or unexpected behavior.","severity":"deprecated","affected_versions":">=8.0.0"},{"fix":"Always review the `peerDependencies` in `package.json` for `react-ace` and ensure your `react` and `react-dom` versions satisfy these requirements. Similarly, check the `ace-builds` version used by `react-ace` in its `package.json` to ensure compatibility, or update `ace-builds` if necessary.","message":"Updating `react-ace` to a new major version (e.g., v13 to v14) may introduce updated `peerDependencies` requirements for React itself, or updated `ace-builds` versions. Failing to update these alongside `react-ace` can lead to runtime errors or unexpected behavior.","severity":"gotcha","affected_versions":">=12.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `ace-builds` installed and that the necessary `ace-builds` files are imported, particularly if you are trying to configure `ace.config.setOptions` or access other global Ace properties.","cause":"The Ace Editor global object (`ace`) is not available because `ace-builds` has not been correctly imported or loaded.","error":"Error: 'ace' is not defined"},{"fix":"Make sure `import 'ace-builds';` or a specific mode/theme import that initializes the global `ace` object runs before any code attempting to access `ace.config` or similar properties.","cause":"Attempting to access `ace.config` before the `ace-builds` library has initialized the `ace` global object.","error":"TypeError: Cannot read properties of undefined (reading 'config')"},{"fix":"For component-specific options, use the `setOptions` prop directly on the `AceEditor` component. For global Ace configurations, ensure `ace-builds` imports are at the top of your main entry file or explicitly manage their loading order.","cause":"Trying to apply editor options via `setOptions` prop or `ace.config.setOptions` too early, before the AceEditor component or the Ace library itself has fully initialized.","error":"Warning: ace.config.set'setOptions' called before the editor is ready."}],"ecosystem":"npm"}