> ## Documentation Index
> Fetch the complete documentation index at: https://flatfile.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Embed Flatfile data import directly into your application

Flatfile can be embedded directly into your web application, allowing users to import data without leaving your interface. This creates a seamless experience where data import feels like a native part of your app.

## When to Embed Flatfile

Embed Flatfile when you want to:

* **Seamless user experience** - Keep users within your application flow
* **Custom branding** - Maintain your application's look and feel
* **Integrated workflows** - Connect data import directly to your business logic
* **Control over timing** - Trigger imports at the right moment in your user journey

## How Embedding Works

Flatfile embedding uses an iframe-based approach that loads the Flatfile interface within your application. You provide credentials and configuration to load a pre-configured Space or create a new Space with your data schema and workflows.

The embedded experience handles file upload, data mapping, validation, and transformation automatically based on your Space configuration.

## Available SDKs

Choose the SDK that matches your frontend framework:

<CardGroup cols={2}>
  <Card title="JavaScript" icon="js" href="/embedding/javascript">
    Vanilla JavaScript for any web application
  </Card>

  <Card title="React" icon="react" href="/embedding/react">
    React components and hooks
  </Card>

  <Card title="Angular" icon="angular" href="/embedding/angular">
    Angular components and services
  </Card>

  <Card title="Vue" icon="vuejs" href="/embedding/vue">
    Vue.js components and composables
  </Card>
</CardGroup>

## Getting Started

1. **Create a Space** in the [Platform Dashboard](https://platform.flatfile.com) with your data schema
2. **Get your credentials** from Developer Settings
3. **Choose your SDK** and follow the integration guide

## Configuration & Setup

<CardGroup cols={2}>
  <Card title="Advanced Configuration" icon="gear" href="/embedding/advanced-configuration">
    Complete configuration options reference
  </Card>

  <Card title="Server Setup" icon="server" href="/embedding/server-setup">
    Server-side setup for space reuse
  </Card>
</CardGroup>

## Two Approaches: Existing vs Dynamic Spaces

These guides show both approaches:

* **Existing Spaces**: Connect to a pre-existing Space
* **Dynamic Spaces**: Create a new Space programmatically

Choose the approach that best fits your workflow. See the implementation instructions for both patterns in each SDK guide.

For advanced configuration options like themes, custom workflows, and data transformations, see [Advanced Configuration](./advanced-configuration) or configure these in your Space through the Platform Dashboard.