/*
 * Legal Disclaimer for Web license
 *
 * License to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 *
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media.
 *
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * flatfile.com (monthly pageviews: <50K)
 *
 */

/* complete */

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Regular.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Bold.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Italic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-BoldItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-BoldItalic.woff")
      format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BookItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BookItalic.woff")
      format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Medium.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Medium.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-MediumItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-MediumItalic.woff")
      format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Black.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Black.woff")
      format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BlackItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BlackItalic.woff")
      format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Thin.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ThinItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ThinItalic.woff")
      format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Light.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-LightItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-LightItalic.woff")
      format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlack.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlack.woff")
      format("woff");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlackItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlackItalic.woff")
      format("woff");
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

/* Friends Fonts */
@font-face {
  font-family: "Friends";
  src: url("https://flatfile.com/fonts/Friends-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Friends";
  src: url("https://flatfile.com/fonts/Friends-UltraBold.otf")
    format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Light mode overrides */
:root {
  --primary: 0 0 0;
  --background-light: 255 255 255;
  --text-light: 0 0 0;
  --border-light: rgba(0, 0, 0, 0.1);

  /* Light mode grays */
  /* --gray-50: 0 0 0; */
  /* --gray-100: 0 0 0; */
  --gray-200: 0 0 0;
  --gray-300: 0 0 0;
  --gray-400: 0 0 0;
  --gray-500: 0 0 0;
  --gray-600: 0 0 0;
  --gray-700: 0 0 0;
  --gray-800: 0 0 0;
  --gray-900: 0 0 0;
  --gray-950: 0 0 0;
}

/* Dark mode overrides */
:root.dark {
  --primary: 255 255 255;
  --background-dark: 0 0 0;
  --text-dark: 255 255 255;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* Dark mode grays */
  --gray-50: 255 255 255;
  --gray-100: 255 255 255;
  --gray-200: 255 255 255;
  --gray-300: 255 255 255;
  --gray-400: 255 255 255;
  --gray-500: 255 255 255;
  --gray-600: 255 255 255;
  --gray-700: 255 255 255;
  --gray-800: 255 255 255;
  --gray-900: 255 255 255;
  --gray-950: 255 255 255;
}

/* Square all corners */
* {
  border-radius: 0 !important;
}

/* Hide dark mode toggle border*/
button[aria-label="Toggle dark mode"] {
  border: none;
  background-color: transparent;
}

/* Hide scrollbar */
* {
  -ms-overflow-style: none !important;  
  scrollbar-width: none !important;
}

/* Change font weight for text-2xl */
.text-2xl {
  font-weight: 450 !important;
}

/* Hide .h-5 elements */
.h-5 {
  display: none;
}

/* Uppercase and add letter spacing to left nav headers */
.pl-4 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Remove text transform and letter spacing for table of contents */
#table-of-contents-content .pl-4 {
  text-transform: none;
  letter-spacing: normal;
}

/* Dark mode hover background buttons lighter shades */
button.relative:not(.dark):hover {
  background-color: rgba(250, 250, 250, 0.1); 
}

/* Remove hover background on buttons */
html [class*="group-hover:bg-gray-200/50"],
html [class*="dark:group-hover:bg-gray-700/60"],
html .group:hover {
  background-color: transparent !important;
  transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Light mode card border color should be black */
.card.block.not-prose {
  border-color: black; /* Light mode */
}
/* Dark mode card border color should be white */
:root.dark .card.block.not-prose {
  border-color: white; /* Dark mode */
}

/* Make filter tags text more visible in dark mode */
.dark .dark\:text-gray-300 {
  color: rgba(255, 255, 255, 0.9) !important; /* Brighter white for better visibility */
}

/* Increase contrast for filter tag backgrounds in dark mode */
.dark .dark\:bg-gray-900 {
  background-color: rgba(30, 30, 30, 0.8) !important; /* Slightly lighter background */
}

/* Improve hover state visibility in dark mode */
.dark .dark\:text-gray-300:hover {
  color: white !important;
  background-color: rgba(50, 50, 50, 0.9) !important;
}

/* ONLY fix selected filter tags in dark mode */
.dark #changelog-filters button:not(.dark\:bg-gray-900),
.dark #changelog-filters-content button:not(.dark\:bg-gray-900) {
  background-color: #444 !important; /* Dark gray background */
  color: white !important; /* White text */
  border: 1px solid white !important; /* White border */
}

/* Fix hover state in light mode */
#changelog-filters-content button:hover {
  color: white !important; /* Ensure text is white on hover */
}

An SDK wrapper that enables you to seamlessly integrate a secure and user-friendly data import experience into your client-side application

@flatfile/react

flatfile.com

Explore our guides and examples to implement Flatfile.

Flatfile Developer Docs

A selection of example projects to get started with.

Example Projects

Notable additions and updates to the Flatfile platform

Platform

Notable additions and updates to Flatfile core libraries

SDKs

Notable additions and updates to Flatfile plugins

