Hello, world!

> ## Documentation Index > Fetch the complete documentation index at: https://flatfileinc-feat-updatereactquickstart.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Create a new Space every time Flatfile is opened. For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred. ## Before you begin ## Prepare your project ### Create your file structure Setup your app to look something like this: ``` ├── public/ └── index.html └── styles.css ├── src/ └── blueprint.js ``` In this file structure, your app should have two main directories, `public` and `src`. The `public` directory contains the `index.html` file, which is the entry point of the application's front-end, and the "style.css" file for styling the iframe. The `src` directory contains the main components and logic of the application, including the `blueprint.js` file, which defines your schema. ## Build your importer ### 1. Initialize Flatfile Initialize Flatfile to open in a modal. Pass in your `publishableKey` and a new Space will be created on each page load. Also, add the content here to your `styles.css`. ```html public/index.html Hello, world! ``` ### 2. Run in browser Now, open `index.html` in a browser. You should see that Flatfile opens on page load and an empty Space gets created. ### 7. Customize You can stop here or you can [view our full reference](../reference/common) to see all the ways you can customize your importer. ## Example Projects Find these Javascript example projects in the Flatfile GitHub repository. Clone the simplified Flatfile Javascript tutorial using a CDN here. Want to get started? Clone the Flatfile JavaScript tutorial here.