{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-ace"],"cli":null},"imports":["import AceEditor from 'react-ace';","import ace from 'ace-builds'; ace.config.setOptions({ useWorker: false });","import 'ace-builds/src-noconflict/mode-javascript';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}