EMBED-TESTER

Test your embeddable elements with ease

Modern UI Secure Responsive

embed-tester

A modern, lightweight site to test embeddable elements, such as maps, charts, and interactive widgets.

Features

• Predefined Embeds: Quickly test common embeds like Google Maps, Plotly Charts (example), and YouTube videos.
• Custom Code Input: Paste your own HTML embed code into a textarea for testing.
• Responsive Testing: Resize the embed container instantly to common device widths (Mobile, Tablet, Desktop) or fit it to the available space.
• Configurable Sandbox: Dynamically adjust the sandbox attribute permissions for the custom embed iframe using checkboxes. Dangerous permissions (allow-same-origin, allow-top-navigation) trigger user confirmation dialogs.
• Dark Mode: Toggle between light and dark themes, with preference saved to localStorage.
• Save/Load Configuration: Save your custom embed code and selected sandbox permissions to localStorage and automatically load them on your next visit. Use the "Save Config" and "Load Config" buttons.
• Clean UI: Modern interface with clear controls and improved error/placeholder feedback.
• Security Conscious: Uses srcdoc for custom code, dynamically configured sandbox attributes, and a Content Security Policy (CSP) meta tag.

Quick Start

1. Clone the repository

   git clone https://github.com/TMHSDigital/embed-tester.git
   cd embed-tester

2. Open in browser

Project Structure

The website files are in the docs folder for GitHub Pages compatibility:

docs/
├── index.html          # Main HTML file
├── styles.css         # Main CSS file (imports others)
├── embed.js          # Core functionality
├── API.md           # API documentation
└── css/            # CSS modules
    ├── base.css    # Root variables, body, containers
    ├── header.css  # Header styles
    ├── footer.css  # Footer styles  
    └── buttons.css # Button and control styles

Usage Guide