## Table of Contents

- [Vanilla](#vanilla)

---

[API](https://microlink.io/docs/api/getting-started/overview)

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

## Vanilla

[Copy for LLM](https://microlink.io/docs/sdk/integrations/vanilla.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/sdk/integrations/vanilla.md "View content as Markdown")

It's available as

[npm package](https://www.npmjs.com/package/@microlink/vanilla)

.

```bash
npm install @microlink/vanilla --save
```

Or via a CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@latest/dist/microlink.min.js"></script>
```

The vanilla bundle is based on the [React](https://microlink.io/docs/sdk/integrations/react) version and exported as Universal Module Definition (*UMD*).

Since the bundle doesn't include the dependencies, we recommend loading them from a **CDN**:

```html

<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/react-is@latest/umd/react-is.production.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/styled-components@5/dist/styled-components.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@microlink/mql@latest/dist/mql.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@microlink/vanilla@latest/dist/microlink.min.js"></script>
```

or even better, you can combine all the things in a single request:

```html

<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>
```

You can save some bytes if you use

[preact](https://preactjs.com/)

instead of React:

```html

<script src="https://cdn.jsdelivr.net/combine/npm/preact@10/dist/preact.umd.min.js,npm/preact@10/hooks/dist/hooks.umd.min.js,npm/preact@10/compat/dist/compat.umd.min.js,gh/smoljs/react/react.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>
```

After that, `microlink` will be available in the global scope.

```html
<script>

  document.addEventListener('DOMContentLoaded', function (event) {

    // Example 1

    // Replace all `a` tags for microlink cards

    microlink('a')

    // Example 2

    // Replace all elements with `link-preview` class

    // for microlink cards

    microlink('.link-previews')

    // Example 3

    // Replace all elements with `link-preview` class

    // for microlink cards, passing API specific options

    microlink('.link-previews', { size: 'large' })

  })

</script>
```

We recommend calling the \`microlink\` method before the DOM finishes loading.

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as the target element you want to convert into a preview.

You can pass any [Microlink API](https://microlink.io/docs/api/getting-started/overview) query parameter as an object property, e.g., [size](https://microlink.io/docs/sdk/parameters/size).

```html
<script>

  document.addEventListener('DOMContentLoaded', function (event) {

    microlink('.link-previews', {

      size: 'large'

    })

  })

</script>
```

The API parameters passed there will be attached for all the links.

If you want to pass specific API Parameters just for some cases, you can pass them as

[data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

```html
<a

  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk"

  class="link-preview"

  data-size="large"

  data-media='["logo", "image"]'

  data-set-data='{"title": "hello world"}'

>

</a>
```

You can pass objects, arrays, booleans or even JSON structures as data attributes.

Although it's shipped with default styles, you can customize it using

[CSS variables](https://microlink.io/docs/sdk/getting-started/styling#css-variables)

or [CSS classes](https://microlink.io/docs/sdk/getting-started/styling#css-classes).

```html
<style>

  .microlink_card {

    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';

    max-width: 100%;

  }

</style>

<script>

  document.addEventListener('DOMContentLoaded', function (event) {

    microlink('.link-previews', {

      size: 'large'

    })

  })

</script>
```

Last updated on January 10, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/sdk/integrations/vanilla.md)