BuildShip Logo
BuildShip Community
TemplatesFirestore to Framer CMS

Firestore to Framer CMS

Fetch and return a list of records from a Firestore collection. Accepts a collection name as input, queries up to 100 documents from that collection, and outputs an array of objects containing the fields and values for each record.

17

Report this template

Select the reason for reporting

Describe the issue in detail

Share template

Link to template

https://templates.buildship.com/template/9QeAp2QST6vE/
BuildShipBy BuildShip

Select an example

Inputs

Collection Name

career_toons
This is a static example using sample inputs. Remix the template to run it with your own values.

Output

Read me

Firestore to Framer CMS

Sync data from any Firestore database to Framer CMS using the BuildShip Framer Plugin and a workflow to keep your data in sync. An API like experience to write and update data for your Framer websites.

Prerequisites

  • A Framer project with the BuildShip plugin installed (learn more about the installation process below)
  • Data stored in a Firestore database (use the built-in BuildShip database or connect to your own Firestore database - learn more)

How to use

1. Adding the BuildShip Framer Plugin

  • In your Framer Project, click on the Plugins section in the top bar of your Framer Project.
  • Visit the Framer Plugin Marketplace by clicking on the “Browse Plugin” option.
  • Search for “BuildShip” in the search tab on your marketplace. Choose the free BuildShip Plugin and click on the “Open Plugin in” button to add it to your own project.

2. Setting up the workflow

Now we need to set up this workflow to sync data from Firestore to Framer Plugin.

  • Add the name of the BuildShip Collection you want to sync data from Firestore to Framer CMS.
  • Optionally, we can replace the BuildShip Database Collection Query node with a Firestore Collection Query node to fetch data from your own Firestore collection. To do this, you need to connect your Firestore database to your BuildShip Account. Follow the steps mentioned in the [BuildShip documentation](https://docs.buildship.com/tutorials/firebase-project#option-2-connecting-to-your-own-firebase-project).
  • Filter the queried data to include the fields you want to sync to Framer CMS in the desired format.
  • Test out the workflow by running the workflow and checking the data format in BuildShip.
  • Lastly, add a REST API Trigger to send the data to the BuildShip Framer Plugin. For the configuration, add any path you want to use for the API endpoint and set the method to POST.

Supported Fields

The supported Framer fields include:

  • boolean - true or false
  • color - hexcode format #000000
  • number
  • string
  • formatted text - markdown text
  • image - URL of the image
  • link - URL of the link
  • date - ISO 8601 format YYYY-MM-DDTHH:MM:SSZ
  • file - URL of the file

💡TIP: In case of any other field type, create nodes using AI to convert the field to a supported field type.

3. Connecting the workflow to Framer CMS

  • Go back to your BuildShip plugin which now prompts you to create a new collection which would be synced with the data coming from your BuildShip API.
  • We can modify the name of the collection as per our preference.
  • Now you’ll be redirected to the new CMS collection.

🌟 NOTE: This collection can be solely modified via the data returned by your BuildShip Workflow. The fields for this collection won’t be editable.

4. Map the fields and Sync

Make sure you have your workflow tested and shipped before mapping the fields in your Framer CMS. We can have a simple Rest API Call Trigger to trigger our BuildShip Workflow.

  • Copy the Endpoint URL from the ship panel once your workflow is shipped.- Add the URL in the plugin modal to make a POST request to fetch the response from the API.

🌟 One quick note, the BuildShip Framer Plugin uses the first entry from the incoming data to set fields for the entire collection. Make sure that the first entry of the response has all the field ids, even if they are empty.

  • Once the data is fetched, the extracted fields are auto-populated in the mapping UI.
  • The selector lets you unselect the fields you wish to exclude from the CMS collection.
  • The **Name** column lets you rename the fields for your CMS.
  • The **Type** dropdown field lets you select the field type of the incoming data. The plugin intelligently maps the incoming data to the best suited data type depending upon its value.

In case of empty fields in the first entry, the type defaults to string. Make sure to double check the fields before adding them to the CMS.

The plugin supports updating the CMS data along with the fields.

Errors and Debugging

You’ll be notified by Framer in case of any errors. It is always helpful to use Chrome Dev Tools (press F12 on Windows or Option + ⌘ + I on Mac) to check for error logs and the fetched data to get further insights into the issue.

If you’re ever stuck, write to us at support@buildship.com or submit an in-app support request. Learn more

Related Templates

BuildShip Database
OpenAI

AI Chatbot

Create a simple AI Chatbot with BuildShip and OpenAI Assistant, using a BuildShip database to keep track of the thread ID to enable conversation history.

BuildShipBy BuildShip
2471
OpenAI

AI Assistant

Great for building chatbots and virtual assistants.

BuildShipBy BuildShip
1395
BuildShip Workspace

Scrape Website

Extract all visible text from a website. Enter a website URL and optionally a CSS selector to target a specific section; the tool scrapes the main page or, if chosen, all linked pages, returning the collected text content as output.

BuildShipBy BuildShip
1380
Supabase

Supabase CRUD Operations

Simple template to showcase how you can create workflows for Read, Write/Update and Delete operations on your Supabase database

BuildShipBy BuildShip
798
Anthropic

AI Web Scraper (Anthropic)

Extract structured data from any website by specifying the fields you want. Enter a website URL and a comma-separated list of field names; the tool scrapes the page and returns the extracted information as a structured array of objects.

BuildShipBy BuildShip
721
Google Sheets
OpenAI

Chat with Google Sheets

Create an AI Assistant that can chat with your data on Google Sheets. This template is connected to a Furniture store's inventory data on Google Sheets and users can chat with the data to get meaningful recommendation for products.

BuildShipBy BuildShip
660