web-share-polyfill: navigator.share() for every browser

Try it

Setup

Install with

npm or similar HTML <script>

API

navigator.share() share()

Quick presets

Common English only Western European + East Asian English + French + Chinese All

Share targets

Default Simple Minimal

Shown, in this order

Click to add

Your own target

Use your own target

id name color icon

url

Languages

Viewer's language One language

Fallback

Appearance

Look Theme Accent color Corner radius

UI text

Test data title text url files

Preview language

Result

Size …

Browser support

With web-share-polyfill

Where the native API says no

Native navigator.share()	With the polyfill

Usage

Install

npm i web-share-polyfill

import 'web-share-polyfill/common'

button.addEventListener('click', () => {
  navigator.share({ title: document.title, url: location.href }).catch(() => {})
})

import { polyfill } from 'web-share-polyfill'
import { copy, qr, email, whatsapp, facebook, x, telegram } from 'web-share-polyfill/targets'
import { fr, zh, zhHant, ja } from 'web-share-polyfill/locales'

polyfill({
  targets: [copy, qr, email, whatsapp, facebook, x, telegram],
  locales: [fr, zh, zhHant, ja], // English is built in
})

import { share } from 'web-share-polyfill'
import { copy, qr, x } from 'web-share-polyfill/targets'

const id = await share({ url: location.href }, { targets: [copy, qr, x] })
// 'native', 'copy', 'qr' or 'x'

import 'web-share-polyfill/legacy'

<script src="https://cdn.jsdelivr.net/npm/web-share-polyfill"></script>
<script>
  WebSharePolyfill.polyfill({ targets: { '*': ['copy', 'qr', 'x'], zh: ['copy', 'qr', 'wechat', 'weibo'] } })
</script>

Options

Option	Type	Default
`targets`	`ShareTarget[]`	`[]`
`locales`	`string[]`	`[en]`
`lang`	`string \| string[]`	`navigator.languages`
`fallback`	`string`	`'en'`
`strings`	`Partial<Strings>`
`look`	`'apple' \| 'material'`	auto
`theme`	`'light' \| 'dark'`	auto
`native`	`boolean`	`true`

Targets

Actions

Apps

Default targets by language

Languages

Styling

web-share-polyfill {
  --wsp-accent: #7c3aed; /* focus ring */
  --wsp-bg: #fff;        /* sheet */
  --wsp-fg: #111;        /* text */
  --wsp-muted: #666;     /* secondary text */
  --wsp-tile: #eee;      /* action buttons */
  --wsp-line: #ddd;      /* separators */
  --wsp-radius: 20px;
  --wsp-font: 'Inter', sans-serif;
  --wsp-backdrop: rgb(0 0 0 / .5);
}

/* Parts: sheet, close, target, icon, label */
web-share-polyfill::part(target) { border-radius: 8px; }

How it decides

Size

	min	gzip	brotli