<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

API Reference

Imports

Script

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>

CDN

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>

Bundler

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	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`	`"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts"`
[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
`disclosure`	Maps to any `<light-disclosure>` within `<light-pen>` shadow dom.
`disclosure-${language}`	deprecated in favor of `sandbox-disclosure-${language}`
`disclosure-summary`	re-exported summary from all `<light-disclosure>`
`disclosure-content`	re-exported content from all `<light-disclosure>`
`base:disclosure-content-base`	re-exported content-base from all `<light-disclosure>`
`sandbox-disclosure-summary`	re-exported summary from all `<light-disclosure>`
`sandbox-disclosure`	the `<light-disclosure>` wrapping around the js / css / html code respectively
`sandbox-disclosure-${language}`	the specific `<light-disclosure>` for the given language IE: `light-pen::part(sandbox-disclosure-css)`
`sandbox-disclosure-summary`	re-exported summary part from light-disclosure
`sandbox-disclosure-${language}-summary`	re-exported summary part from `light-disclosure-${language}`
`sandbox-disclosure-content`	re-exported content part from light-disclosure
`sandbox-disclosure-${language}-content`	re-exported content part from light-disclosure for the specific `${language}`
`sandbox-disclosure-content-base`	re-exported content-base part from light-disclosure
`sandbox-disclosure-${language}-content-base`	re-exported content-base part from light-disclosure for the specific `${language}`

<light-editor>

<light-preview>