· 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://theonion.com/tips-for-getting-better-haircuts/",
  "canonical": "https://theonion.com/tips-for-getting-better-haircuts/",
  "title": "Tips For Getting Better Haircuts",
  "description": "Getting a haircut you truly love can be a challenge. The Onion shares tips for getting better haircuts. Be as specific as possible when describing which Zootopia character you want to look like. Tell your stylist what you want and, more importantly, what you’re willing to do to their family if you …",
  "siteName": "The Onion",
  "siteLogoUrl": "https://storage.mostly.film/myframely/logo/theonion.com/c1986af3c26609b8b7d8933f99c51c1a89e9ea6b.png",
  "favicon": "https://theonion.com/wp-content/uploads/2024/07/cropped-site-icon.png?w=32",
  "images": {
    "thumbnail": "https://storage.mostly.film/myframely/previews/347c5899-6938-4fc1-9a2d-7f3867d2a041/3244014d4adc.jpg",
    "hero": "https://storage.mostly.film/myframely/previews/347c5899-6938-4fc1-9a2d-7f3867d2a041/2f045196c4eb.jpg",
    "origin": "https://theonion.com/wp-content/uploads/2026/04/Tips_Haircut_EXP_S_PH.jpg"
  },
  "provider": null,
  "fetchedAt": "2026-10-13T15:37:37.785Z"
}

2. HTML fragment shape=html

variant=thumbnail (default)

Tips For Getting Better Haircuts

Getting a haircut you truly love can be a challenge. The Onion shares tips for getting better haircuts. Be as specific as possible when describing which Zootopia character you want to look like. Tell your stylist what you want and, more importantly, what you’re willing to do to their family if you …

The Onion
variant=hero

Tips For Getting Better Haircuts

Getting a haircut you truly love can be a challenge. The Onion shares tips for getting better haircuts. Be as specific as possible when describing which Zootopia character you want to look like. Tell your stylist what you want and, more importantly, what you’re willing to do to their family if you …

The Onion
raw thumbnail HTML 
<div class="mPreview_card" data-variant="thumbnail"><a class="mPreview_link" href="https://theonion.com/tips-for-getting-better-haircuts/" target="_blank" rel="noopener nofollow"><img class="mPreview_thumb" src="https://storage.mostly.film/myframely/previews/347c5899-6938-4fc1-9a2d-7f3867d2a041/3244014d4adc.jpg" alt="" loading="lazy"><div class="mPreview_body"><h3 class="mPreview_title">Tips For Getting Better Haircuts</h3><p class="mPreview_description">Getting a haircut you truly love can be a challenge. The Onion shares tips for getting better haircuts. Be as specific as possible when describing which Zootopia character you want to look like. Tell your stylist what you want and, more importantly, what you’re willing to do to their family if you …</p><div class="mPreview_meta"><img class="mPreview_logo" src="https://storage.mostly.film/myframely/logo/theonion.com/c1986af3c26609b8b7d8933f99c51c1a89e9ea6b.png" alt="" loading="lazy"><span class="mPreview_site">The Onion</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.