GIPHY Integration

Honeycomb integrates the GIPHY API to let users search and embed GIFs in messages and posts. The integration is entirely client-side — the browser calls the GIPHY search API directly using a public API key.

Configuration

The API key is loaded from the public environment:

import { PUBLIC_GIPHY_API_KEY } from "$env/static/public";

Set this in your .env file:

PUBLIC_GIPHY_API_KEY=your_giphy_api_key_here

Note

Both GIF components check for the presence of the API key before rendering. If PUBLIC_GIPHY_API_KEY is empty or unset, the GIF picker will not appear in the UI. This makes the feature entirely optional.

Components

There are two GIF picker components, each tailored to a different context.

GifSearch (Honeycomb Rooms)

File: src/lib/modules/honeycomb/stickers/components/gif-search.svelte

A standalone search panel designed for the Honeycomb room sticker picker. It renders a search input and a grid of results.

Props:

Prop	Type	Description
onSelect	(gifUrl: string) => void	Callback fired when the user clicks a GIF

Behavior:

• Debounces search input by 350 ms.
• Calls https://api.giphy.com/v1/gifs/search with the query.
• Limits results to 20 GIFs with a pg-13 rating.
• Displays fixed_width_small thumbnails in a 2-column grid.
• Returns the original URL to the onSelect callback.

GifPicker (Posts)

File: src/lib/modules/post/components/gif-picker.svelte

A dropdown-based picker that appears as a toolbar button. When opened, it shows trending GIFs by default and switches to search results as the user types.

Props:

Prop	Type	Description
onSelect	(url: string) => void	Callback fired when the user clicks a GIF

Behavior:

• On first open, fetches trending GIFs from https://api.giphy.com/v1/gifs/trending.
• Debounces search input by 400 ms.
• Limits results to 12 GIFs with a pg rating.
• Displays fixed_height thumbnails in a 2-column grid.
• Returns the fixed_height URL to the onSelect callback.
• Includes a “Powered by GIPHY” attribution footer.

API Endpoints Used

Endpoint	Used By	Trigger
GET /v1/gifs/search	Both components	User types a search query
GET /v1/gifs/trending	GifPicker only	Dropdown opens with no query

Common Query Parameters

Parameter	Value	Notes
api_key	PUBLIC_GIPHY_API_KEY	Required for all requests
q	User input	Only for search endpoint
limit	12 or 20	Controls grid density
rating	pg or pg-13	Content safety filter

How It Connects to Messaging

Neither component sends messages directly. They both accept an onSelect callback and return a GIF URL. The parent component is responsible for embedding the URL into a message or post:

User clicks GIF
  -> onSelect(gifUrl) fires
  -> Parent inserts URL into message content or attachment
  -> Message is sent through the normal send flow

In the Honeycomb rooms context, GifSearch is part of the sticker picker panel exported from src/lib/modules/honeycomb/stickers/index.js. In posts, GifPicker sits in the post composer toolbar alongside other media options.

Key Files

File	Purpose
src/lib/modules/honeycomb/stickers/components/gif-search.svelte	Room sticker GIF search
src/lib/modules/post/components/gif-picker.svelte	Post composer GIF dropdown