Quick Start Guide

Before you start

You need an asset type, quality value and asset ID. The simplest option is a direct image URL; choose the JSON API when the ID is dynamic. Neither option needs a package or account.

Step 1 — Choose an asset family

Step 2 — Choose a quality

Emoji assets support svg and png. Flag SVG supports s, m and l. Flag icons support 1x1 and 4x3.

Step 3 — Use a simple image URL

For a fixed image, use a standard img element:

<img
  src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
  alt="Surprised face"
  width="36"
  height="36"
  loading="lazy"
  decoding="async"
/>

Step 4 — Resolve a dynamic asset with JSON

Use this no-package endpoint when the asset ID comes from application data:

const params = new URLSearchParams({
  type: "emoji",
  id: "1f632",
  quality: "svg"
});

const response = await fetch(
  "https://softhoursdiary-emojis.pages.dev/[api/v1/asset?" + params
);
const result = await response.json();

if (!response.ok || !result.ok) {
  throw new Error(result.error?.message || "Asset lookup failed.");
}

const imageUrl = result.data.url;

Step 5 — Optional browser helper

For DOM mounting or custom elements, load the standalone script. This step is optional and does not install a package.

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

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

Verify the result

1. Open the playground and select the correct asset family.
2. Confirm the supported quality and filename casing.
3. Copy the direct URL or generate a JSON API request.
4. Check the final image request in your browser if the file does not load.
5. Set accessible alt text and image dimensions in production.