Your platform. A few lines. GIFs.

Choose your platform

Pickers handle search, browsing, animation and selection. Clients let you build the interface yourself.

Start with React

Install the package, import the stylesheet, and handle a selection. The picker searches GIFs and returns the selected object through onSelect.

npm install @rowix/gifsnap-react

import { GifPicker } from '@rowix/gifsnap-react';
import '@rowix/gifsnap-react/styles.css';

export default function App() {
  return (
    <GifPicker
      onSelect={(gif) => console.log(gif.url)}
      theme="system"
    />
  );
}

Keep your own interface

Install the JavaScript client from npm and call the API from your existing interface.

The standalone @rowix/gifsnap-js package works without React in Vue, Svelte, browser JavaScript and Node.js. Call search with a query, or trending to browse. Both accept page, limit, and an optional AbortSignal.

npm install @rowix/gifsnap-js

import { createGifSnapClient } from '@rowix/gifsnap-js';

const gifsnap = createGifSnapClient();
const { data, pagination } = await gifsnap.search({
  query: 'hello', limit: 12,
});

console.log(data[0]?.url);

JavaScript, Vue and Svelte guide ↗

Or use HTTP directly

The public base URL is https://gifsnap.com/api/v1. These endpoints currently accept requests without an API key. Browser requests are supported by the API’s CORS headers.

curl --get 'https://gifsnap.com/api/v1/gifs/search' \
  --data-urlencode 'q=hello' \
  --data 'page=1' \
  --data 'limit=12'

const url = new URL('https://gifsnap.com/api/v1/gifs/search');
url.searchParams.set('q', 'hello');
url.searchParams.set('page', '1');
url.searchParams.set('limit', '12');

const response = await fetch(url);
if (!response.ok) {
  throw new Error('GIF search failed: ' + response.status);
}
const result = await response.json();
const gifs = result.data;
const nextPage = result.pagination.next_page;

Endpoint reference

All paths below are relative to the base URL. Expand an endpoint for its parameters and a request example.

curl 'https://gifsnap.com/api/v1/gifs/search?q=hello&page=1&limit=12'

curl 'https://gifsnap.com/api/v1/gifs/trending?page=1&limit=12'

curl 'https://gifsnap.com/api/v1/stickers/search?q=hello&page=1&limit=12'

curl 'https://gifsnap.com/api/v1/stickers/trending?page=1&limit=12'

const response = await fetch(
  'https://gifsnap.com/api/v1/gifs/' + encodeURIComponent(gif.id)
);
if (!response.ok) throw new Error('GIF lookup failed');
const item = await response.json();

OpenAPI specification ↗ · Text documentation index ↗ · AI integration guide ↗

Use the returned media object

List responses contain a data array. Use media URLs as returned: they can point to external storage or a CDN, and may use formats such as WebP rather than a .gif extension.

Use animated_preview.url only when your renderer supports its mime_type. An image element can display GIF or animated WebP; video formats require a video player. If this optional field is missing or loading fails, fall back to url. Keep the full url on the selected object. A static preview_url is a loading placeholder or final error fallback.

Load the next page

Read pagination.has_next and request pagination.next_page when available. Keep the query and limit unchanged. Treat total as response metadata rather than a promise that every result will remain available.

{
  "page": 1,
  "limit": 12,
  "total": 120,
  "has_next": true,
  "next_page": 2,
  "offset": 0
}

Handle errors thoughtfully

Check the HTTP status before reading a successful response. Search requires q; missing search text returns 400. An unavailable item can return 404. Service or upstream failures can return 503. Show a useful empty state separately from a failed request.

The JavaScript client exposes GifSnapError with code (http, network, timeout, or invalid_response), an optional HTTP status, and retryAfterSeconds when available. Cancellation preserves the signal’s reason, normally AbortError. Requests time out after 15 seconds by default; configure timeoutMs when creating a client to change this.

Moving an existing Tenor integration? Follow the migration guide.