Visualize fresh, stale, and expired response behavior
Live preview
The prompt
Build an HTTP cache-policy simulator with Tailwind CSS. Include controls for public or private caching, max-age, stale-while-revalidate, and immutable behavior. Show the generated Cache-Control header, a request-age slider, response outcome badge, browser and CDN decision steps, and a horizontal freshness timeline. Add JavaScript that recalculates HIT, STALE, REVALIDATE, or MISS behavior from the policy, updates the header, and explains each decision in plain language.
Build an HTTP cache-policy simulator with Tailwind CSS. Include controls for public or private caching, max-age, stale-while-revalidate, and immutable behavior. Show the generated Cache-Control header, a request-age slider, response outcome badge, browser and CDN decision steps, and a horizontal freshness timeline. Add JavaScript that recalculates HIT, STALE, REVALIDATE, or MISS behavior from the policy, updates the header, and explains each decision in plain language.
Build an HTTP cache-policy simulator with Tailwind CSS. Include controls for public or private caching, max-age, stale-while-revalidate, and immutable behavior. Show the generated Cache-Control header, a request-age slider, response outcome badge, browser and CDN decision steps, and a horizontal freshness timeline. Add JavaScript that recalculates HIT, STALE, REVALIDATE, or MISS behavior from the policy, updates the header, and explains each decision in plain language.