· 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://500px.com/photo/1122603971/bull-race-tanah-datar-by-jensen-chua-photography",
  "canonical": "https://500px.com/photo/1122603971/bull-race-tanah-datar-by-jensen-chua-photography",
  "title": "Bull Race @Tanah Datar by Jensen Chua Photography | 500px",
  "description": "Discover the photo 'Bull Race @Tanah Datar' by Jensen Chua Photography on 500px. Explore more stunning photography and get inspired today.",
  "siteName": "500px.com",
  "siteLogoUrl": "https://storage.mostly.film/myframely/logo/500px.com/9db529915029f6a411d35a4465ea160f86c6d041.ico",
  "favicon": "https://500px.com/favicon.ico",
  "images": {
    "thumbnail": null,
    "hero": null,
    "origin": "https://drscdn.500px.org/photo/1122603971/q%3D75_m%3D600/v2?sig=6cc9f536e7b59d890b09a8b39d73b37ee6ac835ade1629fe00eb738a04516bfb"
  },
  "provider": null,
  "fetchedAt": "2026-10-13T15:36:39.690Z"
}

2. HTML fragment shape=html

raw thumbnail HTML

<div class="mPreview_card" data-variant="thumbnail"><a class="mPreview_link" href="https://500px.com/photo/1122603971/bull-race-tanah-datar-by-jensen-chua-photography" target="_blank" rel="noopener nofollow"><img class="mPreview_thumb" src="https://drscdn.500px.org/photo/1122603971/q%3D75_m%3D600/v2?sig=6cc9f536e7b59d890b09a8b39d73b37ee6ac835ade1629fe00eb738a04516bfb" alt="" loading="lazy"><div class="mPreview_body"><h3 class="mPreview_title">Bull Race @Tanah Datar by Jensen Chua Photography | 500px</h3><p class="mPreview_description">Discover the photo &#39;Bull Race @Tanah Datar&#39; by Jensen Chua Photography on 500px. Explore more stunning photography and get inspired today.</p><div class="mPreview_meta"><img class="mPreview_logo" src="https://storage.mostly.film/myframely/logo/500px.com/9db529915029f6a411d35a4465ea160f86c6d041.ico" alt="" loading="lazy"><span class="mPreview_site">500px.com</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.