# @granite-elements/ace-widget
> LostInBrittany's Ace (http://ace.c9.io/) widget - Modern Lit implementation
Latest version **3.0.0** (published 2025-03-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install @granite-elements/ace-widget
pnpm add @granite-elements/ace-widget
yarn add @granite-elements/ace-widget
bun add @granite-elements/ace-widget
```
## Health
**Score 30/100 (F)** — status: maintenance-mode.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-03-18 |
| First published | 2018-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 77.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Horacio Gonzalez |
| Maintainers | lostinbrittany |
| Keywords | web-component, web-components, polymer, lostinbrittany, ace |
## Links
- npm: https://www.npmjs.com/package/@granite-elements/ace-widget
- Repository: https://github.com/LostInBrittany/ace-widget
- Issues: https://github.com/LostInBrittany/ace-widget/issues
- npm.io page: https://npm.io/package/@granite-elements/ace-widget
## Dependencies (2)
- [lit](https://npm.io/package/lit.md) ^3.1.0
- [ace-builds](https://npm.io/package/ace-builds.md) ^1.39.0
## Recent versions
- 3.0.0 (latest) — 2025-03-18
- 2.2.7-b1 — 2018-08-30
- 2.2.6 — 2018-08-07
- 2.2.5 — 2018-08-07
- 2.1.0 — 2018-08-06
- 2.0.4 — 2018-07-10
- 2.0.3 — 2018-07-09
- 2.0.2 — 2018-07-09
- 2.0.1 — 2018-07-09
- 2.0.0 — 2018-07-09
## README
[](https://vaadin.com/directory/component/LostInBrittanyace-widget)
[](https://vaadin.com/directory/component/LostInBrittanyace-widget)
[](https://www.webcomponents.org/element/LostInBrittany/ace-widget)
# ace-widget #
Even more embeddable code editor
Custom Element - just one tag, and no JS needed to provide
[Ace](http://ace.c9.io/) - The High Performance Code Editor
> Originally based on [pjako's fork](https://github.com/pjako/ace-element)
> of [PolymerLabs ace-element](https://github.com/PolymerLabs/ace-element).
>
> Modern implementation using Lit 3.1
>
> The legacy Polymer implementation is still available as `ace-widget-old.js`
## Doc and demo
https://lostinbrittany.github.io/ace-widget/
## Usage example
```html
```
## Install
Install the component using [npm](https://www.npmjs.com/):
```sh
$ npm i @granite-elements/ace-widget --save
```
Once installed, import it in your application:
```js
import '@granite-elements/ace-widget/ace-widget.js';
```
## Running demos and tests in browser
1. Fork the `ace-widget` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `ace-widget` directory, run `npm install` to install dependencies.
1. Serve the project using the development server:
`npm start`
This will automatically open the demo page in your default browser.
### Simple Test Page
A simplified test page is also available at `/demo/simple.html`. This page contains a minimal setup with just one editor instance and controls for toggling debug features. It's useful for quick testing and debugging.
## Attributes
Attribute | Type | Default | Description
--- | --- | --- | ---
`theme` | *String* | `` | `Editor#setTheme` at [Ace API](http://ace.c9.io/#nav=api&api=editor)
`mode` | *String* | `` | `EditSession#setMode` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`font-size` | *String* | `` | `Editor#setFontSize` at [Ace API](http://ace.c9.io/#nav=api&api=editor)
`softtabs` | *Boolean* | `` | `EditSession#setUseSoftTabs()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`tab-size` | *Boolean* | `` | `Session#setTabSize()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`readonly` | *Boolean* | `` | `Editor#setReadOnly()` at [Ace API](http://ace.c9.io/#nav=api&api=editor)
`wrap` | *Boolean* | `` | `Session#setWrapMode()` at [Ace API](http://ace.c9.io/#nav=api&api=edit_session)
`autoComplete` | *Object* | `` | Callback for `langTools.addCompleter` like the example at [Ace API](https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor)
`minlines` | *Number* | 15 | `Editor.setOptions({minlines: minlines})`
`maxlines` | *Number* | 30 | `Editor.setOptions({minlines: maxlines})`
`initialFocus`| *Boolean* | `` | If true, `Editor.focus()` is called upon initialisation
`placeholder` | *String* | `` | A placeholder text to show when the editor is empty
`verbose` | *Boolean* | `false` | If true, outputs basic debug information to the console
`debug` | *Boolean* | `false` | If true, outputs detailed debug information to the console
`disableWorker`| *Boolean*| `false` | If true, disables Ace editor worker scripts (useful for environments where workers don't work)
## Properties
Name | Description
--- | ---
`editor` | Ace [editor](http://ace.c9.io/#nav=api&api=editor) object.
`value` | [editor.get-/setValue()](http://ace.c9.io/#nav=api&api=editor)
## Events
Name | Description
--- | ---
`editor-content` | Triggered when editor content gets changed
`editor-ready` | Triggered once Ace editor instance is created.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Implementation Details
This component is built with Lit 3.1, a modern, lightweight web component library. It provides a clean, efficient wrapper around the Ace editor with reactive properties and a simple API.
## License
[MIT License](http://opensource.org/licenses/MIT)
---
_Source: https://npm.io/package/@granite-elements/ace-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._