https://github.com/tmhsdigital/embed-tester
A barebones site used to test embeddable elements, such as maps or charts.
https://github.com/tmhsdigital/embed-tester
Last synced: 29 days ago
JSON representation
A barebones site used to test embeddable elements, such as maps or charts.
- Host: GitHub
- URL: https://github.com/tmhsdigital/embed-tester
- Owner: TMHSDigital
- Created: 2025-02-18T19:36:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-18T20:28:52.000Z (about 1 year ago)
- Last Synced: 2025-02-18T20:41:30.717Z (about 1 year ago)
- Homepage: https://tmhsdigital.github.io/embed-tester/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
EMBED-TESTER
Test your embeddable elements with ease
Modern UI
Secure
Responsive
[](https://tmhsdigital.github.io/embed-tester)
[](LICENSE)
[](http://makeapullrequest.com)
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.
- **Code Preview:** Safely preview the structure of your custom HTML code before embedding.
- **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, confirmation dialogs, and a Content Security Policy (CSP) meta tag.
- **Accessibility Aware:** Includes keyboard navigation shortcuts (e.g., Ctrl+E to Embed), visible focus indicators, and ARIA attributes.
- **Help System:** Minimalistic tooltips provide context for sandbox permissions on click/hover.
- **Optimized:** Includes performance enhancements like debounced resizing and lazy-loaded icons.
Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/TMHSDigital/embed-tester.git
cd embed-tester
```
2. **Open in browser**
Simply open the `docs/index.html` file in your web browser. No build step or local server is required.
3. **Or visit the Live Demo:** [https://tmhsdigital.github.io/embed-tester](https://tmhsdigital.github.io/embed-tester)
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
1. **Select Embed Type:** Click the "Map", "Chart", or "YouTube" buttons to load predefined examples.
2. **Use Custom Code:** Paste your own HTML embed code into the large textarea.
3. **Configure Sandbox (for Custom Code):** Check/uncheck the desired sandbox permissions below the textarea. Use the help icons (?) for more information about each permission. Be cautious with dangerous permissions (highlighted).
4. **Preview (for Custom Code):** Click the "Preview Code" button to see a static render of your HTML structure before embedding.
5. **Embed Custom Code:** Click the "Embed Custom Code" button. You may be prompted for confirmation if dangerous permissions are selected.
6. **Test Responsiveness:** Use the "Mobile", "Tablet", "Desktop", and "Fit Container" buttons to resize the preview area.
7. **Manage Configuration:** Use "Save Config" to store your custom code and sandbox settings in your browser's local storage for your next visit. "Load Config" manually reloads the last saved configuration.
8. **Toggle Theme:** Use the "Theme" button to switch between light and dark modes.
9. **Clear:** Use the "Clear" button to remove the current embed and reset the preview area.