# @webcoder49/code-input

> An editable <textarea> that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.

Latest version **2.9.0** (published 2026-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @webcoder49/code-input
pnpm add @webcoder49/code-input
yarn add @webcoder49/code-input
bun add @webcoder49/code-input
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.9.0 |
| Published | 2026-09-18 |
| First published | 2023-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 699 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 241 |
| Author | Oliver Geer and contributors |
| Maintainers | webcoder49 |
| Keywords | front-end, syntax, highlight, textarea, editable, web-component, code-editor, text-editor |

## Links

- npm: https://www.npmjs.com/package/@webcoder49/code-input
- Repository: https://github.com/WebCoder49/code-input
- Homepage: https://code-input-js.org/
- Issues: https://github.com/WebCoder49/code-input/issues
- npm.io page: https://npm.io/package/@webcoder49/code-input

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 2.9.0 (latest) — 2026-09-18
- 2.8.4 — 2026-09-06
- 2.8.3 — 2026-07-03
- 2.8.2 — 2026-03-17
- 2.8.1 — 2026-01-21
- 2.8.0 — 2025-12-11
- 2.7.3 — 2025-12-07
- 2.7.2 — 2025-11-15
- 2.7.1 — 2025-09-30
- 2.7.0 — 2025-09-21
- 2.6.8 — 2025-09-18
- 2.6.7 — 2025-09-05
- 2.6.6 — 2025-08-19
- 2.6.5 — 2025-08-16
- 2.6.4 — 2025-08-13
- … 12 more at https://npm.io/package/@webcoder49/code-input/versions

## README

# [code-input.js](https://v2.code-input-js.org/)

![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![Website and Demos](https://img.shields.io/static/v1?label=&message=Website&color=444400&style=for-the-badge)](https://code-input-js.org)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=black&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![Codeberg](https://img.shields.io/static/v1?label=&message=Codeberg&color=navy&style=for-the-badge&logo=codeberg)](https://codeberg.org/code-input-js/code-input-js)[![Yarn](https://img.shields.io/static/v1?label=&message=Yarn&color=purple&style=for-the-badge&logo=yarn)](https://yarnpkg.com/package?name=@webcoder49/code-input)[![NPM](https://img.shields.io/static/v1?label=&message=NPM&color=red&style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@webcoder49/code-input)

[![View License](https://img.shields.io/github/license/webcoder49/code-input?color=darkgreen&style=for-the-badge)](LICENSE) [![View Releases](https://img.shields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases) 
> **An editable <textarea> that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.**
> 
> Aiming to be more flexible, lightweight, modular, progressively enhanced and standards-based than the alternatives, we support HTML forms, the `<textarea>` JavaScript interface, more languages and more use cases.

---

Demos and usage instructions are available at <https://code-input-js.org> and [the `docs` directory](docs/), to let you get started quickly!

---

A lightweight setup like the animation below is still the default for `code-input.js`, but a wide range of plugins are available to modularly and progressively enhance the experience - see [the website](https://code-input-js.org) for interactive demos!

![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.*

## Contributing
If you have any features you would like to add to `code-input` as plugins or core functionality, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).

**If you find a sensitive security vulnerability in the code-input.js library, please email the maintainer Oliver Geer at [security@webcoder49.dev](mailto:security@webcoder49.dev), optionally using [this encryption key](https://ogeer.org#pgp). GitHub security advisories (different to the more general "issues") are also accepted.**


|[![Contributors](https://contrib.rocks/image?repo=WebCoder49%2Fcode-input)](https://github.com/WebCoder49/code-input/graphs/contributors)|
|---|
|...have contributed pull requests so far.|
|(source: [contrib.rocks](https://contrib.rocks))|

---
_Source: https://npm.io/package/@webcoder49/code-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._