@lume/live-code

A HTML element that gives you a code editor with live results as you type.

#### npm install @lume/live-code

Compatible with Solid.js, Svelte, Vue, Angular, Ember, jQuery, React, Astro, Qwik.js, and every other web framework or library for creating HTML-based applications.

Examples:

- CodePen: https://codepen.io/trusktr/pen/PogvVBj
- Live demos on Lume's docs site are made with : https://docs.lume.io/examples/hello-world/

Run the examples

``
npm install && npm start
`

Usage

Specify content with the content attribute:

`html



`

Specify content with the content property:

`html



`

The content attribute or JS property is more useful for short pieces of text,
or for programmatically setting from a string, and with template systems that
set attributes from JS variables.

Here's a JSX example (useful in React, Preact, Solid.js, etc, requires using a compiler such as Babel, TypeScript, or ESBuild):

`js
function SomeComponent(props) {
// Set the content from a variable.
return
}
`

Here's a Lit html example (does not require any build step):

`js
render() {
return html
}
`

Here's a Solid.js html example in a Lume Element (does not require any build step):

`js
template() {
return html this.someCode}>
}
`

Etc. can be used in Vue, Svelte, Angular, and all the rest.

Specify a file with the src attribute or JS property, and text content will be fetched from that file:

`html

`

Lastly, use a