Embed Lite ⚡

Auto-detect links and render secure and HTML blockquotes <strong>on the fly</strong>.<br/>Zero dependencies. No external API calls.</p> <div class="hero-box"> <label for="url-input" style="display:block; margin-bottom: 0.5rem; font-weight: 500;">Enter a URL to generate an embed live:</label> <div class="input-group"> <input type="text" id="url-input" placeholder="e.g. https://www.youtube.com/watch?v=dQw4w9WgXcQ"> <button id="convert-btn">Embed</button> </div> <div style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; color: #e2e8f0;">Generated Render Code:</div> <pre id="code-output" style="min-height: 48px; margin-top:0;"><span class="empty-state">Waiting for URL...</span></pre> <div style="font-size: 0.9rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #e2e8f0;">Live Interactive Preview:</div> <div class="preview-wrapper" id="preview-output"> <span class="empty-state">No embed rendered yet.</span> </div> </div> <div class="instructions"> <h3>Installation & Usage</h3> <p>Drop a CDN script directly into your frontend to render embeds dynamically. Available in both uncompressed (<code>.js</code>) and compressed (<code>.min.js</code>) formats for high compatibility.</p> <pre style="color: #cbd5e1; background: #0f172a; margin-top: 0;"><script src="https://unpkg.com/embed-lite/dist/embed-lite.global.min.js"></script> <script> // Instantly renders the target URL directly into the browser DOM const result = window.embedLite.embed("https://youtube..."); document.getElementById("my-div").innerHTML = result.html; </script></pre> <p style="margin-top:2rem">Or install securely via NPM for strictly-typed environments and Site Generators:</p> <pre style="color: #4ade80; background: #0f172a; margin-top: 0; margin-bottom: 1rem;">npm install embed-lite</pre> <pre style="color: #cbd5e1; background: #0f172a; margin-top: 0;">import { embed } from 'embed-lite'; const { html } = embed('https://vimeo.com/...'); </pre> </div> </div>  <script src="./embed-lite.global.min.js"></script> <script> const input = document.getElementById('url-input'); const btn = document.getElementById('convert-btn'); const preview = document.getElementById('preview-output'); const code = document.getElementById('code-output'); function renderEmbed() { const url = input.value.trim(); if (!url) return; try { // Calling our global CDN object directly! const result = window.embedLite.embed(url); if (result && result.html) { code.textContent = result.html; preview.innerHTML = result.html; // Securely execute Twitter/Reddit blockquote scripts if injected const scripts = preview.getElementsByTagName('script'); for (let i = 0; i < scripts.length; i++) { const existing = scripts[i]; const newScript = document.createElement('script'); newScript.src = existing.src; newScript.async = true; document.body.appendChild(newScript); } } else { code.innerHTML = '<span style="color:#ef4444">Error: Supported auto-detection platform not found.</span>'; preview.innerHTML = '<span class="empty-state" style="color:#ef4444">Unsupported URL</span>'; } } catch (e) { console.error(e); code.textContent = "Failed to render."; } } btn.addEventListener('click', renderEmbed); input.addEventListener('keypress', (e) => { if (e.key === 'Enter') renderEmbed(); }); </script> </body> </html>