diff --git a/docs/Rakefile b/docs/Rakefile
index d96d383a..131a9071 100644
--- a/docs/Rakefile
+++ b/docs/Rakefile
@@ -27,12 +27,12 @@ end
 namespace :frontend do
   desc "Build the frontend with esbuild for deployment"
   task :build do
-    sh "yarn run esbuild"
+    sh "pnpm run esbuild"
   end
 
   desc "Watch the frontend with esbuild during development"
   task :dev do
-    sh "yarn run esbuild-dev"
+    sh "pnpm run esbuild-dev"
   rescue Interrupt
   end
 end
diff --git a/docs/frontend/styles/components/_syntax_block.css b/docs/frontend/styles/components/_syntax_block.css
index 5455e5b8..b5781db9 100644
--- a/docs/frontend/styles/components/_syntax_block.css
+++ b/docs/frontend/styles/components/_syntax_block.css
@@ -33,7 +33,7 @@
 :is(.language-bash, .language-shell, .language-zsh, .language-sh).highlighter-rouge pre.highlight::before {
   content: "$";
   user-select: none;
-  vertical-align: -2px;
+  /* vertical-align: -2px; */
   padding-inline-end: 0.45em;
   color: gray;
 }
diff --git a/docs/frontend/styles/components/_tables.css b/docs/frontend/styles/components/_tables.css
index 60ffb884..1e04f0ac 100644
--- a/docs/frontend/styles/components/_tables.css
+++ b/docs/frontend/styles/components/_tables.css
@@ -16,7 +16,7 @@ th {
 
 th,
 td {
-  text-align: start;
+  text-align: center;
   padding: 1rem;
 }
 
diff --git a/docs/plugins/builders/component_generator.rb b/docs/plugins/builders/component_generator.rb
index b5d0431e..a81f32e2 100644
--- a/docs/plugins/builders/component_generator.rb
+++ b/docs/plugins/builders/component_generator.rb
@@ -249,6 +249,7 @@ def events_table(events)
             #{event.name}
           </td>
           <td>
+            #{event.description}
           </td>
         </tr>
       HTML
diff --git a/docs/src/_layouts/home.erb b/docs/src/_layouts/home.erb
index aeda70c1..0b4a1d47 100644
--- a/docs/src/_layouts/home.erb
+++ b/docs/src/_layouts/home.erb
@@ -14,7 +14,7 @@ layout: default
   <ul class="call-to-action__items" style="list-style: none;">
     <% resource.data.call_to_action_items.each do |item| %>
       <li>
-        <sl-button variant="<%= item[:type] %>" href="<%= item[:href] %>" class="call-to-action" pill>
+        <sl-button variant="<%= item[:type] %>" href="<%= site.base_path + "/" + item[:href] %>" class="call-to-action" pill>
           <%= item[:text].to_s.html_safe %>
         </sl-button>
       </li>
diff --git a/exports/events/light-resize-event.js b/exports/events/light-resize-event.js
new file mode 100644
index 00000000..9907d68a
--- /dev/null
+++ b/exports/events/light-resize-event.js
@@ -0,0 +1,12 @@
+// @ts-check
+import { BaseEvent } from "../../internal/base-event.js"
+
+export class LightResizeEvent extends BaseEvent {
+  /**
+   * @param {Partial<EventInit & { height: number, width: number }>} [options={}]
+   */
+  constructor (options = {}, name = "light-resize") {
+    super(name, options)
+  }
+}
+
diff --git a/exports/light-editor.js b/exports/light-editor.js
index 9ec570bb..12a6b7b9 100644
--- a/exports/light-editor.js
+++ b/exports/light-editor.js
@@ -1,17 +1,16 @@
 import { html } from "lit";
-import { BaseElement } from "../internal/base-element.js";
-import { baseStyles } from "./base-styles.js";
-import { styles } from "./light-editor.styles.js";
-import { theme } from "./default-theme.styles.js";
-import { live } from "lit/directives/live.js";
-
 import HighlightJS from 'highlight.js/lib/core';
 import JavaScript from 'highlight.js/lib/languages/javascript';
 import HTML from 'highlight.js/lib/languages/xml';
 import CSS from 'highlight.js/lib/languages/css';
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { dedent } from "../internal/dedent.js";
-import { createRef, ref } from "lit/directives/ref.js";
+import { ref } from "lit/directives/ref.js";
+
+import { BaseElement } from "../internal/base-element.js";
+import { baseStyles } from "./base-styles.js";
+import { styles } from "./light-editor.styles.js";
+import { theme } from "./default-theme.styles.js";
+import { LightResizeEvent } from "./events/light-resize-event.js"
 
 HighlightJS.registerLanguage('javascript', JavaScript);
 HighlightJS.registerLanguage('xml', HTML);
@@ -22,6 +21,10 @@ HighlightJS.registerLanguage('css', CSS);
  * @customElement
  * @tagname light-editor
  *
+ * @event {Event} light-change - Re-emits the textarea's "change" event
+ * @event {Event} light-selectionchange - Re-emits the textarea's "selectionchange" event
+ * @event {Event} light-input - Re-emits the textarea's "input" event
+ *
  */
 export default class LightEditor extends BaseElement {
   static baseName = "light-editor"
@@ -60,6 +63,27 @@ export default class LightEditor extends BaseElement {
     this.textarea = null
   }
 
+  /**
+   * @param {ResizeObserverEntry[]} entries
+   */
+  handleTextAreaResize (entries) {
+    const { target } = entries[0]
+    const {
+      left, right,
+      top, bottom
+    } = entries[0].contentRect;
+    const width = left + right
+    const height = top + bottom
+
+    // @ts-expect-error
+    target.parentElement.style.setProperty("--textarea-height", `${height}px`)
+
+
+    /** @internal */
+    this.dispatchEvent(new LightResizeEvent({height, width}))
+    // One day we'll allow the textarea to resize the width.
+    // target.parentElement.style.setProperty("--textarea-width", `${width}px`)
+  }
 
   render () {
     const language = this.language
@@ -67,7 +91,7 @@ export default class LightEditor extends BaseElement {
     const highlightedCode = this.value ? unsafeHTML(this.highlightCode({ code: this.value, language })) : ""
 
     return html`
-			<div class="editor" part="editor">
+			<div class="base" part="base">
         <!-- This is where the fancy syntax highlighting comes in -->
 				<pre
           id="pre-${language}"
@@ -81,13 +105,13 @@ export default class LightEditor extends BaseElement {
         <!-- IMPORTANT! There must be no white-space above. -->
 				<textarea
           id="textarea-${language}"
-          ${ref(this.textareaChanged)}
           data-code-lang=${language}
           part="textarea textarea-${language}"
           spellcheck="false"
           autocorrect="off"
           autocapitalize="off"
           translate="no"
+          ${ref(this.textareaChanged)}
           @keydown=${this.keydownHandler}
           @selectionchange=${/** @param {Event} e */ (e) => {
             this.dispatchEvent(new Event("light-selectionchange", { bubbles: true, composed: true }))
@@ -102,7 +126,7 @@ export default class LightEditor extends BaseElement {
             this.dispatchEvent(new Event("light-change", { bubbles: true, composed: true }))
           }}
           @scroll=${this.syncScroll}
-          value=${this.value}
+          .value=${this.value}
         >${this.value}</textarea>
 			</div>
 		`
@@ -117,15 +141,19 @@ export default class LightEditor extends BaseElement {
     }
 
     const textarea = element
-    const self = this
 
-    this.textareaObserver = new MutationObserver((mutationRecords) => {
+    this.textareaResizeObserver = new ResizeObserver((entries) => this.handleTextAreaResize(entries))
+
+    this.textareaResizeObserver.observe(textarea)
+
+    this.textareaMutationObserver = new MutationObserver((mutationRecords) => {
+      // We actually don't care about what the mutation is, just update and move on.
       // for (const mutation of mutationRecords) {
       // }
       this.value = textarea.value
     })
 
-    this.textareaObserver.observe(textarea, {
+    this.textareaMutationObserver.observe(textarea, {
       characterData: true,
       subtree: true
     })
@@ -162,6 +190,12 @@ export default class LightEditor extends BaseElement {
     pre.scrollLeft = textarea.scrollLeft;
   }
 
+  disconnectedCallback () {
+    this.textareaResizeObserver?.disconnect()
+    this.textareaMutationObserver?.disconnect()
+    super.disconnectedCallback()
+  }
+
   /**
    * @param {KeyboardEvent} evt
    */
diff --git a/exports/light-editor.styles.js b/exports/light-editor.styles.js
index 0fe6a5c4..5b375377 100644
--- a/exports/light-editor.styles.js
+++ b/exports/light-editor.styles.js
@@ -1,7 +1,7 @@
 import { css } from "lit"
 
 export const styles = css`
-  [part~="editor"] {
+  [part~="base"] {
     display:grid;
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(0, 1fr);
@@ -50,10 +50,22 @@ export const styles = css`
 	  background-color: #f7f7f7;
   }
 
+  [part~="pre"] {
+    height: var(--textarea-height, auto);
+    max-height: var(--textarea-height, auto);
+    width: var(--textarea-width, auto);
+    max-width: var(--textarea-width, auto);
+  }
+
   [part~="pre"],
   [part~="code"],
   [part~="textarea"] {
 	  font-family: Menlo, Monaco, "Courier New", monospace;
 	  font-size: 0.875rem;
   }
+
+  [part~="textarea"]::selection {
+    color: inherit;
+    background-color: rgba(0,0,0,0.15);
+  }
 `
diff --git a/exports/light-pen.js b/exports/light-pen.js
index 0b568786..0c7578f8 100644
--- a/exports/light-pen.js
+++ b/exports/light-pen.js
@@ -4,14 +4,6 @@ import { html } from "lit"
 import { styles } from "./light-pen.styles.js"
 import { when } from "lit/directives/when.js";
 
-import { theme } from './default-theme.styles.js'
-
-import HighlightJS from 'highlight.js/lib/core';
-import JavaScript from 'highlight.js/lib/languages/javascript';
-import HTML from 'highlight.js/lib/languages/xml';
-import CSS from 'highlight.js/lib/languages/css';
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { ref } from "lit/directives/ref.js";
 import { baseStyles, buttonStyles } from "./base-styles.js";
 
 import { clamp } from '../internal/clamp.js'
@@ -22,11 +14,6 @@ import { resizeIcon } from "../internal/resize-icon.js";
 import { BaseElement } from "../internal/base-element.js";
 import LightEditor from "./light-editor.js";
 
-// Then register the languages you need
-HighlightJS.registerLanguage('javascript', JavaScript);
-HighlightJS.registerLanguage('xml', HTML);
-HighlightJS.registerLanguage('css', CSS);
-
 /**
  * @typedef {"html" | "css" | "js"} SupportedLanguages
  * @typedef {HTMLTextAreaElement | HTMLScriptElement | HTMLTemplateElement} SafeTemplateElements
@@ -69,7 +56,7 @@ export default class LightPen extends BaseElement {
     htmlResizeObserver: { attribute: false },
     jsResizeObserver: { attribute: false },
     cssResizeObserver: { attribute: false },
-    resizing: { attribute: false },
+    _resizing: { attribute: false },
   }
 
   static {
@@ -98,24 +85,6 @@ export default class LightPen extends BaseElement {
      */
     this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
 
-    /**
-     * @property
-     * @type {ResizeObserver}
-     */
-    this.htmlResizeObserver = new ResizeObserver((entries) => this.handleTextAreaResize(entries))
-
-    /**
-     * @property
-     * @type {ResizeObserver}
-     */
-    this.jsResizeObserver = new ResizeObserver((entries) => this.handleTextAreaResize(entries))
-
-    /**
-     * @property
-     * @type {ResizeObserver}
-     */
-    this.cssResizeObserver = new ResizeObserver((entries) => this.handleTextAreaResize(entries))
-
     /**
      * @attribute
      * @reflect
@@ -152,27 +121,6 @@ export default class LightPen extends BaseElement {
      */
     this.consoleText = ""
 
-    /**
-     * What to reset the HTML to.
-     * @property
-     * @type {string}
-     */
-    this.htmlReset = ""
-
-    /**
-     * What to reset the CSS to.
-     * @property
-     * @type {string}
-     */
-    this.cssReset = ""
-
-    /**
-     * What to reset the JS to.
-     * @property
-     * @type {string}
-     */
-    this.jsReset = ""
-
     /**
      * @property
      * @internal
@@ -189,7 +137,33 @@ export default class LightPen extends BaseElement {
     /**
      * @internal
      */
-    this.resizing = false
+    this._resizing = false
+
+    this.cssCode = ""
+    this.htmlCode = ""
+    this.jsCode = ""
+  }
+
+
+  /**
+   * @type {undefined | null | LightEditor}
+   */
+  get jsEditor () {
+    return this.shadowRoot?.querySelector("#editor-js")
+  }
+
+  /**
+   * @type {undefined | null | LightEditor}
+   */
+  get cssEditor () {
+    return this.shadowRoot?.querySelector("#editor-css")
+  }
+
+  /**
+   * @type {undefined | null | LightEditor}
+   */
+  get htmlEditor () {
+    return this.shadowRoot?.querySelector("#editor-html")
   }
 
   /**
@@ -202,35 +176,9 @@ export default class LightPen extends BaseElement {
 
     this.updateComplete.then(() => {
       this.resizeObserver.observe(this)
-
-      /*
-       * Grab reset values so we can reset the inputs
-       */
-      this.htmlReset = this.htmlTextArea?.value || ""
-      this.cssReset = this.cssTextArea?.value || ""
-      this.jsReset = this.jsTextArea?.value || ""
     });
   }
 
-  /**
-   * @param {ResizeObserverEntry[]} entries
-   */
-  handleTextAreaResize (entries) {
-    const { target } = entries[0]
-    const {
-      // left, right,
-      top, bottom
-    } = entries[0].contentRect;
-    // const width = left + right
-    const height = top + bottom
-
-    // @ts-expect-error
-    target.parentElement.style.setProperty("--textarea-height", `${height}px`)
-
-    // One day we'll allow the textarea to resize the width.
-    // target.parentElement.style.setProperty("--textarea-width", `${width}px`)
-  }
-
   /**
    * Sets an initial width so we dont need to keep computing getBoundingClientRect
    */
@@ -260,9 +208,6 @@ export default class LightPen extends BaseElement {
     return this.shadowRoot?.querySelector("iframe")
   }
 
-  handleEditorInput () {
-  }
-
   updateIframeContent () {
     const iframeElem= this.iframeElem
     if (iframeElem == null) return
@@ -288,10 +233,6 @@ export default class LightPen extends BaseElement {
     iframeElem.contentWindow?.document.close()
   }
 
-  inputHandler () {
-    this.updateCode()
-  }
-
   /**
    * @param {import("lit").PropertyValues} changedProperties
    */
@@ -310,37 +251,7 @@ export default class LightPen extends BaseElement {
 
   disconnectedCallback() {
     super.disconnectedCallback()
-
-    this.htmlTextArea && this.htmlResizeObserver.disconnect()
-    this.cssTextArea && this.cssResizeObserver.disconnect()
-    this.jsTextArea && this.jsResizeObserver.disconnect()
-  }
-
-  /**
-   * @param {HTMLTextAreaElement} textarea
-   */
-  htmlTextAreaChanged (textarea) {
-    if (!textarea) return
-    this.htmlTextArea = textarea
-    this.htmlResizeObserver.observe(textarea)
-  }
-
-  /**
-   * @param {HTMLTextAreaElement} textarea
-   */
-  cssTextAreaChanged (textarea) {
-    if (!textarea) return
-    this.cssTextArea = textarea
-    this.cssResizeObserver.observe(textarea)
-  }
-
-  /**
-   * @param {HTMLTextAreaElement} textarea
-   */
-  jsTextAreaChanged (textarea) {
-    if (!textarea) return
-    this.jsTextArea = textarea
-    this.jsResizeObserver.observe(textarea)
+    this.resizeObserver.disconnect()
   }
 
   /**
@@ -384,30 +295,12 @@ export default class LightPen extends BaseElement {
   }
 
 
-  /**
-   * Lovely helper to scoop up our html, css, and js code
-   */
-  updateCode () {
-    this.cssCode = this.cssTextArea?.value
-    this.htmlCode = this.htmlTextArea?.value
-    this.jsCode = this.jsTextArea?.value
-  }
-
   resetValues () {
-    if (this.htmlTextArea) {
-      this.htmlCode = this.htmlReset
-      this.htmlTextArea.value = this.htmlReset
-    }
-
-    if (this.cssTextArea) {
-      this.cssCode = this.cssReset
-      this.cssTextArea.value = this.cssReset
-    }
+    this.htmlCode = this.htmlEditor?.getAttribute("value") || ""
+    this.cssCode = this.cssEditor?.getAttribute("value") || ""
+    this.jsCode = this.cssEditor?.getAttribute("value") || ""
+    this.requestUpdate()
 
-    if (this.jsTextArea) {
-      this.jsCode = this.jsReset
-      this.jsTextArea.value = this.jsReset
-    }
   }
 
   // setupIframeLogging() {
@@ -462,9 +355,10 @@ export default class LightPen extends BaseElement {
 
     this[`${codeType}Code`] = code
 
-    const textArea = this[`${codeType}TextArea`]
+    const textArea = this[`${codeType}Editor`]
 
     if (textArea && code) {
+      textArea.setAttribute("value", code)
       textArea.value = code
     }
   }
@@ -494,7 +388,7 @@ export default class LightPen extends BaseElement {
         <slot name="js" @slotchange=${this.handleTemplate}></slot>
       </div>
 
-      <div part="base" ?resizing=${this.resizing}>
+      <div part="base" ?resizing=${this._resizing}>
 			  <div part="sandbox">
 				  <div part="sandbox-header">
             <slot name="title">
@@ -528,7 +422,7 @@ export default class LightPen extends BaseElement {
             @keydown=${this.handleResizerKeydown}
             @pointerdown=${this.handleDrag}
             @touchstart=${this.handleDrag}
-            class=${this.resizing ? "is-active" : ""}
+            class=${this._resizing ? "is-active" : ""}
           >
             <slot name="panel-resize-icon">
               ${resizeIcon}
@@ -573,11 +467,11 @@ export default class LightPen extends BaseElement {
       this.iframeElem.style.pointerEvents = "none"
     }
 
-    this.resizing = true
+    this._resizing = true
 
     drag(this, {
       onMove: (x, _y) => {
-        this.resizing = true
+        this._resizing = true
         let newPositionInPixels = x;
 
 
@@ -590,7 +484,7 @@ export default class LightPen extends BaseElement {
           this.iframeElem.style.pointerEvents = "auto"
         }
 
-        this.resizing = false
+        this._resizing = false
       },
       initialEvent: event
     });
@@ -614,8 +508,14 @@ export default class LightPen extends BaseElement {
       <light-editor
         id=${`editor-${language}`}
         part=${`sandbox-editor sandbox-editor--${language}`}
+        exportparts="
+          base:sandbox-editor__base,
+          pre:sandbox-editor__pre,
+          code:sandbox-editor__code,
+          textarea:sandbox-editor__textarea
+        "
         language=${highlightLang}
-        value=${this[`${language}Code`]}
+        .value=${this[`${language}Code`]}
         @light-input=${/** @param {Event} e */ (e) => {
           this[`${language}Code`] = /** @type {LightEditor} */ (e.currentTarget).value
         }}
diff --git a/exports/light-pen.styles.js b/exports/light-pen.styles.js
index f465486f..9a4c0eee 100644
--- a/exports/light-pen.styles.js
+++ b/exports/light-pen.styles.js
@@ -24,7 +24,7 @@ export const styles = css`
 }
 
 [part~="sandbox-editor"] {
-  max-height: var(--textarea-height, 33vh);
+  height: var(--textarea-height, 33%);
 }
 
 [part~="base"] {
diff --git a/internal/base-event.js b/internal/base-event.js
new file mode 100644
index 00000000..576cb2d9
--- /dev/null
+++ b/internal/base-event.js
@@ -0,0 +1,11 @@
+export class BaseEvent extends Event {
+  /**
+   * @param {string} name
+   * @param {EventInit} [options={}]
+   */
+  constructor (name, options = {}) {
+    if (options.bubbles == null) options.bubbles = true
+    if (options.composed == null) options.composed = true
+    super(name, options)
+  }
+}
diff --git a/package.json b/package.json
index 2d3252a8..85dcf96e 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "start": "web-dev-server --watch",
-    "start:docs": "cd docs && overmind start -f Procfile.dev",
+    "start:docs": "cd docs && bin/bridgetown start",
     "setup": "pnpm install && cd docs && pnpm install && bundle install",
     "build:docs": "cd docs && pnpm run build && touch output/.nojekyll",
     "build:api": "typedoc --out ./docs/output/references/api/ ./exports/**/*.js",