· Home

myframely `/api/v1` demo

Exercises all three response shapes (JSON / HTML fragment / web component) against a single URL. Server-loads via the authenticated path; web-component live-fetch uses /demo/proxy as a stand-in for a consumer's backend proxy.

1. JSON shape=json

{
  "url": "https://github.com/",
  "canonical": "https://github.com/",
  "title": "GitHub · Change is constant. GitHub keeps you ahead.",
  "description": "Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.",
  "siteName": "GitHub",
  "siteLogoUrl": "https://storage.mostly.film/myframely/logo/github.com/8a341787c63e662671d836db5c790992cbaee0dd.png",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "images": {
    "thumbnail": "https://storage.mostly.film/myframely/previews/eb770c43-e213-4116-8d7c-22b8373eaa28/6089228c58c6.jpg",
    "hero": "https://storage.mostly.film/myframely/previews/eb770c43-e213-4116-8d7c-22b8373eaa28/768f6581722b.jpg",
    "origin": "https://images.ctfassets.net/8aevphvgewt8/4pe4eOtUJ0ARpZRE4fNekf/f52b1f9c52f059a33170229883731ed0/GH-Homepage-Universe-img.png"
  },
  "provider": null,
  "fetchedAt": "2026-09-22T20:49:22.202Z"
}

2. HTML fragment shape=html

raw thumbnail HTML

<div class="mPreview_card" data-variant="thumbnail"><a class="mPreview_link" href="https://github.com/" target="_blank" rel="noopener nofollow"><img class="mPreview_thumb" src="https://storage.mostly.film/myframely/previews/eb770c43-e213-4116-8d7c-22b8373eaa28/6089228c58c6.jpg" alt="" loading="lazy"><div class="mPreview_body"><h3 class="mPreview_title">GitHub · Change is constant. GitHub keeps you ahead.</h3><p class="mPreview_description">Join the world&#39;s most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.</p><div class="mPreview_meta"><img class="mPreview_logo" src="https://storage.mostly.film/myframely/logo/github.com/8a341787c63e662671d836db5c790992cbaee0dd.png" alt="" loading="lazy"><span class="mPreview_site">GitHub</span></div></div></a></div>

3. Web component (pre-fetched) <myframely-card preview=...>

default

theme="dark"

variant="hero"

themed via --mPreview-* (small/tight)

4. Web component (live-fetch) <myframely-card url=... endpoint=/demo/proxy>

This component fetches the preview from /demo/proxy on mount, no pre-serialized attribute. Simulates the pattern a consumer would use if they proxy the preview call through their own backend.