Cover photo

How to create frames without any code

Use tools to generate interactive apps within your casts

Tomu

Tomu

More than two weeks ago, Farcaster introduced a new way of interacting with social media posts, changing the way we engage online: Frames.

Frames enable users to create interactive apps directly from their posts. Simply put, a cast turns into an app. With frames we are able to build polls, galleries, mint NFTs, read a newsletter, play a game, and much more. Everything on the feed, without needing to open a new tab to interact.

Yes, now all that is possible, where posts on social media are not just for reading and replying, but for interacting with them on both the social and financial layers.

This made developers discover a new world, where new frames are created daily experimenting with this new possibility on top of the Farcaster protocol.

To understand more, read this article explaining how frames change the way we interact on the internet:


But, what about non-devs? Can we also create frames? Yes, we can, and that's exactly what this article is all about.

I’m writing this article based on my own experiences with frames, sharing how I've used the tools to create them. For each tool, you'll find an example or a recording to guide you through.

This article includes frames for:

  • Polls and quizzes

  • Galleries

  • NFT minting

  • Gated content

  • Interactive strategies

Let's get into it.


Poll Creator

One of the first ones out there, easy to create a poll about anything you want. This is just a first step into creating a more complex frame.

If there’s a quiz and your answer is correct, maybe the next page on the frame will be a mint. Try it out at https://polls.dep.dev/.

post image

This tools allows you to add up to four choices. Here’s a walkthrough on how to create one.

If you want to explore more, you can make a game out of it, creating a quiz: https://quizframe.xyz/.

Galleries

This has become the go-to frame for artists. Instead of sending a link to their collectors to view new NFTs, they can now create a frame allowing viewers to browse the entire gallery within a single post

It's an easy-to-use tool for updating images, automatically creating a gallery for you. You can upload your NFT collection, or photoghrapies from your last vacation, and have them on a carousel for people to check them out.

post image

Start creating your gallery on https://frames-gallery.vercel.app/. It's limited to five images, but if your collection is bigger, keep reading, there's a surprise for you.

Have any question? Complexlity has the answer for you.

Mint Frame

This frame allows users to collect an NFT directly from the post. There are different options; Zora, Manifold, and custom contracts. Recently, an increasing number of projects have simplified the creation of a Mint Frame, allowing users to generate one by simply copying and pasting any link into a cast. This is by far the most used frame on Warpcast.

Zora

With Zora, just copy-paste your NFT URL into a cast and a frame is automatically generated, enabling users to collect NFTs, even with Warps.

An improved experience, involves boosting Zora mints, aka, the creators pays for the gas fees so farcasters can claim the NFT for free. dee made a really great walkthrough on this.

Manifold

Another easy resource out there to create NFTs for frames. Go to studio, install the 'Frame Mint on Base' app and enjoy.

post image

Articles - Paragraph / Mirror

A frame to read, subscribe and mint an article.

The difference between these two projects lie in the frame's design and interaction method. With Paragraph, you can read an article inline, if it’s a short one, really useful to stay on the same feed and don’t need to open a new tab. You can subscribe on both, but with Mirror you have the option to mint the article.

Similar to Zora links, creating a frame is as simple as copying and pasting the URL into a cast, and the frame is automatically generated. Here is a simple walkthrough for both options.

Glass

Glass enables you to generate different types of frame. Create exclusive content for followers, holders of a specific token and even boosting engagement by requiring a post to be liked, recast, or followed by a specific account.

post image
glass

What are you doing exactly with Glass? revealing content, think of it as a “token gated” - where the "token" doesn’t need to be a digital one, can be a recast, or even open to everyone to reveal. This can apply to images, text content or even other frames. It literally takes you one minute to set up a frame and share it on Warpcast.

As mentioned earlier, you can create a gallery; now, with Glass, you can token gate those images based on a specific criteria. Here’s an example I made for the gnars community; you must hold a Gnar NFT on your connected wallet in order to reveal my gallery:

