Embeds

External package for Kuest Embeds.

Embeds

1. Market

Runtime config

You can override branding and the site URL by setting globals before loading the bundle:

window.__KUEST_SITE_URL = "https://example.com";
window.__KUEST_SITE_NAME = "Example";
window.__KUEST_SITE_LOGO_URL = "https://example.com/logo.svg";

Gamma and CLOB endpoints are fixed to kuest.com.

Market embed attributes

• market / event: slug lookup.
• via or builder: builder code propagated to the market URL (via, builder).
• affiliate: referral code propagated as r.
• volume="true": show volume label.
• chart="true": show chart block.
• transparent: remove the card background and border.

Theme variables

The market component accepts CSS custom properties on the host element. The main branding hooks are --kuest-card-background, --kuest-card-border-color, --kuest-color-black, --kuest-color-gray-3, --kuest-color-red, --kuest-color-green, and --kuest-chart-line-color.

<kuest-market-embed
    market="market-slug"
    transparent
    style="--kuest-color-black: #f8fafc; --kuest-chart-line-color: #8b5cf6"
></kuest-market-embed>

When window.__KUEST_SITE_NAME is set, the package also registers an alias custom element named ${slug}-market-embed (slugified site name).

Loading behavior

The ESM market and root entries load the chart code only when a chart is needed. When self-hosting, serve the complete generated dist directory so the relative module imports remain available.

Concurrent requests for the same market or event share an in-flight request. Responses are not cached after completion, so later loads retrieve fresh prices. The chart reuses its canvas when switching time ranges and cancels superseded history requests. The internal getMarketPriceHistory(params, signal?) helper also accepts an optional AbortSignal.

Developing

Run npm run typecheck and node --test tests/*.test.mjs for local checks. Run npm run build to regenerate dist before serving the examples. These checks do not launch a browser.

Running the Example

1. Navigate to this package directory

   cd ./packages/embeds

2. Start live server to access local files.

   npx live-server

3. Navigate to the file.

   http://127.0.0.1:8080/example.html

Hot Reload

Running in development mode will allow changes to refresh in real-time. Simply run yarn dev.