JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4233
  • Score
    100M100P100Q110189F
  • License MIT

Zero-dependency, static URL-to-HTML embed parser for markdown and browser.

Package Exports

  • embed-lite
  • embed-lite/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (embed-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Embed Lite Logo

Embed Lite

npm version downloads stars license

🚀 Open Web App


Embed Lite is an ultra-fast, zero-dependency Typescript and JavaScript library for statically mapping raw URLs directly into secure, ready-to-render HTML iframes or blockquotes entirely on the fly.

By totally dodging bulky asynchronous oEmbed network API calls, embed-lite achieves zero-latency renders across both the Browser and standard Node.js rendering pipelines simply by parsing regex matches.

Getting Started

1. Usage via CDN (Browsers)

For simple web applications or zero-build environments, you can pull the massively optimized, minified bundle straight from unpkg.

Setup Instructions:

<!-- Inject the module payload -->
<script src="https://unpkg.com/embed-lite@latest/dist/embed-lite.global.min.js"></script>

Implementation: Once loaded, the library natively exposes the embedLite object directly on your global window:

<div id="video-container"></div>

<script>
  // Parse natively on the client
  const parsed = window.embedLite.embed("https://youtube.com/watch?v=123");
  
  // Inject the raw iframe string directly!
  if (parsed) {
     document.getElementById('video-container').innerHTML = parsed.html;
  }
</script>

2. Usage via NPM (Node.js / React / Vue)

If you are developing a modern framework or server-side parser (React, Express, Nuxt, etc), install the Typescript-compatible module dynamically.

Setup Instructions:

npm install embed-lite

Implementation:

import { embed } from 'embed-lite';

const targetUrl = "https://x.com/x/status/123";

// Map the URL into HTML, alongside custom CSS targeting classes
const result = embed(targetUrl, { className: 'my-social-embed' });

if (result) {
    console.log(result.html);
    // Returns explicitly isolated payload:
    // <blockquote class="twitter-tweet my-social-embed">...</blockquote>
}

Supported Platforms

We currently actively process and intelligently map the following URLs into explicitly sanitized UI formats:

Video Ecosystem Audio Sources Social Media Design, Code & Mapping
✅ YouTube ✅ Spotify ✅ Instagram ✅ Codepen
✅ Vimeo ✅ SoundCloud ✅ Facebook ✅ Figma
✅ Dailymotion ✅ X / Twitter ✅ Google Maps
✅ TikTok ✅ Reddit ✅ GitHub Gists
✅ LinkedIn

API Reference

embed(url: string, options?: EmbedOptions): { html: string } | null

This is the core mapping payload function. It rigidly parses the incoming url parameter and maps it against every platform plugin linearly.

Arguments:

  • url (required): The raw string representation of the target URL.
  • options.className (optional): Injects a CSS class safely into the root HTML tag (e.g., the root <iframe> or <blockquote>), allowing you to completely define sizing and bounding boxes downstream.

Returns:

  • Object containing the rendered { html: string } if a plugin caught and verified the pattern.
  • null if the URL schema is explicitly unsupported or malformed.

Extensibility & Architecture

embed-lite inherently relies on a decoupled Service Plugin architecture. To support new platforms natively, you just simply declare an object honoring the EmbedProvider Typescript Interface:

export const customService: EmbedProvider = {
  name: 'Service Name',
  match: (url) => url.hostname.includes('example.com'),
  generate: (url, options) => {
    return `<iframe class="${options.className || ''}" src="..."></iframe>`;
  }
}

(We actively process Pull Requests for major new platforms! Please consider contributing if you add custom layers!)

Community & Support

  • Maintainer: @mgks
  • Support the Project: If embed-lite saved you from integrating bulky SDK tools, please consider dropping a ⭐ and consider sponsoring the project.

License

Distributed under the MIT License. See LICENSE for more information.

Website Badge Sponsor Badge