jeffemmett
/
draw-fast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
81 Commits 1 Branch 0 Tags 406 KiB
TypeScript 92.6%
CSS 7.1%
JavaScript 0.3%
Go to file
Jeff Emmett 41d121452f Optimize latency and enable immediate image generation on load 
Performance improvements:
- Reduced throttle time from 64ms to 32ms (2x faster updates)
- Reduced timeout from 5000ms to 3000ms (faster retries)
- Reduced JPEG quality from 0.5 to 0.3 (faster encoding/upload)
- Added automatic image generation trigger on page load (100ms + 500ms)

This enables real-time sketch-to-image generation to start immediately
when the page loads, with ~50% faster response to drawing changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 		2025-11-23 05:12:31 +00:00
.github/workflows Add GitHub to Gitea mirror workflow 2025-11-22 18:01:25 -08:00
public shut it down 2024-01-14 18:56:53 +00:00
src Optimize latency and enable immediate image generation on load 2025-11-23 05:12:31 +00:00
.env:Zone.Identifier Add GitHub to Gitea mirror workflow 2025-11-22 18:01:25 -08:00
.eslintrc.json Initial commit from Create Next App 2023-11-18 15:17:57 -08:00
.gitignore shut it down 2024-01-14 18:56:53 +00:00
.prettierrc update 2023-11-25 19:49:34 +00:00
LICENSE.md shut it down 2024-01-14 18:56:53 +00:00
README.md Update README.md 2024-01-22 12:05:42 +00:00
next.config.js feat: tldraw + fal (#1) 2023-11-19 21:07:39 -08:00
package-lock.json Add GitHub to Gitea mirror workflow 2025-11-22 18:01:25 -08:00
package.json Add GitHub to Gitea mirror workflow 2025-11-22 18:01:25 -08:00
tsconfig.json alex/overlay-mode: overlay mode 2023-11-28 14:56:59 +00:00

README.md

Draw Fast

Draw Fast is a demo that shows how you can use the tldraw library 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.

Here are two ways of doing that.

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

Login with github, and get a key from the keys page. (You can give it any name you want).

1

Copy your key.

2

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.

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. Click on Import repository.

a

Import the repo by pasting in https://github.com/tldraw/draw-fast and clicking Import. b

2. Setup the environment

Click Next until you get to the Set environment variables screen. c

On the Set environment variables screen, click Add variable. d

Name your key FAL_KEY.

You can get a key from fal.ai Instructions on how to do that are here. e

Click Save, then click Next until you get to the end of setup.

f

Finally, click Apply and restart, and wait about 5 minutes. g

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.