element

A customizeable element that makes a code editor powered by CodeMirror.

Use it declaratively in plain HTML, or with web frameworks and libraries like Lit, Vue, Svelte, Solid.js, Angular, Ember, jQuery, React, and all others.

npm install @lume/element

Live demos

- Example on CodePen
- Examples in Lume's Docs

Usage Example

Use to create a text editor:

``html
id="editor"
basic-setup
language="html"
stylesheet="
/ Override the active line background color. /
.cm-activeLine {
background-color: #ff660044 !important
}
"
>


`

For more usage examples, see ./examples/index.html. To
run the examples, clone the repo, then run npm install && npm run examples.

Basic Usage

See the example on CodePen.

TypeScript

$3

If you've configured Solid.js for use with TypeScript,
then simply importing code-mirror-el will register the JSX types for use
in Solid.js JSX templates.

`tsx
import {createSignal} from 'solid-js'
import 'code-mirror-el' // This is all that is needed.

function SomeComponent() {
const [content, setContent] = createSignal('...')
// ...
return
}
`

$3

To get type checking in React JSX templates (or Preact JSX with React compat
enabled in your tsconfig), import the React JSX types directly, as they will not
be defined automatically like JSX types for Solid.js.

> [!Note]
> React still does not yet have syntax for sending non-string data via JS
> properties to custom elements, so you _must_ use a ref for that in React.

`tsx
import {useState, useRef, useEffect} from 'react'
import 'code-mirror-el'
// Import JSX types specifically for React (or Preact with React compat enabled in
// your tsconfig).
import type {} from 'code-mirror-el/dist/CodeMirror.react-jsx'

function SomeComponent() {
const [content, setContent] = useState('...')
// ...
return
}
`

Note that in React 18 and below, all types are simply strings, and for
multi-word properties use the dash-case attribute name. In React 19 and higher
with improved Custom Elements support for setting element JS properties, use the
camelCase prop names with full non-string type support.

React <= 18:

`jsx
const styleString = '...CSS code here...'
return
`

React >= 19:

`jsx
// This will not work in React 18 and below!
const styleSheet = new CSSStyleSheet()
stylesheet.replaceSync('...CSS code here...')
return
`

API

$3

> [!Note]
> Attributes in dash-case have an equivalent camelCase JS property. F.e. the
> strip-indent attribute maps its value to a stripIndent property.

> [!Note]
> Any non-string or non-boolean values described below are passed to the JS property directly,
> not to the attribute.

#### basic-setup

When true (when the attribute exists), CM's basicSetup will be applied.

Note, use basicSetup in React 19+.

#### content

A string to set the content of the editor to.

#### strip-indent

When true (default) common indentation will be removed. Useful for
example if the content property is being set with a template string and
the content is indented to make the outer code more readable but the
indentation is undersired in the result inside the editor. Set the attribute
strip-indent="false" to disable.

Note, use stripIndent in React 19+.

#### trim

When true (default) trims leading and trailing whitespace from content.

#### language

The language to use. It should be a LanguageSupport object, an empty
extension (for plain text mode), or the strings "html", "js", or "text"
which are shortcuts for html(), javascript(), and [], respectively.
Defaults to "js".

#### stylesheet

CSS styles to apply in 's ShadowRoot. Useful for overriding
CM styles. Defaults to a style that hard codes the activeLine style to
overcome issues with selections not being visible on the active line
(https://github.com/vadimdemedes/thememirror/issues/8).

The value can be

- a string containing CSS code
- a