# How to Integrate Retool with Pixabay API

- Tool: Retool
- Difficulty: Beginner
- Time required: 15 minutes
- Last updated: April 2026

## TL;DR

Connect Retool to the Pixabay API by creating a REST API Resource with your Pixabay API key passed as a query parameter. Search and browse royalty-free images and videos to build internal media library tools where teams can search stock imagery, preview results, save selections to a database, and manage approved assets — all without leaving the internal tools environment.

## Build a Pixabay Stock Image Search Panel in Retool

Marketing teams, content creators, and developers regularly need royalty-free stock images for internal projects, presentations, and content production. The usual workflow — opening a browser tab, searching Pixabay, downloading images, uploading to a shared drive — creates friction that accumulates across dozens of daily searches. Building a Pixabay search panel directly in Retool eliminates this workflow entirely and allows teams to search, preview, and save images to an internal library without ever leaving the tools environment.

With a Retool-Pixabay integration, you can build an image search dashboard where team members search by keyword, filter by image type (photo, illustration, vector), category, and color, preview thumbnail results in a grid-style table, and save selected images (URL + metadata) to a Retool Database table or your own PostgreSQL database for team-managed asset libraries. Add a tagging system to categorize saved images by project or content type, and your internal media library becomes a self-serve resource for the whole team.

Pixabay's API is one of the simplest to integrate — it uses a single API key as a URL parameter, requires no OAuth flow, and returns well-structured JSON with direct image URLs. The free tier allows 100 requests per minute, which is more than sufficient for internal tool usage.

## Before you start

- A free Pixabay account (pixabay.com) with an API key — register and find your key at pixabay.com/api/docs
- A Retool account with permission to create Resources
- Optional: a Retool Database or connected PostgreSQL table to store saved images
- Familiarity with Retool's Table component and Image column type

## Step-by-step guide

### 1. Get your Pixabay API key and configure the Resource

Start by obtaining your Pixabay API key. Register for a free Pixabay account at pixabay.com if you don't already have one. Once logged in, visit pixabay.com/api/docs — your personal API key is displayed at the top of the documentation page. Copy this key.

Before creating the Retool resource, store your API key securely. Navigate to your Retool instance's Settings tab in the left sidebar, click Configuration Variables, then Create Variable. Name it PIXABAY_API_KEY, paste your API key as the value, and optionally mark it as Secret to restrict it to resource configurations.

Now go to the Resources tab in Retool and click Add Resource. Select REST API from the resource type list. Name the resource 'Pixabay API'. In the Base URL field, enter https://pixabay.com.

Pixabay authenticates via a query parameter named key. In the Default URL Parameters section, add: Key = key, Value = {{ retoolContext.configVars.PIXABAY_API_KEY }}. This automatically appends your API key to every query URL.

Also add a default URL parameter to ensure consistent response format: Key = response_group, Value = high_resolution (optional — include this if your plan supports it).

Click Save Changes. Test with a quick GET to /api/ with a search term to confirm the resource is working.

**Expected result:** The Pixabay API REST resource is saved with the API key configured as a default URL parameter. A test query to /api/?q=nature returns image results in JSON format with hits array containing image objects.

### 2. Build the image search query and display results

Create the main image search query. In your Retool app, open the Code panel and click the + icon to add a query. Name it searchImages, select the Pixabay API resource, set Method to GET, and set the path to /api/.

Add the following URL parameters for search and filtering: Key = q, Value = {{ textInput_search.value || 'nature' }} (the search keyword), Key = image_type, Value = {{ select_imageType.value || 'all' }}, Key = category, Value = {{ select_category.value || '' }}, Key = orientation, Value = {{ select_orientation.value || 'all' }}, Key = per_page, Value = 30, Key = page, Value = {{ pagination.pageNumber || 1 }}, Key = safesearch, Value = true.

Add the following UI components: a TextInput named textInput_search for keywords, Select dropdowns for image_type (options: all, photo, illustration, vector), category (options: backgrounds, fashion, nature, science, education, feelings, health, people, religion, places, animals, industry, computer, food, sports, transportation, travel, buildings, business, music), and orientation (all, horizontal, vertical).

Configure searchImages to trigger automatically when textInput_search value changes (with a 500ms debounce to avoid excessive API calls while typing).

