# GifSnap integration reference

Updated: 2026-10-01. Official documentation: https://gifsnap.com/docs

GifSnap offers GIF and sticker search for app composers, chats and other interfaces. Use a ready-made picker for React, Angular, SwiftUI or Jetpack Compose, the JavaScript client for your own UI, or the HTTP API from any language.

## Choose an SDK

| Application | Integration | Requirements |
| --- | --- | --- |
| React or Next.js | `@rowix/gifsnap-react` | React 18.2+ or 19; stylesheet required; client component in Next.js |
| Vue, Svelte, vanilla JS or Node | `@rowix/gifsnap-js` | ESM; modern browsers or Node.js 18+; no React dependency |
| Angular | `@rowix/gifsnap-angular` (includes JavaScript client) | Angular 21.2.24+ within 21, or 22; standalone component |
| iOS SwiftUI | `GifSnapUI` Swift package product | iOS 16+, Swift tools 5.9+ |
| Swift without a picker | `GifSnap` Swift package product | iOS 16+ or macOS 13+ |
| Android Compose | `com.rowix.gifsnap:gifsnap-compose` | Android API 28+, compileSdk 36+, Kotlin 2.2.10+, Java target 17 |
| Android custom UI | `com.rowix.gifsnap:gifsnap-client` | Android API 23+, same build requirements |
| Flutter, Python, Go or another language | REST API | HTTPS client; no dedicated SDK claimed |

The machine-readable distribution index is https://gifsnap.com/sdk-manifest.json.
React 0.1.2, JavaScript 0.1.0 and Angular 0.1.0 are published on npm. The commands below install the published packages. Angular installs its JavaScript dependency automatically. Existing versioned HTTPS archives remain available, with checksums in the distribution manifest.

## React

```sh
npm install @rowix/gifsnap-react
```

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

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

Selection returns the original media record. Store it as an attachment in your application's own state. The picker does not send the message for you. See https://gifsnap.com/docs/react for props and selection state.

For Next.js App Router, put `'use client';` before imports in the component that renders the picker. Import `@rowix/gifsnap-react/styles.css` once in `app/layout.tsx`. See https://gifsnap.com/docs/nextjs.

## JavaScript, Vue and Svelte

```sh
npm install @rowix/gifsnap-js
```

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

const client = createGifSnapClient({ timeoutMs: 15000 });
const controller = new AbortController();

try {
  const result = await client.search({
    query: 'hello', page: 1, limit: 12, signal: controller.signal,
  });
  console.log(result.data, result.pagination.next_page);
} catch (error) {
  if (!controller.signal.aborted) {
    console.error(error instanceof GifSnapError ? error.code : error);
  }
}
// Call controller.abort() in component cleanup or before replacing this request.
```

Methods: `search({ query, page?, limit?, signal? })`, `trending({ page?, limit?, signal? })`, `searchStickers({ query, page?, limit?, signal? })`, `trendingStickers({ page?, limit?, signal? })`.

Complete Vue 3 and Svelte 5 components: https://gifsnap.com/docs/javascript. The client has no React dependency and does not supply a framework-specific UI component for Vue or Svelte.

## Angular

Install the picker; npm resolves its JavaScript client dependency:

```sh
npm install @rowix/gifsnap-angular
```

```ts
import { Component } from '@angular/core';
import { GifSnapPicker } from '@rowix/gifsnap-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GifSnapPicker],
  template: '<gifsnap-picker (gifSelect)="select($event)" />',
})
export class App {
  select(gif: { url: string }) { console.log(gif.url); }
}
```

The component includes its styles. No React dependency or global stylesheet import is needed. Guide: https://gifsnap.com/docs/angular.

## iOS and Swift

In Xcode, add the package `https://github.com/rowixgroup/gifsnap-swift` at version 0.1.1. Add the `GifSnapUI` product to your iOS target and `GifSnap` when you need model/client types directly.

```swift
import SwiftUI
import GifSnapUI

struct GIFComposer: View {
    var body: some View {
        GifSnapPicker { gif in
            print(gif.url)
        }
    }
}
```

