@wobble/code

Code editor for wwwobble, also usable on its own as a custom element. You can add this to any webpage(!!) to make a portion of the page editable. Built using Codemirror6, SolidJS, and morphdom.

Live Demo

Edit the heading of this page:

Edit the above wobble-code element

How does it work?

<wobble-code> is a custom element that renders an in-browser HTML editor for html elements on the current page. Passing in any selector for a DOM element will render the html of that element. When the element is updated, the code in the editor will update to reflect the changes to the DOM.

Editing the code in the editor causes live updates to the element, using morphdom to minimize DOM updates. This allows elements with complex state, such as iframes or embedded videos, to preserve their internal state as the page is being updated.

The editor also supports dangling text nodes and elements outside of the original component, and attempts to reconcile the elements that have been added to the page with the existing elements.

Using in wwwobble

Use the + button to add a new element, and select wobble-code from the list.

Using in any website

To use the wobble-code custom element, include the script tag in your html:

 <script src="https://cdn.jsdelivr.net/npm/@wobble/code/dist/wobble-code-element.js"></script>

Full example

<!DOCTYPE html>
<html lang="en">
  <script src="https://cdn.jsdelivr.net/npm/@wobble/code/dist/wobble-code-element.js"></script>
  <body>
    <div id="test-element"> MY TEST ELEMENT</div>
    <wobble-code element="#test-element"></wobble-code>
  </body>
</html>

Attributes

element: A selector for an HTML element to render. body would display the entire document body. #test-element will display the element with id `test-element.
showContainer: when true, includes the containing element (similar to element.outerHTML), when false, only displays the contents of the element.

SolidJS Component

A reactive SolidJS component identical to the custom element above.

Usage

import { WobbleCode } from '@wobble/code'

<WobbleCode element={myElement} showContainer={false} />

The only difference between the WobbleCode component and the custom element, is that instead of passing an a selector via the element property, element should be the actual HTML element.

Styling using css variables

The following CSS variables can be used to style the code editor:

—cm-background
—cm-foreground
—cm-caret
—cm-selection
—cm-selection-match
—cm-line-highlight
—cm-line-background
—cm-gutter-background
—cm-gutter-foreground

Inspired by https://codeberg.org/uzu/strudel/src/branch/main/packages/codemirror

Guerilla editing

Paste the following in the browser console to add a wobble code element to any webpage. For example, the following will create an editor for the first <h1> element on the page. This is very similar to browser developer tools.

s = document.createElement('script')
s.setAttribute('src','https://cdn.jsdelivr.net/npm/@wobble/code/dist/wobble-code-element.js')
document.documentElement.appendChild(s)
w = document.createElement('wobble-code')
w.setAttribute('element','h1')
w.setAttribute('style', 'position: fixed; bottom: 0px; right: 0px; width: 500px; height: 500px; overflow-y: auto; background-color: cornsilk;color:green;z-index:10000')
document.documentElement.appendChild(w)

Inspiration and future directions

Hopefully, making pieces of wwwobble modular allows for more experimental and open-ended editing and programming experiences within a website.
Olivia gave a talk demonstrating some of these ideas at LIVE 2025: Workshop on Live Programming.