Embed: SDK

The legacy Microlink Embed SDK is no longer maintained. It keeps working and you can still use it, but it won't receive further updates. The new Microlink Embed SDK — the microlink.io package — is the way to consume the Microlink API going forward.

The Embed SDK is the fastest way to embed any URL: drop one component into your markup, pass a url, and get a live preview. It handles the API call, lazy-loading, the iframe-vs-card choice, and CSS theming.

Pick the Embed SDK when you want something rendered today with zero markup decisions. If you would rather render previews yourself, see metadata API with custom HTML/CSS. If you only need the provider's native player, see iframe parameter.

Quick start

React

npm install @microlink/react styled-components

import Microlink from '@microlink/react'

<Microlink url='https://stripe.com' />

Vue

npm install @microlink/vue

<template>
  <Microlink url="https://www.youtube.com/watch?v=9P6rdqiybaw" />
</template>

<script>
import { Microlink } from '@microlink/vue'
export default { components: { Microlink } }
</script>

Vanilla / CDN

<script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/vanilla@5/dist/microlink.min.js"></script>

<a class="link-preview" href="https://www.youtube.com/watch?v=9P6rdqiybaw"></a>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    microlink('.link-preview', { size: 'large' })
  })
</script>

The vanilla integration is selector-driven — pass any CSS selector and the Embed SDK replaces matching elements with previews.

For the full per-integration reference, see React, Vue, and Vanilla.

Card or iframe — your call

The single embed-relevant decision the Embed SDK adds is the media prop. Toggle it to switch between a static rich card and the provider's interactive iframe:

// Static card — cheaper to render, better for long-scrolling pages
<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' media='image' />

// Real YouTube player
<Microlink url='https://www.youtube.com/watch?v=9P6rdqiybaw' media='iframe' />

media also accepts an array describing a fallback cascade:

<Microlink
  url='...'
  media={['iframe', 'video', 'audio', 'image', 'logo']}
/>

The Embed SDK picks the first field that exists in the response — so one component handles YouTube, Spotify, GitHub READMEs, and plain articles without branching. See the media reference.

Everything else lives in the embed SDK reference

Every Microlink API parameter works as an Embed SDK prop, and the Embed SDK adds a few of its own:

Prop	What it does	Reference
`apiKey`	Authenticate requests for Pro features	apiKey
`lazy`	Defer the API call until the card is in view (default `true`)	lazy
`setData` / `fetchData`	Skip the runtime fetch when you already have the metadata (SSR, build-time crawls)	setData
`size`, `contrast`, `direction`	Visual layout knobs	size
Any API parameter (`screenshot`, `iframe`, `palette`, `meta`, ...)	Forwarded to the API call	API parameters

For the full prop list and styling (CSS variables, BEM classes, styled-components wrappers), see the SDK overview and SDK styling.

Choose between the embed SDK and the other approaches

If you want	Use
A drop-in component, no boilerplate	Embed SDK (this page)
Pre-built layouts and AI prompts to match your design system	Generate custom previews with AI
Full control over markup, server-rendered HTML, no client JS	Metadata API + custom HTML
Just the provider's native player or widget	iframe parameter

You can mix them: use the Embed SDK for inline links inside posts and a custom HTML hero for the article header. They share the same underlying API.

Next step

If you'd rather skip the Embed SDK and have your AI coding assistant generate previews styled to your project, see generate custom previews with AI.