Start creating frames at https://glass.cx/ and try it out. It’s pretty easy, and take your time, you have so many options to gate content with. Here's a walkthrough to get started.

Make sure you follow the /glass channel and jtgi for updates.

Neynar Frames

Here’s where creativity starts. You can combine different strategies into a single frame. With Neynar, you can either use an existing template or make your own strategies. You are now able to add pages, where farcasters users can navigate through different options:

  • Linking to another page within the frame

  • Linking to an external URL

  • Adding a mint page

Here’s an example I made for the space channel.

It was really fun to set this up. Take ideas from their templates and make your own.

Go over to https://dev.neynar.com and start creating frames. Here's a walkthrough.


Start creating your own frames

Use the tool that most resonates with your usecase. The fun part is when you combine them. Use Neynar for entertainment with a final mint link and gate it with glass based on either tokens or being active in Farcaster. Could be the Base frame but in order to reveal it, you must have FID <2K.

Possibilities are endless, and we are already seeing stores, e-commerce, games, opepen frames.. an app store for any kind of interaction within a post. Hey warpshop and deframe, we are waiting for your beta to be released!

Hope this is useful, here's a Notion with more resources. Let me know if there are more tools out there and I'll make sure to update this post.

Let's convert our casts into dynamic, interactive experiences. Let's have fun with frames.

Arweave TX

DwP9LQTpgwzJ-koICl8F2fmvzQ_5zg43WsKHlCu8iiw

hustletrees 🎩🐹🔵Farcaster
hustletrees 🎩🐹🔵
Commented 1 year ago

I just subscribed to @tomu on /paragraph! Check it out:

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

No-code Frames 101 - eli5 frames - polls, mints, commerce, browsing (& more) in a frame - /neynar frame studio explained - helpful tips Mentioned apps and tools are linked in the comments. https://paragraph.xyz/@kugusha.eth/no-code-frames-101

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

POLLS IN A FRAME @super or /supercast @vocdoni @survey polls.dep.dev

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

MINT IN A FRAME @zora @highlight @gallery (new) /fxhash - coming ???

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Browse in a frame: @airstack.eth Curated board in a frame: @frameboard Gated frames: https://app.onlyframes.xyz/ Commerce in a frame: @slice & @warpshop

WarpshopFarcaster
Warpshop
Commented 1 year ago

Thank you for the shoutout 🙏🏻

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Frame Studio by /neynar explained - Overview - Interface - Analytics https://neynar.com/

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Other cool frames that don't fit into any particular category: @interface @paragraph @bountycaster @converseapp ETH tipping frame by @greg SeeMore frame by @cameron

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

here's the text version of the no-code workshop 👀 cc @ezbek @skyron.eth @emr.eth

tomuFarcaster
tomu
Commented 1 year ago

I like this one! I did one a while ago, but yours is more structured, well done 🤌🏻 in case it helps to update any info: https://paragraph.xyz/@tomu/create-frames-without-code 10000 $DEGEN

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Thanks for sharing! intentionally didn’t include manifold as I don’t support like/recast as a mandatory requirement. But haven’t seen glass before, will explore it

tomuFarcaster
tomu
Commented 1 year ago

agree oh glass is really cool! @jtgi won’t stop shipping

ted (not lasso)Farcaster
ted (not lasso)
Commented 11 months ago

this frame is broken but now i'm subscribed to your newsletter hell ya!

kugusha 🦋Farcaster
kugusha 🦋
Commented 11 months ago

oh wow this one will be most active as i only have that much time in a day 😅 but appreciate the support https://paragraph.xyz/@higherathletes.eth/higher-athletes-program

ComplexlityFarcaster
Complexlity
Commented 1 year ago

Adding this: Create your own image gallery in a frame: https://frames-gallery.vercel.app/

kugusha 🦋Farcaster
kugusha 🦋
Commented 1 year ago

Thank you!

