· 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://www.propublica.org/article/3d-printer-cairo-illinois-housing",
  "canonical": "https://www.propublica.org/article/3d-printer-cairo-illinois-housing",
  "title": "A 3D Printer Brought More Broken Promises to Cairo, Illinois",
  "description": "I spotted the printer abandoned off a country road. Finding out how it got there is a whole other story of tangled politics, tiny banks with big business deals, and the future of a town some say cannot be saved.",
  "siteName": "ProPublica",
  "siteLogoUrl": "https://storage.mostly.film/myframely/logo/propublica.org/e9a0084dc9a47037cf727b06ff5d06b84d99fdef.jpg",
  "favicon": "https://www.propublica.org/wp-content/uploads/2026/07/Frame-2.png?w=32",
  "images": {
    "thumbnail": "https://storage.mostly.film/myframely/previews/0af74e60-6c44-4de1-b023-309dfa8c6b88/0670dbd5dec7.jpg",
    "hero": "https://storage.mostly.film/myframely/previews/0af74e60-6c44-4de1-b023-309dfa8c6b88/555e7d151f32.jpg",
    "origin": "https://www.propublica.org/wp-content/uploads/2026/04/A-Year-later_03-SOCIAL_maxHeight_3000_maxWidth_3000.jpg?w=1200"
  },
  "provider": null,
  "fetchedAt": "2026-10-13T17:38:22.631Z"
}

2. HTML fragment shape=html

raw thumbnail HTML

<div class="mPreview_card" data-variant="thumbnail"><a class="mPreview_link" href="https://www.propublica.org/article/3d-printer-cairo-illinois-housing" target="_blank" rel="noopener nofollow"><img class="mPreview_thumb" src="https://storage.mostly.film/myframely/previews/0af74e60-6c44-4de1-b023-309dfa8c6b88/0150b257d152.jpg" alt="" loading="lazy"><div class="mPreview_body"><h3 class="mPreview_title">A 3D Printer Brought More Broken Promises to Cairo, Illinois</h3><p class="mPreview_description">I spotted the printer abandoned off a country road. Finding out how it got there is a whole other story of tangled politics, tiny banks with big business deals, and the future of a town some say cannot be saved.</p><div class="mPreview_meta"><img class="mPreview_logo" src="https://storage.mostly.film/myframely/logo/propublica.org/e9a0084dc9a47037cf727b06ff5d06b84d99fdef.jpg" alt="" loading="lazy"><span class="mPreview_site">ProPublica</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.