Yee

.gitignore

@@ -35,4 +35,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-.env
+.env
+.env.local
+.yarn

README.md

@@ -1,11 +1,122 @@
-## draw fast
+# Draw Fast
 
-Get a key from https://www.fal.ai/dashboard/keys and add it to `.env.local`
+**Draw Fast** is a demo that shows how you can use the [**tldraw library**](https://tldraw.dev) with realtime image generation. The demo has now finished and we’ve taken it down. But you can still run it on your own machine and try it out.
 
-Then just...
+Here are two ways of doing that.
 
-```bash
+- [Run it locally](#run-it-locally)
+- [Run it in CodeSandbox](#run-it-in-codesandbox)
+
+# Run it locally
+
+Here's a video tutorial. Or read below for a written guide.
+
+https://github.com/tldraw/draw-fast/assets/15892272/dd175168-f4db-455a-9c70-2736cd4403d0
+
+## 1. Clone the repo
+
+Clone this repo!
+
+```
+git clone https://github.com/tldraw/draw-fast
+```
+
+## 2. Get a Fal key
+
+Go to [fal.ai](https://fal.ai)
+
+Login with github, and get a key from the [keys page](https://www.fal.ai/dashboard/keys). (You can give it any name you want).
+
+![1](https://github.com/tldraw/draw-fast/assets/15892272/992a8a90-9d72-4a28-aebe-921c3f82e4e9)
+
+Copy your key.
+
+![2](https://github.com/tldraw/draw-fast/assets/15892272/740118d6-a9e2-4320-b2f7-abb63f416c9f)
+
+## 3. Setup environment variables
+
+Create a `.env` file in the root folder of your repo.
+Paste your key there as `FAL_KEY`
+
+Your file should something like this:
+
+```
+FAL_KEY=8bf6c68d-8711-426b-90c6-0d9636909fce:b774f2a649cfecbf56dce57db7966a73
+```
+
+## 4. Run it locally
+
+In your terminal…
+
+```
 npm install
 npm run dev
 ```
 
+And open `localhost:3000`
+
+## 5. Draw fast
+
+Draw something in the rectangle!
+Double-clicking the prompt to change it.
+Click the small arrow to enter *lens mode*.
+
+## 6. Share!
+
+Record your screen and show us what you draw fast.
+
+We’re [@tldraw on twitter](https://twitter.com/tldraw).
+
+## Troubleshooting
+
+If the generated images don’t appear, try running `npm install` and `npm run dev` again, or try waiting a while for your key to activate.
+
+# Run it in CodeSandbox
+
+## 1. Import the repo
+
+Sign in on [CodeSandbox](https://codesandbox.io). Click on **Import repository**.
+
+![a](https://github.com/tldraw/draw-fast/assets/15892272/dce56531-ca82-473d-b2ef-fe13644c7fb3)
+
+
+Import the repo by pasting in `https://github.com/tldraw/draw-fast` and clicking **Import**.
+![b](https://github.com/tldraw/draw-fast/assets/15892272/000597fe-69e0-43a0-96fb-89ab242c31f3)
+
+
+## 2. Setup the environment
+
+Click **Next** until you get to the **Set environment variables** screen.
+![c](https://github.com/tldraw/draw-fast/assets/15892272/d321b780-c33c-4217-b647-f757182869f3)
+
+
+On the **Set environment variables** screen, click **Add variable**.
+![d](https://github.com/tldraw/draw-fast/assets/15892272/65699754-9a54-4406-a28b-285d94488997)
+
+
+Name your key `FAL_KEY`.
+
+You can get a key from [fal.ai](https://www.fal.ai/dashboard/keys)
+Instructions on how to do that are [here](https://www.notion.so/Draw-Fast-help-038edf9a982847e19df078854c54c8dd?pvs=21).
+![e](https://github.com/tldraw/draw-fast/assets/15892272/4c2a128c-a597-4578-87c4-44e73e29de86)
+
+
+Click **Save**, then click **Next** until you get to the end of setup.
+
+![f](https://github.com/tldraw/draw-fast/assets/15892272/9467f645-5843-445c-b346-68f2617c1d02)
+
+Finally, click **Apply and restart**, and wait about 5 minutes.
+![g](https://github.com/tldraw/draw-fast/assets/15892272/b9ba8c65-7b28-4e80-a760-6b1814244c7b)
+
+
+## 3. Draw fast
+
+Draw something in the rectangle!
+Double-clicking the prompt to change it.
+Click the small arrow to enter *lens mode*.
+
+## 4. Share!
+
+Record your screen and show us what you draw fast.
+
+We’re [@tldraw on twitter](https://twitter.com/tldraw).