Skip to content
Microlink SDK

Beautiful link previews,
one component away.

Turn any URL into a rich, themeable preview — under 10 KB, drop-in for React, Vue, and Vanilla.
Read the docs
Why the SDK

Three things in mind.

Designed to drop into any web stack and stay out of the way.
Common surface
Same props in React, Vue, and Vanilla. Switch stacks without re-learning the SDK.
Lightweight & fast
Less than 10 KB gzipped. No polyfills, no CSS injection. Lazy loads under the fold by default.
Customizable style
Themeable through CSS variables and BEM classes. Plays well with styled-components, Tailwind, or plain CSS.

Install once, pass a url, get a card.

Same API across React, Vue, and Vanilla — the SDK fetches the metadata, picks the best media, and renders a card that already looks good on any background.
Step 01 · Install
  • React
  • Vue
  • Vanilla
npm install @microlink/vue react react-dom styled-components
Step 02 · The basic card
  • React
  • Vue
  • Vanilla
<template>
  <Microlink url="https://stripe.com" />
</template>
See on GitHub
size

Three sizes that fit anywhere.

Pick small for inline references, normal for body content, large for hero blocks.
size="small"
size="normal"
size="large"
media

One prop, every format.

Image, logo, video, audio, or the provider iframe. The SDK falls back automatically when a media type is missing.
media="image"
media="logo"
media="video"
media="audio"
media="iframe"
direction

Flip the card for RTL languages.

Mirror the layout for Arabic, Hebrew, or any right-to-left context.
direction="ltr"
direction="rtl"
contrast

High-contrast cards from brand colors.

Microlink extracts the dominant colors from the preview image to build an accessible high-contrast variant.
default
contrast
lazy

Only fetch when the card
scrolls into view.

Lazy loading is on by default. Pass IntersectionObserver options to fine-tune the trigger.
  • React
  • Vue
  • Vanilla
<Microlink
  url="https://open.spotify.com/track/3BovdzfaX4jb5KFQwoPfAw"
  :lazy="{ threshold: 0.5 }"
  media='audio'
/>
setData & fetchData

Bring your own data.

Pass setData to merge or replace fields. Disable fetchData to skip the network call entirely.
import Microlink from '@microlink/react'

<Microlink
  url='https://www.instagram.com/p/BeV6tOhFUor/'
  media='video'
  size='large'
  setData={{ title: 'Hi there, friend.', description: 'Replace the description with anything you want.' }}
/>
Styling

Theme it with CSS variables.

No CSS is injected into your app. Override the defaults with a few custom properties or target the BEM classes directly.
.microlink_card {
  --microlink-background-color: #0b0d10;
  --microlink-color: #ffffff;
  --microlink-border: 1px solid #1f2329;
  --microlink-hover-background-color: #1f2329;
  --microlink-hover-border-color: #fcc419;
}
apiKey

Ship to production with an API key.

The SDK works without authentication — 50 free requests a day. For higher quotas, configurable TTL, custom headers and proxy, attach an API key from any paid plan.
  • React
  • Vue
  • Vanilla
// register globally with a default key
Vue.use(Microlink, { apiKey: 'YOUR_API_KEY' })
Integrations

Built for developers.

Official packages for the most common stacks. Same component, same props.
Microlink SDK
for React
Microlink SDK
for Vue
Microlink SDK
for JavaScript
Read the docs