Create a JavaScript transformer to extract the image data from the Pixabay response and format it for display in a Retool Table with an Image column.

```
// JavaScript transformer — format Pixabay image results for Table display
const hits = data?.hits || [];

return hits.map(image => {
  return {
    pixabay_id: image.id,
    thumbnail: image.webformatURL,        // Use as Image column source
    preview_url: image.largeImageURL,     // For modal preview
    page_url: image.pageURL,              // Link back to Pixabay page
    type: image.type,
    tags: image.tags,
    views: image.views.toLocaleString(),
    downloads: image.downloads.toLocaleString(),
    likes: image.likes,
    comments: image.comments,
    user: image.user,
    width: image.imageWidth,
    height: image.imageHeight,
    size: `${image.imageWidth}×${image.imageHeight}`,
    // For saving to database
    web_url: image.webformatURL,
    large_url: image.largeImageURL || image.webformatURL,
    attribution: `Photo by ${image.user} on Pixabay`
  };
});
```

**Expected result:** The image search panel shows Pixabay results as a table with thumbnail images displayed inline. Changing the search keyword or filters updates the results automatically. The table shows image tags, dimensions, and engagement metrics alongside each thumbnail.

### 3. Add image preview and full-resolution viewing

Add a modal component for viewing full-size image previews. From the Component panel, drag a Modal component onto the canvas. Name it modal_preview. Inside the modal, add an Image component and a Text component.

Set the Image component's source to {{ table_images.selectedRow?.preview_url || table_images.selectedRow?.thumbnail }}. Set the Text component to display attribution information: {{ 'Photo by ' + table_images.selectedRow?.user + ' on Pixabay' }}.

Add a Button component named btnPreview with the label 'Preview Full Size'. Set its event handler to Open → modal_preview. Disable the button when no row is selected: {{ !table_images.selectedRow }}.

Also add a copy-URL button: add another Button named btnCopyUrl with label 'Copy URL'. Set its event handler to run JavaScript: navigator.clipboard.writeText(table_images.selectedRow.large_url); (use a JavaScript event handler). Add a success notification that appears after the copy.

For Pixabay's attribution requirement: Pixabay's license encourages attribution. In any externally visible interface, include a text label showing the attribution string from the transformer. For internal-only tools, attribution is optional but recommended as good practice.

Add a Pagination component connected to searchImages to enable browsing through result pages (Pixabay can return hundreds of results for popular search terms).

```
// JavaScript event handler for 'Copy Image URL' button
// Set this as the button's onClick handler (JavaScript mode)
try {
  await navigator.clipboard.writeText(table_images.selectedRow.large_url);
  showNotification({ title: 'URL Copied', description: table_images.selectedRow.large_url, notificationType: 'success' });
} catch (err) {
  // Fallback for older browsers
  const textArea = document.createElement('textarea');
  textArea.value = table_images.selectedRow.large_url;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('copy');
  document.body.removeChild(textArea);
  showNotification({ title: 'URL Copied', notificationType: 'success' });
}
```

**Expected result:** Selecting an image row and clicking 'Preview Full Size' opens the modal showing the full-width image with attribution text. The 'Copy URL' button copies the large image URL to clipboard with a success notification.

### 4. Save selected images to a team asset library

Build a save-to-library feature that stores selected Pixabay images in a Retool Database table for team access. First, create a Retool Database table to store saved assets. Navigate to Retool Database (in the left sidebar), click Create table, and name it pixabay_assets with columns: id (auto-increment), pixabay_id (integer), title (text), thumbnail_url (text), large_url (text), page_url (text), tags (text), user_name (text), project_tag (text), saved_at (timestamp, default now()), saved_by (text).

Create a query named saveImage with Method INSERT targeting the pixabay_assets Retool Database table. In the table editor's New Query section, use the GUI mode to build the INSERT: set each column value to the corresponding field from table_images.selectedRow and textInput_projectTag.value.

Alternatively, create a SQL query against your own PostgreSQL resource:

Add a TextInput named textInput_projectTag (placeholder: 'Project tag, e.g., Q2 Campaign') and a Button named btnSaveImage with label 'Save to Library'. Wire btnSaveImage's onClick event to trigger saveImage. On success, show a notification and clear the project tag input.

