/*
 * 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;
}

htmlhtml: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;
}

API Reference

Join our community

flatfile.com

Changelog

Guides

Blueprint

Plugins

Upgrade

Sign in

Create account

@flatfile/javascript

Explore our guides and examples to implement Flatfile.

Overview | Flatfile Developer Docs - Latest

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/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

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.

Overview

Configure the basic behavior of your Sheet

Sheet options

Field Types inform the user interface how to sort and display data.

Types

Constraints

Relationships

Controlling user interactions with your Sheets and fields

Access

Move from the legacy products to the new Flatfile Platform

Icons

Quickstart Portal 2 Upgrade

Portal 2 <-> Platform Concepts

Repo on GitHub

Upgrading from v3

Upgrade with @flatfile/configure

Running on your local machine

Check for agents

Learn how to deploy your code to Flatfile.

Deploying to Flatfile

Learn how to use Environments for testing and authentication.

Environments

Spaces

Learn how to use API keys to authenticate API requests.

Authentication

Learn how to authenticate above the Environment level.

Personal Access Token

Learn how to give your team and customers access.

Roles & permissions

Learn versioning principles for npm packages at Flatfile.

Versioning principles

@flatfile/api

flatfile-python

flatfile-go

flatfile-java

flatfile-mapping

Use one of our plugins to add functionality to your Flatfile data engine.

A plugin for parsing Excel files in Flatfile

A plugin for parsing .json files in Flatfile.

A plugin for parsing .xml files in Flatfile.

A plugin for parsing .zip files in Flatfile.

A plugin for parsing .delimiter files in Flatfile.

A plugin for parsing .pdf files in Flatfile.

A plugin for parsing .doc files in Flatfile.

@flatfile/plugin-doc-extractor

A plugin for running custom logic on individual data records in Flatfile.

A plugin for automatically casting values in Flatfile.

Dedupe records in a sheet via a sheet level custom action.

A plugin for providing a way to register external constraints for Blueprint.

@flatfile/plugin-constraints

A plugin to provide automapping imported files for headless workflows. See our [Automap Guide](../../guides/automap) for best practices.

A plugin to forward Flatfile Events to specified http endpoints for headless workflows.

@flatfile/plugin-webhook-event-forwarder

A plugin for exporting data in Flatfile to Workbooks.

A plugin for egressing data from a Flatfile Workbook to a webhook.

@flatfile/plugin-webhook-egress

A plugin for converting JSON Schema to Flatfile Blueprint and configuring a Flatfile Space.

A plugin for converting YAML Schema to Flatfile Blueprint.

@flatfile/plugin-convert-yaml-schema

A plugin for converting SQL DDL to Flatfile Blueprint.

A plugin for converting OpenAPI schema to Flatfile Blueprint.

A plugin for converting Graphql to Flatfile Blueprint.

@flatfile/plugin-graphql

A plugin that populates a Sheet with 5-digit zip codes.

@flatfile/dataset-zipcodes

A plugin that populates a Sheet with the countries of the World.

@flatfile/dataset-countries

A plugin for using DXP class-based configurations.

A plugin for configuring Flatfile Spaces.

A shared utility for defining a data extraction.

A shared utility for processing files and extracting their contents using the Flatfile API.

A shared utility for handling response rejections.