Embed: SDK

The 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 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 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 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 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 SDK reference

Every Microlink API parameter works as an SDK prop, and the 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 SDK and the other approaches

If you want	Use
A drop-in component, no boilerplate	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 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 SDK and have your AI coding assistant generate previews styled to your project, see generate custom previews with AI.