Plugins

The Flatfile CLI is a command-line tool that simplifies the integration process with Flatfile by providing developers with commands to manage and configure their integration from their local environment.

flatfile

Listener combines event handling capabilities with Flatfile-specific functionality, such as working with Flatfile records and sessions. Simply put, it receives events and it responds to events.

@flatfile/listener

@flatfile/javascript

@flatfile/angular

@flatfile/vue

A plugin for parsing an XLSX file and extracting it into Flatfile.

@flatfile/plugin-xlsx-extractor

A plugin for parsing a JSON file and extracting it into Flatfile.

@flatfile/plugin-json-extractor

A plugin for parsing an XML file and extracting it into Flatfile.

@flatfile/plugin-xml-extractor

A plugin for decompressing a zip file and uploading the decompressed files into Flatfile.

@flatfile/plugin-zip-extractor

A plugin for parsing a delimited file and extracting it into Flatfile.

@flatfile/plugin-delimiter-extractor

A plugin for parsing a PDF file and extracting it into Flatfile.

@flatfile/plugin-pdf-extractor

A plugin that exports a function named `recordHook` that sets up an event listener for the `commit:created` event. The purpose of this plugin is to provide a concise syntax for running custom logic on individual data records in Flatfile.

@flatfile/plugin-record-hook

A plugin that automatically converts the initial user-inputted data to the correct type needed for that field so it can be processed.

@flatfile/plugin-autocast

@flatfile/plugin-dedupe

A plugin to provide automapping imported files for headless workflows.

@flatfile/plugin-automap

A plugin for exporting data in Flatfile a Workbook.

@flatfile/plugin-export-workbook

A plugin for egressing data via a webhook.

@flatfile/plugin-webook-egress

A plugin that automatically converts JSON Schema to the Flatfile Blueprint, a powerful DDL (Data Definition Language) created by Flatfile with a focus on validation and data preparation.

@flatfile/plugin-convert-json-schema

A plugin that automatically converts YAML Schema to the Flatfile Blueprint, a powerful DDL (Data Definition Language) created by Flatfile with a focus on validation and data preparation.

@flatfile/plugin-convert-openapi-schema

A plugin that automatically converts SQL DDL to the Flatfile Blueprint, a powerful DDL (Data Definition Language) created by Flatfile with a focus on validation and data preparation.

@flatfile/plugin-convert-sql-ddl

A plugin that automatically converts OpenAPI Schema to the Flatfile Blueprint, a powerful DDL (Data Definition Language) created by Flatfile with a focus on validation and data preparation.

A plugin that lets you easily attach your implementation of the class-based schema configuration library `@flatfile/configure` to `@flatfile/listener`

@flatfile/plugin-dxp-configure

A plugin that makes working with Flatfile Jobs more streamlined.

@flatfile/plugin-job-handler

A plugin that streamlines the configuration of new Flatfile spaces.

@flatfile/plugin-space-configure

@flatfile/util-extractor

@flatfile/util-file-buffer

This plugin handles response rejections returned from an external source.

@flatfile/util-response-rejection

Securely and easily build an embedded Flatfile import experience into your client-side application behind your own authentication using a publishable key with very limited scope.

Getting started

Use Flatfile in a collaborative data onboarding project with your customer.

Projects

Workbooks

Create a custom Flatfile app in this step by step guide

Learn how to listen and respond to events in Flatfile.

Setup a listener

Configure a place for collecting data by creating a Space.

Configure a Space

Add validations and transformations to your listeners

Transform and validate data

Create a simple submit Action to export your data

Configure a submit Action

Publish your code to Flatfile and move beyond this simple sandbox

Deploy to Flatfile

Learn how to process data with Data Hooks

Handling data

Using actions

Dynamically build your Space configuration as it's created.

Dynamically configure anything

Narrow down the scope of Spaces, Workbooks, and Sheets.

Scoping with Namespaces

Store descriptive information or data that provides additional context.

Utilizing metadata

Egress out

Learn how to customize the look and feel of Flatfile to match your brand.

Theme your Space

Learn how to limit what Guests see in their sidebar.

Customize the guest sidebar

Learn how to build pages in your sidebar with Documents.

Build Documents

Learn how to securely use credentials in listeners.

Share secrets

Learn how to automatically map your data fields.

Automate with automap

Translate and customize your Space with text overrides

Translating your Space

Accepting Additional fields

Learn how to filter data in Sheets with FFQL.

Using Flatfile query language

Implementing Data Retention Policies in Flatfile.

Data Retention

Learn how to implement our API in your listeners and scripts

Using our API

Multi-Part Jobs

Learn how to use AI Assist to make bulk edits to your data efficiently and accurately.

Leverage AI transformations

Bubble.io

Listeners

Events

Actions

Jobs

Blueprint is a powerful DDL (Data Definition Language) created by Flatfile with a focus on validation and data preparation.

API

Core Libraries

Plugins

SDKs

@flatfile/react

Subscribe to updates via RSS