For a Swift package manifest use `.package(url: "https://github.com/rowixgroup/gifsnap-swift.git", from: "0.1.1")` and `.product(name: "GifSnapUI", package: "gifsnap-swift")` on the consuming target.

The client-only product is `GifSnap`. `let client = try GifSnapClient()` creates a Foundation client; `try await client.search(query: "hello", page: 1, limit: 12)` returns data and pagination. `GifSnapUI` is an iOS picker; a macOS picker is not included. Guide: https://gifsnap.com/docs/swift.

## Android and Kotlin

Add GifSnap's Maven repository in `settings.gradle.kts`:

```kotlin
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://gifsnap.com/sdk/android") {
            content { includeGroup("com.rowix.gifsnap") }
        }
    }
}
```

Add the dependency in your app's `build.gradle.kts`:

```kotlin
dependencies {
    implementation("com.rowix.gifsnap:gifsnap-compose:0.1.1")
}
```

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.rowix.gifsnap.client.GifSnapClient
import com.rowix.gifsnap.compose.GifSnapPicker

@Composable
fun MessageGifPicker(onGifSelected: (String) -> Unit) {
    val client = remember { GifSnapClient() }
    GifSnapPicker(
        client = client,
        onSelect = { gif -> onGifSelected(gif.url) },
    )
}
```

The host must enable Compose using the Kotlin Compose compiler plugin. Give the picker bounded height, such as a sheet or screen. The client dependency merges `INTERNET` permission. For a custom interface use `com.rowix.gifsnap:gifsnap-client:0.1.1`. The artifacts are hosted by GifSnap, not on Maven Central or JitPack. Guide: https://gifsnap.com/docs/android.

## HTTP API

Base URL: `https://gifsnap.com/api/v1`. No API key is required today; browser CORS is supported. The service is best effort, without a published SLA. OpenAPI: https://gifsnap.com/openapi.json.

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

| Method | Path | Purpose |
| --- | --- | --- |
| GET | `/gifs/search?q=hello&page=1&limit=12` | Search GIFs |
| GET | `/gifs/trending?page=1&limit=12` | Browse GIFs |
| GET | `/stickers/search?q=hello&page=1&limit=12` | Search stickers |
| GET | `/stickers/trending?page=1&limit=12` | Browse stickers |
| GET | `/gifs/{id}` | Look up the exact returned catalog ID, encoded as a path segment |

List responses contain `data[]` and `pagination`. Search also returns `query`. GIF lookup returns the media object directly, without a `data` wrapper. Search requires non-empty `q`. `page` starts at 1. `limit` accepts 1–50, default 25. Check HTTP status: missing search text returns 400, an unavailable lookup can return 404, and service failures can return 503. Empty data is a successful response, distinct from an error.

## Media playback and pagination

- Render `gif.url` for animation. `preview_url` may be a still image. GIF and animated WebP are supported by the native pickers.
- Preserve complete returned URLs, including query parameters. Do not derive file extensions or alter CDN URLs.
- Use `width` and `height` to reserve layout space. Keep item positions stable when appending results.
- To deduplicate your custom UI, retain the first matching exact `id`, exact full `url`, or optional verified `content_id`. Titles are not identities. Keep the original `id` for lookup.
- Request `pagination.next_page` only when `has_next` is true and the next page exists. Keep query and limit unchanged. Guard concurrent loads, cancel stale searches and show recoverable error/empty states. Stop automatic fetching on duplicate-only pages.
- Selection returns media metadata; the host application owns sending, saving and dismissal. SDK code is MIT licensed; that license does not transfer rights to returned media.

## Official source

- Web SDKs and framework examples: https://github.com/rowixgroup/gifsnap-sdk
- Swift and SwiftUI: https://github.com/rowixgroup/gifsnap-swift
- Android and Compose: https://github.com/rowixgroup/gifsnap-android

Use documented exports and versions. There is no `@gifsnap/react` package in this integration, and no dedicated Flutter/Python/Go SDK is claimed. These applications can use the HTTP API.