Create a second Table component named table_library with a query named getLibrary that fetches all saved images from pixabay_assets, ordered by saved_at DESC. Add a delete button column to remove images from the library. Add a search input that filters the library by project_tag.

```
-- SQL query to save image to PostgreSQL asset library
-- Resource: your PostgreSQL connection
INSERT INTO pixabay_assets (
  pixabay_id,
  title,
  thumbnail_url,
  large_url,
  page_url,
  tags,
  user_name,
  project_tag,
  saved_at,
  saved_by
) VALUES (
  {{ table_images.selectedRow.pixabay_id }},
  {{ table_images.selectedRow.tags.split(',')[0] }},
  {{ table_images.selectedRow.thumbnail }},
  {{ table_images.selectedRow.large_url }},
  {{ table_images.selectedRow.page_url }},
  {{ table_images.selectedRow.tags }},
  {{ table_images.selectedRow.user }},
  {{ textInput_projectTag.value }},
  NOW(),
  {{ current_user.fullName }}
)
ON CONFLICT (pixabay_id, project_tag) DO NOTHING
RETURNING id;
```

**Expected result:** Selecting an image, entering a project tag, and clicking 'Save to Library' inserts the image record into the database. The saved images table updates to show the new entry. The library view is immediately queryable by other Retool users.

## Best practices

- Store your Pixabay API key as a configuration variable in Retool rather than hardcoding it in query parameters — this makes it easy to rotate the key without updating every query.
- Add a 500ms debounce to the search text input to avoid hitting Pixabay's rate limit of 100 requests per minute — trigger the search query only after the user has stopped typing.
- Always include the safesearch=true parameter for internal tools used by a broad team audience — Pixabay's open library includes adult content that safesearch=true filters out.
- Use the webformatURL for thumbnail display in tables and the largeImageURL for full-size previews in modals — loading large images in table cells significantly slows the dashboard.
- Include pixabay_id in your saved assets database table as a unique identifier to prevent duplicate saves and to enable future re-fetching of updated metadata for saved images.
- Add project_tag or category fields to your saved assets table to enable team-level organization of the library — a flat list of hundreds of saved images becomes unmanageable without tagging.
- Display Pixabay attribution ('Photo by [user] on Pixabay') alongside images in any externally visible context, even though Pixabay's license doesn't strictly require it for free images — it's good practice.
- Cache Pixabay search results for frequently used search terms in a Retool Database table to reduce API calls and provide instant results for common searches like 'background', 'business', or 'technology'.

## Use cases

### Build a team stock image search and save tool

Create a Retool app where team members can search Pixabay by keyword with filters for image type, category, and orientation. Display results as a grid with thumbnail images, attribution info, and a 'Save to Library' button that adds the selected image URL and metadata to a shared database table. Add a tag input so each saved image can be categorized by project.

Prompt example:

```
Build a stock image search panel with a text input for search query, dropdowns for image_type (photo/illustration/vector), category, and orientation, a Table component with an Image column showing thumbnails and columns for tags, views, and downloads, and a Save button that inserts the selected image's URL, tags, and pixabay_id into a Retool Database table.
```

### Internal media library browser with saved assets

Build a two-tab Retool app: a Search tab for querying Pixabay in real-time, and a Library tab showing all previously saved images from your database. The Library tab allows teams to filter by project tag, sort by date added, preview full-size images in a Modal component, and copy image URLs to clipboard for use in documents and designs.

Prompt example:

```
Create a media library app with two views: a Pixabay search view with live results and save buttons, and a Saved Assets view querying a PostgreSQL table of saved images, filterable by project_tag and media_type, with an Image column, copy-URL button, and delete button for managing the library.
```

### Video stock footage search panel for content teams

Build a Retool video search panel that queries Pixabay's video endpoint, displays video thumbnails with their duration and resolution, and allows content teams to save video URLs to a production database for use in video projects. Include filters for video type (film, animation) and minimum resolution.

Prompt example:

```
Build a video search panel using Pixabay's /api/videos/ endpoint with search input and video_type filter, a Table showing video thumbnail URLs, duration, width, height, and download counts, and a Save Video button that inserts the video_id, page_url, and selected video size URL into a content database.
```

## Troubleshooting

