local-iframe 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aleksandr Hovhannisyan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# `local-iframe`
+
+> A web component that renders templates in a local `<iframe>`.
+
+## Getting Started
+
+Install the package:
+
+```sh
+npm install local-iframe
+```
+
+Or include it via CDN:
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/local-iframe@version/index.js"
+></script>
+```
+
+## Use Cases
+
+I wanted to be able to declaratively render fully local, isolated code demos in my tutorials, without embedding third-party Codepens/sandboxes and without creating separate pages for each code demo. This web component uses the [`HTMLIFrameElement.srcdoc`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc) attribute to do just that.
+
+> [!NOTE]
+> This originally began as an Eleventy plugin: [eleventy-plugin-code-demo](github.com/AleksandrHovhannisyan/eleventy-plugin-code-demo).
+
+## Example Usage
+
+There are two ways to define the markup for your iframe:
+
+- Render a `<template>` as a child of `<local-iframe>`
+- Define the `<template>` externally and set `template="id-of-your-template"`
+
+In both cases, the component will duplicate the content of the template and render it in a local iframe.
+
+Any styles and scripts will only affect elements within the iframe itself.
+
+### Child Template
+
+The simplest way to use `local-iframe` is to render a `<template>` as a child:
+
+```html
+<local-iframe style="width: 800px; height: 400px;">
+  <template>
+    <div><h1>Hello, world!</h1></div>
+    <p>This is awesome!</p>
+    <script>
+      console.log("hi");
+    </script>
+    <script>
+      console.log("second console log in same iframe, but a second script tag");
+    </script>
+    <style>
+      body {
+        background-color: red;
+        font-size: 200%;
+      }
+    </style>
+  </template>
+</local-iframe>
+```
+
+In this example, we render a template with:
+
+- Some HTML tags for the iframe's markup
+- Two scripts to execute within the iframe's context
+- Styles to apply within to elements within the iframe
+
+> [!TIP]
+> To prevent layout shifts when the page loads, set inline styles on the host element and assign it a width and height. The inner `iframe` will fill that space responsively, shrinking or growing as needed.
+
+### Template Attribute
+
+Alternatively, you can define an external `<template>` and reference it via the `template` attribute, like so:
+
+```html
+<template id="template-1">
+  <h1>Template 1</h1>
+  <style>
+    h1 {
+      color: red;
+    }
+  </style>
+</template>
+<local-iframe template="template-1"></local-iframe>
+```
+
+If the `template` attribute changes, the frame will update its markup with the content of the new template.

package/index.js

@@ -0,0 +1,39 @@
+class LocalIframe extends HTMLElement {
+  static observedAttributes = ['template'];
+
+  #iframe;
+
+  constructor() {
+    super();
+    this.#iframe = document.createElement('iframe');
+    this.#iframe.style.height = '100%';
+    this.#iframe.style.width = '100%';
+    this.#iframe.style.maxWidth = '100%';
+    this.appendChild(this.#iframe);
+  }
+
+  attributeChangedCallback(name, oldValue, ) {
+    if (name === 'template') {
+      this.connectedCallback();
+    }
+  }
+
+  connectedCallback() {
+    const templateId = this.getAttribute('template');
+    const template = templateId ? document.getElementById(templateId) : this.querySelector('template');
+
+    if (!template) {
+      throw new Error('No <template> found for local-iframe element.');
+    }
+
+    const html = Array.from(template.content.children).filter(
+      (child) => child.tagName.toLowerCase() !== 'style' && child.tagName.toLowerCase() !== 'script'
+    ).map((html) => html.outerHTML).join('');
+    const css = Array.from(template.content.querySelectorAll('style')).map((css) => css.outerHTML).join('');
+    const js = Array.from(template.content.querySelectorAll('script')).map((js) => js.outerHTML).join('');
+
+    this.#iframe.srcdoc = `<!DOCTYPE html><html><head><meta charset="utf-8">${css}</head><body>${html}${js}</body></html>`;
+  }
+}
+
+window.customElements.define('local-iframe', LocalIframe);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "local-iframe",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "description": "A web component that renders templates in a local `<iframe>`",
+  "keywords": [
+    "iframe",
+    "local sandbox",
+    "code demo"
+  ],
+  "files": [
+    "./index.js",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AleksandrHovhannisyan/local-iframe.git"
+  },
+  "homepage": "https://github.com/AleksandrHovhannisyan/local-iframe.git",
+  "author": {
+    "name": "Aleksandr Hovhannisyan",
+    "url": "https://www.aleksandrhovhannisyan.com"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0"
+  },
+  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+}