CDN API Documentation

Build production-ready interfaces with simple asset IDs. Learn the URL model, choose an integration and test real CDN files in the browser.

Public CDNJavaScript helper v1.0.0No API key required

What this CDN provides

Soft Hours Diary hosts public emoji and country-flag image files through stable, direct URLs. The JavaScript helper converts a short type, quality and ID into the right image URL, so an application does not need to remember every folder rule.

Static asset service, not a REST data API. There is no dynamic JSON search endpoint, API key or authentication header required for ordinary image display.

Emoji assetsSVG or PNG, addressed by Unicode code-point IDs.Flag SVGSmall, medium and large variants using uppercase country codes.Flag iconsSquare 1:1 and landscape 4:3 SVG collections.PlaygroundGenerate URLs, preview assets and copy code examples.

The URL model

Every helper uses the same basic contract:

const url = SoftHoursDiary.getUrl({
  type: "emoji",
  quality: "svg",
  id: "1f632"
});

// Returns an absolute CDN URL.

The type selects an asset family. Quality selects its format or size. ID identifies a file. The helper returns a URL without making a network request.

Use it in a browser

<script defer src="https://softhoursdiary-emojis.pages.dev/soft-hours-diary.js"></script>

<shd-asset type="emoji" asset-id="1f632"
  quality="svg" alt="Surprised face"></shd-asset>

<shd-flag asset-id="IN" quality="l"
  alt="Flag of India"></shd-flag>

Specialised tags are shd-emoji, shd-flag and shd-flag-icon. The generic shd-asset accepts a type attribute.

Choose your integration guide

Quick startGo from asset ID to image in five steps.InstallationBrowser script, ESM files and package status.JavaScript APIURL helpers, DOM methods and custom elements.ReactReusable React components and Vite setup.Next.jsServer Components, Client Components and next/image.TypeScriptTyped helpers and local imports.HTML & CSSCustom elements, direct URLs and CSS backgrounds.CORS & crawlersAllowed website origin and documentation crawl policy.

Complete documentation library

Open a focused guide for the exact part of your integration. Each page includes code examples, page export controls and AI handoff links.

Quick startFive-step setup from asset ID to displayed image.InstallationBrowser script, local ESM files and npm package status.JavaScript APIURL helpers, DOM mounting, custom elements and validation.ReactComponents, adapter props and Vite setup.Next.jsServer Components, Client Components and next/image.HTML & CSSCustom elements, data attributes and direct URLs.TypeScriptTypes, quality unions and custom JSX declarations.PlaygroundLive preview and copy-ready code for HTML, React, Next.js and CSS.API referenceEvery type, quality value, URL pattern and helper signature.PerformanceImage formats, dimensions, lazy loading and caching.Troubleshooting404s, IDs, quality errors, CORS and framework issues.CORS & crawlersAllowed origin, robots rules and indexing policy.

Important behaviour and limits

URL generation is local and synchronous; it does not verify file existence.
Use the documented filename casing and quality values.
Normal img display does not need JavaScript CORS access.
JavaScript fetch() and canvas pixel access have separate cross-origin rules.
The prepared npm metadata does not mean the package is published.
Robots rules are crawler instructions, not access control.

Download AI context (.md)Open interactive playground ↗API reference