<light-pen>
A lightweight codepen-like editor. <light-pen> is ~15kb in size. Compared to ~90kb from CodeMirror and ~160kb from CodeSandbox. LightPen purposely is small and lightweight and is not intended to replace these tools. But rather
fill a gap for users who don’t need as much power.
Examples
Default Usage
This is kind of wild huh? We have a
code {
padding: 2px 6px;
display: inline-block;
font-size: 0.9em;
background-color: rgba(0,0,0,0.05);
border-radius: 4px;
}
<light-pen>
component running inside of a <light-pen> component!!
API Reference
Imports
HTML
<!-- Auto registers as <light-pen> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-pen/light-pen-register.js"></script>
HTML
<script type="module">
// Auto registers as <light-pen>
import "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-pen/light-pen-register.js"
// Manual Register
import LightPen from "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-pen/light-pen.js"
LightPen.define()
// => Registers as <light-pen>
</script>
JavaScript
// Auto registers as <light-pen>
import "light-pen/exports/components/light-pen/light-pen-register.js"
// Manual Register
import LightPen "light-pen/exports/components/light-pen/light-pen.js"
LightPen.define()
// => Registers as <light-pen>
Slots
| Name | Description |
|---|---|
html
|
HTML to insert |
css
|
CSS to insert |
js
|
JavaScript to insert |
title
|
The title to appear at the top of the editor |
Attributes
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
[Attribute + Property]
resizePosition
|
-
|
|
number
|
50
|
[Attribute + Property]
openLanguages
|
Languages to have open on initial render Comma separated list of elements to open on initial render “html,css,js” to open all. |
|
string
|
""
|
[Attribute + Property]
console
|
Not implemented. |
|
"enabled" | "disabled"
|
"disabled"
|
[Attribute]
sandbox-settings
[Property] sandboxSettings
|
-
|
|
string
|
""
|
[Attribute]
preserve-whitespace
[Property] preserveWhitespace
|
Passed down to the editors. |
|
boolean
|
false
|
Functions
| Name | Description | Parameters |
|---|---|---|
updateCachedWidth()
|
Sets an initial width so we dont need to keep computing getBoundingClientRect |
-
|
handleResize()
|
-
|
entries: ResizeObserverEntry[]
|
updateIframeContent()
|
-
|
-
|
handleResizerKeydown()
|
-
|
event: KeyboardEvent
|
updateResizePosition()
|
-
|
resizePosition
|
resetValues()
|
-
|
-
|
renderConsole()
|
-
|
-
|
handleDrag()
|
-
|
event: PointerEvent
|
Parts
| Name | Description |
|---|---|
base
|
The base wrapper |
sandbox
|
The wrapper around the editor and the iframe |
sandbox-header
|
The wrapper around the header area |