TaylorFarcaster
Taylor
Commented 1 year ago

Thank you! 1000 $degen

tomuFarcaster
tomu
Commented 1 year ago

short article on no-code tools to create frames for your onchain content https://paragraph.xyz/@tomu/create-frames-without-code

Carlos.⌐◨-◨ 🎩💩🔵Farcaster
Carlos.⌐◨-◨ 🎩💩🔵
Commented 1 year ago

3000 $DEGEN

Mark Carey 🎩🫂Farcaster
Mark Carey 🎩🫂
Commented 1 year ago

Well done. Loads of good tools there. 420 $DEGEN Another interesting category is frames that act as no-code frame tools. 2 of mine are https://warpcast.com/markcarey/0xb3034a44 and https://warpcast.com/markcarey/0x839faddd but there are others that make it easy to create frames without ever leaving ... a frame!😉

tomuFarcaster
tomu
Commented 1 year ago

this is pretty great! didn't know about it, thx for sharing

tomuFarcaster
tomu
Commented 1 year ago

you can create a bunch of frames without any code leaving this here in case you want to play around with it this weekend https://paragraph.xyz/@tomu/create-frames-without-code

tomuFarcaster
tomu
Commented 1 year ago

I wrote about: “How to create frames without any code”. I’ve been using different tools to create frames lately and I wanted to put them together for everyone to use. I hope this helps. https://paragraph.xyz/@tomu/create-frames-without-code

tomuFarcaster
tomu
Commented 1 year ago

Tools: Polls - @v? I guess farcaster team Gallery - @complexlity /zora - @jacob /manifold - @ediep.eth /paragraph - @colin /mirror - @denis /glass - @jtgi /neynar - @rish let me know if there are more no-code tools out there! @warpshop and @deframe when beta? 🫡

jtgiFarcaster
jtgi
Commented 1 year ago

cheers!

g ⬆Farcaster
g ⬆
Commented 1 year ago

6900 $DEGEN great work pulling this all together, ty

tomuFarcaster
tomu
Commented 1 year ago

glad it helps! thx for the tip 🎩

petar.xyzFarcaster
petar.xyz
Commented 1 year ago

10000 $DEGEN

tomuFarcaster
tomu
Commented 1 year ago

wow thanks for the tip 🎩

petar.xyzFarcaster
petar.xyz
Commented 1 year ago

🫡

Callum Wanderloots ✨Farcaster
Callum Wanderloots ✨
Commented 1 year ago

amazing! Thank you so much for sharing 500 $degen How are you able to display multiple paragraphs in one frame with @paragraph ? is that a new feature?

tomuFarcaster
tomu
Commented 1 year ago

could be, this is the first paragraph frame I made, so I don't know how it was working before :)

ColinFarcaster
Colin
Commented 1 year ago

It's an improvement we shipped yesterday! https://warpcast.com/colin/0xcaf1db9b

Callum Wanderloots ✨Farcaster
Callum Wanderloots ✨
Commented 1 year ago

amazing! thank you so much :) It turned out really well! Is there a particular way to designate when the breaks will occur? or does it naturally break by paragraphs that will combine to fill a 1:1 ratio and images?

mleejrFarcaster
mleejr
Commented 1 year ago

1000 $DEGEN

tomuFarcaster
tomu
Commented 1 year ago

appreciate it 🫡

Brais.ethFarcaster
Brais.eth
Commented 1 year ago

5000 $DEGEN

0xHashbrown🎩🍖✋Farcaster
0xHashbrown🎩🍖✋
Commented 1 year ago

624 $DEGEN This was a great write up.

tomuFarcaster
tomu
Commented 1 year ago

thanks 🎩

MTKN ↑ e/enj 🔵Farcaster
MTKN ↑ e/enj 🔵
Commented 1 year ago

Great post! Minted 500 $degen

tomuFarcaster
tomu
Commented 1 year ago

thank you ser!

How to create frames without any code