🚂 FrameTrain

farcaster-no-code.mp4

FrameTrain is Canva for Farcaster Frames.

• Open Source
• Revenue Sharing
• Integrated Farcaster Hub APIs, so you can just build™️

This repository is mostly geared towards template artists. If you're looking to create and posts Frames, visit FrameTrain.

Templates

Templates live in the @/templates folder. Each template follows a clear folder structure:

• handlers — a collection of 1 or more functions, used as controllers for displaying the views. Must contain at least an initial handler.
• views — a collection of 1 or more React components, rendered as the Frames’ image using satori. Must contain at least a Cover view.
• Inspector — a React component displayed in the Frame Editor. Used to get input from the user, transform it as needed and saving it as the Frame’s config. This config will be used by the handlers to properly display the views.
• cover — a cover image for the template, displayed in the template selection screen.

Everything else is completely up to you. You can have a hooks, types, utils, or an assets folder if you want.

Integrated Hub API

FT validates each message without requiring template creators to integrate external APIs. In order to enable message validation for your template, just set the requireValidation flag in the template config.

Right now, the API provider used is Neynar. Neynar requests seem cheap at first, but having hundreds or thousands of Frames making requests hasn't been tested.

The choice stands between an internal Hub run by FT, continuing to use Neynar, or switching to Airstack. It’s not clear right now which option is the right one. Reach out if you have any suggestions!

Revenue Sharing (WIP)

Hosting Frames is currently free, however that will change.

Soon you will be able to subscribe and host your Frames with no imposed limits (as opposed to the always free tier which would have some limits). The revenue from subscriptions will be shared with template creators, depending on usage.

Usage is counted as calls coming from a Farcaster client to any of the template’s handlers. The more Farcaster users interact with a Frame, the more its template creator earns.

At the end of the month, costs are subtracted, the number of calls are added to calculate a ratio, and each creator is rewarded.

This part is still a WIP, and the train has to run for a bit in order to make further decisions on the exact mechanism.

SDK

The FrameTrain Frames SDK includes many useful Functions, Hooks, and UI Components. View the full documentation here.

APIs

• Neynar Frame Validation
• Neynar User Info
• Gating
• Webhooks
• Transactions
• Loading Google Fonts
• Uploading Images
• Running Code on the Server
• Running Code on the Client
• Scraping

Hooks

• useFarcasterName
• useFarcasterId
• useFrameId
• useFrameConfig
• useFrameStorage
• useFramePreview
• useResetPreview
• useUploadImage

Contributing

Thank you for considering making FrameTrain better.

The project currently needs help with:

• TS Generics. I skipped generics class and I've tried implementing them but it always leads to spaghetti. The base template types should be generics based on the initial config received, this would make everything much more cleaner and modular.
• Bug Fixes & More. If you see something that sucks, and you know how to do it better, open a PR and let’s see that confidence. It would be really appreciated actually.

For a good experience, please install the Biome extension. This repository uses Biome, not ESLint.

Acknowledgements

FrameTrain either uses, has used, or got inspired by the following libraries:

• Frog by @wevm and @dalechyn
• Frames.js by @davidfurlong and @stephancill
• Onchainkit by @coinbase

We are very grateful for their contributions to the Frames ecosystem!