# light-pen

> A lightweight component library for code editing and syntax highlighting

Latest version **4.4.0** (published 2025-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install light-pen
pnpm add light-pen
yarn add light-pen
bun add light-pen
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.4.0 |
| Published | 2025-10-25 |
| First published | 2023-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 215.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | KonnorRogers |
| Maintainers | konnor_rogers |
| Keywords | web-components, codepen, syntax highlighting, editor |

## Links

- npm: https://www.npmjs.com/package/light-pen
- Repository: https://github.com/KonnorRogers/light-pen
- Issues: https://github.com/KonnorRogers/light-pen/issues
- npm.io page: https://npm.io/package/light-pen

## Dependencies (6)

- [lit](https://npm.io/package/lit.md) ^3.1.4
- [diff](https://npm.io/package/diff.md) ^5.2.0
- [prism-esm](https://npm.io/package/prism-esm.md) 1.29.0-fix.4
- [web-component-define](https://npm.io/package/web-component-define.md) ^2.0.11
- [form-associated-helpers](https://npm.io/package/form-associated-helpers.md) ^0.0.10
- [@open-wc/semantic-dom-diff](https://npm.io/package/@open-wc/semantic-dom-diff.md) ^0.20.1

## 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

- 4.4.0 (latest) — 2025-10-25
- 4.3.0 — 2025-07-05
- 4.2.6 — 2025-05-02
- 4.2.5 — 2025-03-11
- 4.2.4 — 2025-03-07
- 4.2.3 — 2025-03-07
- 4.2.2 — 2025-01-03
- 4.2.1 — 2025-01-03
- 4.2.0 — 2024-11-05
- 4.1.1 — 2024-11-03
- 4.1.0 — 2024-08-16
- 4.0.0 — 2024-08-02
- 3.1.2 — 2024-07-18
- 3.1.1 — 2024-06-01
- 3.1.0 — 2024-05-28
- … 19 more at https://npm.io/package/light-pen/versions

## README

# Light(weight) Code(pen)

## Demo

<https://konnorrogers.github.io/light-pen>

## Purpose

A small lightweight editor using `<pre><code></code></pre>` and a `<textarea>`

Inspired by Chris Ferdinandi

## Install

```
npm install light-pen
```

## Getting started

```js
// Auto-register <light-pen>
import "light-pen";

// Registry yourself
import LightPen from "light-pen/exports/components/light-pen/light-pen.js";

LightPen.define(); // Registers `<light-pen>`

// Register under another name
import LightPen from "light-pen/exports/components/light-pen/light-pen.js";
LightPen.define("other-name");
```

## Usage

```html
<light-pen></light-pen>
```

That's it!

### Slotting in HTML / CSS / JS

```html
<light-pen>
  <script type="text/plain" slot="html">
    <div style="color: red;">
      <div>Hi there friends</div>
    </div>

    <p>
      Sup dude
    </p>
  </script>

  <script type="text/plain" slot="css">
    p {
      color: green;
    }
  </script>

  <script type="text/plain" slot="js">
    console.log("Hi")
  </script>
</light-pen>
```

### Changing the title

```html
<light-pen>
  <div slot="title">My Awesome Editor</div>
</light-pen>
```

### Opening languages by default

`<light-pen>` Takes a string of comma separated languages to open on initial render.

```
<light-pen open-languages="html,css,js">
</light-pen>
```

More to come for more docs coming on how to change things!

## Roadmap

- [ ] - Implement an extendable `LightPenBase` which includes a pluggable syntax highlighter and theme.
- [ ] - Implement `<textarea>` rendering hooks to add CodeMirror for more robuste setups.
- [ ] - Add vertical resizing of `<textarea>`
- [ ] - More documentation around customization.
- [ ] - Add a console logger
    > > > > > > > 7b592c8f5f05ed82d439d7950450eec06dc3ab66

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