This is a card in Dave's Virtual Box of Cards.

Mirroring JavaScript to the screen

Page created: 2025-08-08

I have a lot of JavaScript examples on my website.

I need a way to display the exact script I’m running without having two copies I need to keep in sync.

My answer to this since 2017 has been a little script called Galadriel’s Mirror.

Galadriel’s Mirror 2

Now on it’s second version, Galadriel’s Mirror makes mirroring a <script> tag’s contents to a <pre> area visible on the screen completely painless. Just add a data-mirror attribute to the script, and Galadriel will mirror it for you. That’s it!

Example source:

<script data-mirror>
document.write('<b style="color:purple">Hello!</b>');
</script>

<script src="galadriel2.js"></script>

Example output:

Download and more examples

Here is the direct link to the JavaScript: galadriel2.js

Rough pen drawing of Galadriel with the mirror basin and a water jug and lots of floral decorative elements. Hand-written script reads Galadriel’s Mirror 2

"With water from the stream Galadriel filled the basin to the brim, and breathed on it, and when the water was still again she spoke."

For historical reasons, I have two example pages:

I also use it here in the JavaScript-based Cards, such as: JS "Fuzzy" Search (or Partial Search).

Galadriel’s Mirror 1

I originally wrote Galadriel’s Mirror for the example-heavy and Lord of the Rings themed Dave’s Guide to Mithril. (Mithril is a very cool little JavaScript framework.)

The original still works great and does provide you more flexibility since it requires that you create the HTML element for mirroring.

Here’s a direct link to the source of the original: galadriel.js