@meoslabs/save-in-meos

One tap. Any page. Into meos.

Drop a branded save in meos chip into your share row, toolbar, or blog post. Visitors tap it → meos opens with a canonical import URL — page URL, optional quote, and your site name in ?w= for provenance.

No build step required for script-tag embeds. npm package for bundlers. MDP codec if you only need the link.

Try it now

| What | How | |------|-----| | In this README | Click the banner above — real import link (GitHub blocks <script>, so this is a linked chip that opens meos) | | Live widget | readme-embed.html — full interactive chip | | On your machine | npm run demo → http://localhost:4173 |

Put it on your site

You configure three things. The chip label is brand-fixed (see presets below) — not arbitrary custom text.

| Option | Required? | What it does | Example | |--------|-----------|--------------|---------| | u | yes | Canonical URL to save into meos | location.href or article permalink | | widgetId | recommended | Provenance — your site id, carried as ?w= on the import URL | "my-blog", "hn-reader" | | chipPreset | no | Chip size + label variant | "default" or "compact" | | t | no | Optional quoted text (LITE tier) | User's text selection | | theme | no | auto · light · dark | "dark" on a dark toolbar |

Example — your article, your provenance id

<link
  rel="stylesheet"
  href="https://unpkg.com/@meoslabs/[email protected]/src/widget/fonts.css"
/>
<div id="meos-save-mount"></div>
<script src="https://unpkg.com/@meoslabs/[email protected]/dist/widget.iife.js"></script>
<script>
  MeosSave.initSaveButton("#meos-save-mount", {
    // 1) What to save
    u: "https://yoursite.com/posts/decentralised-notes",

    // 2) Provenance — shows up as ?w=my-blog on the meos import URL
    widgetId: "my-blog",

    // 3) Chip look (label is preset, not free text)
    chipPreset: "default", // logo + "save in meos"
    theme: "auto",
  })
</script>

Example — save a quote the user selected

MeosSave.initSaveButton("#meos-save-mount", {
  u: "https://yoursite.com/posts/decentralised-notes",
  t: window.getSelection()?.toString().trim() || undefined,
  widgetId: "my-blog-quote-save",
  chipPreset: "compact", // logo + "save"
})

When the user taps the chip, meos receives something like:

https://meos.do/databox:import:{encoded}?w=my-blog-quote-save

The widgetId is how meos knows which integrator sent the import — use a stable string per site or surface (not per user).

Label presets (not custom text)

| chipPreset | Visible label | Best for | |--------------|---------------|----------| | default | save in meos | Share rows, article footers | | compact | save | Dense toolbars |

aria-label is always save in meos. Font, logo, and colours are brand-locked — you pick preset, theme, and bounded size tokens only.

Quick start — npm

npm install @meoslabs/save-in-meos

import "@meoslabs/save-in-meos/fonts.css"
import "@meoslabs/save-in-meos/widget.css"
import { initSaveButton } from "@meoslabs/save-in-meos"

initSaveButton("#meos-save-mount", {
  u: "https://example.com/article",
  widgetId: "my-site",
})

Quick start — links only (no widget)

import { buildMeosLink, buildImportIntentV1 } from "@meoslabs/save-in-meos"

const url = buildMeosLink(
  buildImportIntentV1({
    u: "https://example.com/article",
    t: "Optional pull-quote",
  }),
  "my-site", // → ?w=my-site
)

Chip gallery

Left column chips open a real meos import. Right column opens the live widget.

CDN

Pin the version — never use @latest in production.

| Mirror | Widget IIFE | Fonts | |--------|-------------|-------| | unpkg | https://unpkg.com/@meoslabs/[email protected]/dist/widget.iife.js | …/src/widget/fonts.css | | jsDelivr | https://cdn.jsdelivr.net/npm/@meoslabs/[email protected]/dist/widget.iife.js | same path |

Alias: dist/save-in-meos.min.js (identical bundle).

What is MDP?

The meos deeplink protocol encodes an import intent into https://meos.do/databox:import:…. Widget attribution rides in ?w={widgetId}.

| Tier | Use when | |------|----------| | REF | Page URL only | | LITE | URL + quoted text (t) | | IMG | URL + image URLs | | FULL | Structured blocks (advanced) |

Development

npm install
npm run build && npm run build:widget
npm test && npm run check:mdp
npm run demo    # http://localhost:4173

After bumping package.json version: npm run version:sync.

Docs

| Doc | For | |-----|-----| | docs/INTEGRATOR.md | Full widget API + branding rules | | docs/PUBLISHING.md | npm release + CI | | CONTRIBUTING.md | Contributors |

Licence

MIT · Inconsolata OFL-1.1