https://github.com/catpea/hoity-toity
Feature Packed Code Editor Web Component
https://github.com/catpea/hoity-toity
codeeditor webcomponents
Last synced: 3 months ago
JSON representation
Feature Packed Code Editor Web Component
- Host: GitHub
- URL: https://github.com/catpea/hoity-toity
- Owner: catpea
- Created: 2025-09-27T11:21:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-09-27T22:11:00.000Z (4 months ago)
- Last Synced: 2025-10-07T15:27:56.969Z (3 months ago)
- Topics: codeeditor, webcomponents
- Language: JavaScript
- Homepage: https://catpea.github.io/hoity-toity/
- Size: 345 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hoity-toity
Hoity Toity: Feature Packed Code Editor Web Component
language support: javascript, css, html, markdown, json, and xml
```bash
npm i hoity-toity;
```
```HTML
demo
Hello, world!
const js = document.getElementById("js");
js.addEventListener('change', (e)=>console.log(e.detail.value));
```
---
## Key Features:
1. **Multi-language Support**: The component supports JavaScript, HTML, and CSS through CodeMirror's language modules
2. **Shadow DOM**: Uses Shadow DOM for style encapsulation
3. **Reactive Attributes**: Responds to `language`, `theme`, and `value` attribute changes
4. **Custom Events**: Emits a `change` event when content is modified
5. **Public Methods**: Exposes `getValue()`, `setValue()`, and `focus()` methods
## Usage Example:
```html
const editor = document.getElementById('editor');
editor.addEventListener('change', (e) => {
console.log('Content changed:', e.detail.value);
});
```