### API returns 'error: Invalid or missing API key' on all requests

Cause: The API key in the Retool resource configuration is missing, incorrect, or not being appended as a query parameter. Pixabay requires the key parameter on every request.

Solution: Verify your API key at pixabay.com/api/docs — your personal key is shown at the top of the page when logged in. In the Retool resource settings, confirm the Default URL Parameters section has Key = key and Value = {{ retoolContext.configVars.PIXABAY_API_KEY }}. Check that the configuration variable PIXABAY_API_KEY is correctly set with the full API key string.

### Image thumbnails don't display in the Retool Table — cells show a broken image icon

Cause: The Table column is not set to the Image column type, or the image URL in the column data references a Pixabay URL that requires referrer validation.

Solution: Click the thumbnail column header in the Table component → change column type to Image → set the Image URL to {{ currentRow.thumbnail }}. Pixabay's webformatURL images are publicly accessible without referrer restrictions, so they should load in Retool's preview. If thumbnails still fail to load, try the previewURL field instead (smaller 150px thumbnail) which has fewer access restrictions.

### Search returns no results for certain keyword queries

Cause: Pixabay's search applies content safety filters by default. Certain terms may be too generic, too specific, or restricted by the safesearch filter. Non-English search terms may also return fewer results.

Solution: Verify the query URL parameter value is correctly bound to the search input: {{ textInput_search.value }}. Remove or set safesearch=false for internal-only tools if the safesearch filter is too aggressive for your use case. For non-English search terms, Pixabay supports multiple languages via the lang parameter — add Key = lang, Value = en to force English results.

### Rate limit error (429 Too Many Requests) after a few searches

Cause: Pixabay's API allows 100 requests per minute for the free tier. Configuring the search query to trigger on every keystroke (without debouncing) quickly exhausts this limit during active searching.

Solution: Add a 500ms debounce to the search text input by setting the query's trigger mode to 'Debounced' with a 500ms delay in Retool's query settings. This ensures the API is only called after the user stops typing for half a second rather than on every keystroke. Alternatively, change the search trigger to a Button press rather than automatic triggering.

## Frequently asked questions

### Is Pixabay API free to use, and are there any usage limits?

Yes, Pixabay's API is free to use for registered users. The free tier allows 100 requests per minute and returns images up to 1280px wide. By default, the API returns only preview-sized images — high-resolution image access (up to 7000px) requires contacting Pixabay and agreeing to their API terms for extended access. There is no limit on total daily requests for the free tier.

### Do I need to provide attribution when using Pixabay images in my internal tools?

Pixabay images are licensed under the Pixabay License, which allows use for commercial and non-commercial purposes without attribution required. However, Pixabay encourages attribution ('Photo by [user] on Pixabay') as good practice. For content you publish externally, attribution is always a good idea. For purely internal Retool tools, attribution is optional but easy to include using the user and pageURL fields from the API response.

### Can I search Pixabay videos in addition to images?

Yes, Pixabay has a separate video endpoint at /api/videos/ that works identically to the image endpoint. Use the same API key and query parameters, but change the path from /api/ to /api/videos/. The response includes the video_id, video_type, thumbnail URL, duration, and multiple resolution download URLs (tiny, small, medium, large). Set up a separate Retool query for video search and add a tab component to your app to switch between image and video search modes.

### How do I display Pixabay images in a grid layout rather than a table in Retool?

Retool's Table component with Image column type is the most practical way to display images, and it can approximate a grid layout by reducing column widths and increasing row height. For a true masonry grid, use a Retool List View component with a custom HTML/Image template per item. Set the List View's data to {{ searchImages.data.hits }} and configure each item to show the thumbnail image and tags using the Image and Text components within the list item template.

### Can multiple team members share the same Pixabay saved asset library in Retool?

Yes, if you store saved images in a Retool Database table or shared PostgreSQL database, all Retool users with access to the app can see and manage the same library. Queries to the shared database table return the same data for all users. You can personalize the library by adding a saved_by column (populated with {{ current_user.email }}) and adding filter options to show 'My saves' or 'All team saves'.

---

Source: https://www.rapidevelopers.com/retool-integrations/pixabay-api
© RapidDev — https://www.rapidevelopers.com/retool-integrations/pixabay-api