# No-code Frames 101 *Build frames on Farcaster with no coding skills * By [kugusha.eth](https://paragraph.com/@kugusha.eth) · 2024-03-10 farcaster, frames --- One of the recent narratives from the Farcatser & Base community has resonated a lot with me recently: **Builder ≠ developer**; you don't have to code to build and positively contribute. ![](https://storage.googleapis.com/papyrus_images/5a3d2ce2ad9e867df8082208a02a5968.png) [Concept by @lght.eth](https://warpcast.com/lght.eth) _This article is a text form of the workshop during the_ [_Frames Hackathon in Paris_](https://warpcast.com/event/0x64b7193f) _on March 9._ * * * ![](https://paragraph.xyz/editor/callout/information-icon.png) **Frame** - an interactive mini app within Farcaster feed. In its simplest form, a frame is an image (or gif) with buttons. It can be single or multi-step, where a button triggers different actions - from navigating between frame's pages to initiating transactions. **Why building frames?** * Distribution of your ideas * Simple & fast mobile-first prototype [_Read more about frames in the docs._](https://docs.farcaster.xyz/learn/what-is-farcaster/frames) * * * From basic implementations to more complex frames, natively integrated into the apps. _(Meaning that you can create a frame by copy-pasting links.)_ **POLL IN A FRAME** * [Supercast](https://www.supercast.xyz/) (built-in polls support) * [Farcaster.vote](http://Farcaster.vote) * [Ponder Surveys](https://www.weponder.io/surveys/frames/new)  * [Polls.dep.dev](http://Polls.dep.dev) * [Quizframe.xyz](http://Quizframe.xyz) (quiz) ![](https://storage.googleapis.com/papyrus_images/e2ae4fa7c7db4570132f72057a660f69.png) _polls from supercast (left), farcaster.vote (right)_ **MINT IN A FRAME** * [Zora](https://zora.co/)  * [Highlight](https://highlight.xyz/)  * [Gallery.so](http://Gallery.so) [](http://gallery.so)_(new)_ _Note: Mint with Warps is supported by default for Zora and Base networks._ ![](https://storage.googleapis.com/papyrus_images/09973e1f7c241eafe8947a30632bb413.png) _mint from highlight (left), from gallery (right)_ **BROWSE IN A FRAME** Explore web3 identities with [Airstack Explorer](https://explorer.airstack.xyz/).  _Example: Browse all holders of_ [_Aux Arbres_](https://highlight.xyz/mint/65d4c33f139818e311c5011e) _NFTs._ 1. _Copy & paste the NFT contract to the explorer._  2. _Click Warpcast icon on the top right._ 3. _Copy & paste the frame link to your cast._  ![](https://storage.googleapis.com/papyrus_images/a4ccd1f76711246d5644fd9f58ef2c21.png) _The frame on Warpcast:_ ![](https://storage.googleapis.com/papyrus_images/1d9401cc43ea0ba0f863b1515164b793.png) **COMMERCE IN A FRAME** Buying physical goods with just a few clicks through the Farcaster feed is a game changer _(and my personal favourite use case)_. Set up your shop and start selling literally anything. * [Slice Store](https://slice.so/) * [Warpshop](https://www.warpshop.xyz/setup) ![](https://storage.googleapis.com/papyrus_images/fd6eb77768f788d1dc68308e7c11186e.png) _Slice frame (left), Warpshop setup (right)_ **GATED FRAMES** * [OnlyFrames](https://app.onlyframes.xyz/) * [frames.token-gated.com](http://frames.token-gated.com) [![](https://storage.googleapis.com/papyrus_images/aff4289bb6e095cc755f02fe43aeb9de.png)](https://warpcast.com/nonlinear.eth/0xe7235fae) _Example:_ [_a subscriber-gated frame_](https://warpcast.com/nonlinear.eth/0xe7235fae) _that reveals who our special guests were for Many Such Cases podcast_ * * * ### **NEYNAR FRAME STUDIO** Frame Studio: [dev.neynar.com](https://dev.neynar.com/frames) Build multi-step no-code frames. Possible buttons/actions: * Switch between pages (incl. custom logic) * Mint NFTs (only Zora links; Base, Zora or Ethereum L1 networks) * External link  **_Examples:_** [**_AMA announcement in /art_**](https://warpcast.com/kugusha.eth/0x9166cd83) Step 1. Image + Calendar Reminder (external link) or About LGHT (page navigation)  Step 2. Image + Projects (external links) or Back to Step 1 (page navigation) ![](https://storage.googleapis.com/papyrus_images/914e9d3454810573220e1acefd1be4f4.png) [**Frame Studio**](https://dev.neynar.com) **Interface** ![](https://storage.googleapis.com/papyrus_images/91a17a7c96d29a0faf6c0d76c5521379.png) **Frame Studio Analytics** 'Interactions by cast hash' display casts that used that frame. _Note: a frame can be published by anyone, not only its creator._ ![](https://storage.googleapis.com/papyrus_images/7b46a224d16f014f1d676ee27bba04ef.png) ### **FRAMEBOARD** Create a frame: [frameboard.com](http://frameboard.com) A curated board in a frame. Possible actions:  * External link  * Follow board  * Switch between pages [![](https://storage.googleapis.com/papyrus_images/c321492aa4db29f6163901474c09052e.png)](https://warpcast.com/jayme/0xf220fe53) **OTHER (COOL) FRAMES** A list of frames that don't fit into any particular category but are worth trying: * [Bountycaster](https://warpcast.com/~/channel/bounties) automatically creates a frame for new bounties and allows you to manage the bounty through the frame; there's another [frame for browsing existing bounties](https://warpcast.com/linda/0x5081f799). * [ETH Tipping in a Farcaster Frame](https://frames.fcstr.xyz/) - one of the first transaction frames built by [@greg](https://warpcast.com/greg). * Follow \[anyone\] onchain frames from [Interface](https://www.interface.social/), [Paragraph](https://paragraph.xyz/), [Converse](https://converse.xyz/) and [SeeMore](https://seemore.tv/) (Links like _paragraph.xyz/@name_, _frames.interface.social/name, converse.xyz/dm/name_ are auto-transformed into a frame on Warpcast). * * * ### **PRO TIPS** 1. Use **Frame Validator** - [https://warpcast.com/~/developers/frames](https://warpcast.com/~/developers/frames) It is helpful to **preview, test** and **preload** your frame. Preloading a frame with images (relevant for galleries) can significantly reduce loading time for the end user. To preload, simply click through your gallery in the validator. 2. **Mix & Match**. A few other platforms support frames. For example, mint frames are integrated to Paragraph articles; Paragraph frames work within the Converse app. 3. **Have fun!** Because that's the whole point. Building frames is simple and really doesn't require any coding skills. The more you build, the easier it becomes. New tools are launching every week, and I will keep updating this article. In the meantime, share your no-code frames with me on Warpcast, and I might (or might not) tip you some $degen. **Let's build 💙** * * * _You will get to know me better over time, and I would like to get to know you too! My direct casts on Warpcast (_[_@kugusha.eth)_](https://warpcast.com/kugusha.eth) _are always open for conversations and discussions. You can also send me a message onchain via_ [_Converse_](https://getconverse.app/) _or any other XMTP-powered app._ --- *Originally published on [kugusha.eth](https://paragraph.com/@kugusha.eth/no-code-frames-101)*