/*
 * Legal Disclaimer for Web licence
 *
 * Licence 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;
}

*,
:after,
:before {
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-text-opacity: 1;
}

html {
  font-family: CircularXXWeb, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-extrabold {
  font-family: Friends, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: normal;
}

header .text-sm,
h5 {
  font-weight: 400 !important;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  font-size: 13px;
}

.prose :where(h1, h2, h3):not(:where([class~="not-prose"] *)) {
  letter-spacing: normal;
}

:root {
  --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;
}

:root.dark {
  --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;
}

.border {
  border-width: 2px;
}

.\!bg-gray-400\/10 {
  background-color: transparent !important;
  border-width: 2px;
}

.rounded-full,
.rounded-md,
.rounded-lg,
.rounded-sm,
.rounded-xl {
  border-radius: 0;
}

.rounded-t-\[0\.68rem\] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ring-gray-400\/20 {
  --tw-ring-color: rgb(var(--gray-400));
}

.bg-zinc-50\/50 {
  background-color: #fff;
}

:is(.dark .dark\:border-gray-800\/50) {
  border-color: rgba(255, 255, 255, 0.3);
}

.shadow-md,
.bg-code-block {
  --tw-shadow: rgb(0, 0, 0) 8px 8px;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  margin-bottom: 1em;
}

img {
  border: 2px solid #000;
}

#navbar img,
#navbar button.w-8,
#navbar button.w-5 {
  border: 0;
}

html:not(.dark) .border-primary-light {
  border-color: #000;
}

html:not(.dark) .language-html,
html:not(.dark) .language-css,
html:not(.dark) .token.punctuation,
html:not(.dark) .token.plain-text {
  color: #000;
}

html:not(.dark) .token.keyword.control-flow,
html:not(.dark) .token.keyword.module {
  color: #884482;
}

html:not(.dark) .token.attr-name,
html:not(.dark) .token.builtin,
html:not(.dark) .token.char,
html:not(.dark) .token.deleted,
html:not(.dark) .token.selector,
html:not(.dark) .token.string {
  color: #8d4021;
}

html:not(.dark) .token.console,
:not(.dark) .token.interpolation,
html:not(.dark) .token.parameter {
  color: #5da8d0;
}

html:not(.dark) .token.keyword {
  color: #246295;
}

html:not(.dark) .token.function,
html:not(.dark) .token.function,
html:not(.dark) .token.maybe-class-name {
  color: #838348;
}

html:not(.dark) .token.boolean,
html:not(.dark) .token.constant,
html:not(.dark) .token.inserted,
html:not(.dark) .token.number,
html:not(.dark) .token.property,
html:not(.dark) .token.symbol,
html:not(.dark) .token.tag,
html:not(.dark) .token.unit {
  color: #768f68;
}

html:not(.dark) .token.entity,
html:not(.dark) .token.operator {
  color: #909090;
}

tml:not(.dark) .token.comment,
tml:not(.dark) .token.prolog {
  color: #4b7936;
}

html:not(.dark) .token.exports,
html:not(.dark) .token.maybe-class-name,
html:not(.dark) .token.maybe-class-name.token.maybe-class-name,
html:not(.dark) .token.property,
html:not(.dark) .token.variable {
  color: #427691;
}

html:not(.dark) code[class*="language-javascript"],
html:not(.dark) code[class*="language-jsx"],
html:not(.dark) code[class*="language-tsx"],
html:not(.dark) code[class*="language-typescript"],
html:not(.dark) pre[class*="language-javascript"],
html:not(.dark) pre[class*="language-jsx"],
html:not(.dark) pre[class*="language-tsx"],
html:not(.dark) pre[class*="language-typescript"] {
  color: #5d9dc0;
}

html:not(.dark) .token.console,
html:not(.dark) .token.interpolation,
html:not(.dark) .token.parameter {
  color: #7fb1cc;
}

html:not(.dark) .text-primary-light {
  color: #000;
}

#navbar :is(.dark a.dark\:text-primary-light) {
  color: #000;
}

html:not(.dark) .token.doctype .token.name {
  color: #5088a6;
}

html:not(.dark) .token.attr-value,
html:not(.dark) .token.attr-value .token.punctuation {
  color: #a45f44;
}

.bg-\[\#0F1117\] {
  background: #fff;
  border: 1px solid black;
}

.bg-\[\#0F1117\] .bg-black\/40 {
  background: transparent;
}

.prose :where(hr):not(:where([class~="not-prose"] *)) {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
}

:is(.dark .prose hr) {
  border-color: rgba(255, 255, 255, 0.2);
}

.border-t {
  border-top-width: 2px;
}

:not(pre) > code {
  border-radius: 0;
  background: transparent;
}

.bg-gray-200\/60 {
  background: rgb(var(--gray-200));
}

:is(.dark .dark\:bg-gray-600\/30) {
  background: rgb(var(--primary-dark));
}

.bg-gray-50 {
  background: rgb(var(--primary) / 0.1);
}

:is(.dark .dark\:bg-white\/10) {
  background: #fff;
}

:is(.dark .dark\:border-primary) {
  border-color: #fff;
}

.fill-primary {
  fill: #fff;
}
.fill-yellow-500 {
  fill: #000;
}

.font-medium {
  font-weight: 600;
}

p > code {
  color: #000;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  box-shadow: none;
  border-radius: 0;
  background-color: #000;
  color: #fff;
}

:is(.dark .dark\:border) {
  border-width: 2px;
}

#topbar-cta-button span,
#topbar-cta-button svg {
  background: rgb(var(--primary-dark));
  border: 0;
  color: #fff;
}

:is(.dark .dark\:border-background-dark) {
  border-color: rgb(var(--background-light) / 0.3);
}

button {
  border-width: 1px;
}

button.outline-none {
  border-width: 0;
}

:is(.dark .dark\:text-white\/50) {
  color: hsla(0, 0%, 100%, 1);
}

:is(.dark .dark\:bg-gray-800) {
  background-color: #000;
}

.ring-gray-900\/5 {
  --tw-ring-color: rgb(var(--primary-dark));
}

:is(.dark .dark\:fill-gray-300) {
  color: #000;
}

.text-zinc-400 {
  --tw-text-opacity: 1;
  color: #000;
}
:is(.dark .dark\:bg-zinc-500\/10) {
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.15);
}

:is(.dark\:bg-codeblock) {
  margin-bottom: 3rem;
}

:is(.dark .dark\:bg-white\/50) {
  background-color: hsla(0, 0%, 100%, 1);
}

.border-zinc-500\/20 {
  border-color: #000;
}

[aria-controls="Children attributes"] {
  border: 0;
}

.hover\:bg-gray-50\/50:hover {
  background-color: rgb(var(--gray-50) / 0.1);
}

:not(:is(.dark .dark\:bg-white\/\[0\.03\])).hover\:bg-gray-100\/90:hover > div {
  filter: invert(1);
  mix-blend-mode: difference;
}

.bg-gray-100\/50 {
  background-color: rgb(var(--gray-100) / 0.1);
}

:is(.dark .dark\:bg-white\/5) {
  background-color: rgba(255, 255, 255, 0.2);
}

html:not(.dark) .bg-tooltip {
  background-color: #fff;
}

.text-gray-600.dark\:text-white\/70 {
  color: white;
}

.rounded-md.bg-gray-100 {
  color: white;
}

button.absolute.left-6.top-1\/2 svg {
  color: white;
}

html:is(.dark) button.absolute.left-6.top-1\/2 svg {
  color: black;
}

.bg-gray-100\/40 { background-color: white; }

.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full {
  border-radius: 0 !important;
}

button,
input,
select,
textarea,
.card,
.alert,
.badge,
.btn,
.dropdown-content,
.modal,
.notification,
.panel,
.tooltip {
  border-radius: 0 !important;
}

.nav-item,
.nav-link,
.menu-item,
.tab {
  border-radius: 0 !important;
}

.rounded-t,
.rounded-t-sm,
.rounded-t-md,
.rounded-t-lg,
.rounded-t-xl,
.rounded-t-2xl,
.rounded-t-3xl {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-b,
.rounded-b-sm,
.rounded-b-md,
.rounded-b-lg,
.rounded-b-xl,
.rounded-b-2xl,
.rounded-b-3xl {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-tl,
.rounded-tr,
.rounded-bl,
.rounded-br {
  border-radius: 0 !important;
}

[class*="rounded-["] {
  border-radius: 0 !important;
}

img {
  border-radius: 0 !important;
}

/* Light mode scrollbar styles */
html:not(.dark) ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

html:not(.dark) ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 7px;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border: 3px solid #f1f1f1;
  border-radius: 7px;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Dark mode scrollbar styles */
html.dark ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

html.dark ::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 7px;
}

html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #1a1a1a;
  border-radius: 7px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

html.dark ::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.25);
}

/* Firefox scrollbar styles */
* {
  scrollbar-width: thin;
}

html:not(.dark) * {
  scrollbar-color: rgba(0, 0, 0, 0.2) #f1f1f1;
}

html.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.2) #1a1a1a;
}

html.dark .bg-zinc-50\/50 {
  background-color: rgb(0 0 0);
}

flatfile.com

API Reference

Join our community

Changelog

Guides

Blueprint

Plugins

Upgrade

Sign in

Create account

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

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

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

@flatfile/javascript

@flatfile/react

@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.

Highlights

Core Libraries

Embedded Wrappers

Plugins

Jobs