Header image credit: White Rabbit Anime by Shibuya.xyz, used by @pplpleasr in “the floor is lava” frame below

We're almost two months into the release of Frames, and although we're still early, the technology is evolving quickly. In this article, I want to create a bit of context around Frames, something that you and I can use to build a better understanding of the space.

To do this let’s cover both the technology and some of things it enables today:

1. What are frames?

2. What’s the technology behind frames?

3. How Farcaster turned Open Graph into a standard for mini-apps

4. Open Frames, extending Frames compatibility to other protocols

1. What are frames? according to their inventors

Frames are a interactive windows embedded in your social media feed

Varun Srinivasan, CTO at Farcaster and Warpcast, explains, “Frames are pictures and buttons that when you click shows you more pictures and buttons. But when you click you know who clicked and you can tap in the social graph to tailor the experience based on data.” - find the full conversation here → into the bytecode x Varun

The frame below is an example of the kind of interaction that’s made available by Frames today:

Frames make third party applications composable with social media apps

David Furlong who had been working on mini-app standard for Farcaster months before Frames were released, explains that “Smart Contracts make backends composable. Frames make frontends composable.” And that “Every smart contract will eventually publish a frame by which it can be interacted with.” Highly recommend checking out the full ETHDenver presentation by @df.

For example this bountycaster frame allows you to browse bounties directly from your Warpcast feed:

Frames create native experiences without having to log into a third party website

In Why Farcaster Frames are important, Antonio Garcia explains that “a Frame opens like a portal to another app, allowing that other app direct access to the user. From the Web 2 perspective, it doesn’t seem much different than the <iframe> a website routinely opens to another piece of the Web: the difference is that the shared state of the blockchain makes the embedded experience as native as that of the app itself.”

In the frame below I was able to create and mint an NFT directly to my wallet, without having to log into a third pary app.

Going further: here are 6 ways to better understanding Frames by Jayme Hoffman.

2. What’s the technology behind frames?

Frames were made possible thanks to an extended version of the Open Graph Standard created by Facebook in the 2010s.

The goal of the Open Graph standard was to expand Facebook’s social graph beyond just actions that would be taken on facebook.com. How? By letting other webpages embed pluggins like buttons, activity feeds and comments.

This integration meant that actions taken on external websites could be reflected on Facebook, enriching user profiles with their activities across the web and making the web more social. This was a strategic move by Facebook to increase its reach, collect more data and drastically improve ad targeting using this data.

As part of the Open Graph effort was the Graph API which enabled third party devs to access a lot (way too much?) data about facebook users. A design that, unfortunately, was instrumental in the cambridge analytica scandal.

Over time the usecases for the Open Graph standard expanded beyond simple plugins to enable richer, more diverse content integration across Facebook and other platforms through Open Graph tags.

For example tags allow for uniform content presentation. Social media platforms use OG tags to extract specific information about the content being shared, such as the title (og:title), description (og:description), and image (og:image). This ensures that when a link is shared, it presents a uniform, coherent snippet that includes a preview image, a title, and a brief description, making the content more attractive and informative to potential viewers.

Tags such as og:type help platforms categorize the content (e.g., article, video, product), which can influence how the content is displayed or prioritized in feeds and search results. OG tags feed into recommentation algorithms, helping to surface more relevant content to users based on their interests and previous interactions.

Most social platforms and search engines now use or support Open Graph tags to some extent, making it a de facto standard for social sharing metadata.

3. How Farcaster turned Open Graph into a standard for mini-apps

The whole Frames thing works thanks to a few important additions to Open Graph made by the Farcaster team.

Beyond basic tags for post Titles (og:title), descriptions (og:description) and images (og:images), the Farcaster team has extended the Open Graph (OG) standard by incorporating the functionality to add interactive buttons at the bottom of a Frame's image. These buttons enable users to perform actions directly from the Frame, with these actions being automatically signed by their Farcaster account, thereby authenticating the user's identity and the legitimacy of the action.

This extension of Open Graph has paved the way for a variety of actions and logics within the current Frame specification, including:

• Post actions enable developers to design forms for user input as part of frames and let third party apps return new frames based on this submission. They also allow for the content to update dynamically without having to refresh or reload the page.

For example the Aistrack team has built a an AI assistant that accepts simple data queries and runs them for you right into your social feed.

• post_redirect allows for checkout flows and more complex form submission flows or redirecting users to a success or error page.

• mint allows users to mint NFTs in one click through Frames. At this point in most cases mint fees are subsidized in the backend. Another option is to let users pay for mints using Warps, the internal Warpcast currency.

• tx now allors to create transcation buttons in directly in frames. Some examples of how frames transactions have been used today:

  • Swap memecoins in a Frame

  • Copy transactions executed by your friends

  • Subscribing to your favorite creator right through a social media post

For safety reasons there are guardrails as to what transactions can be executed inside a frame. The Warcapast team maintains a whitelist of domains that are deemed safe to interact with. In addition to this Frame transaction pop ups display a simulation of the transaction before it is exectured.

4. Open Frames, extending Frames compatibility to other protocols

Farcaster has been the first protocol to implement Frames through Warpcast. But there are no reasons for Frames not to become something you'll be able to use all over the internet over the next few years (months?).

The team at Open Frames, who had been at the origins of the Frames idea and specification as early as last year, is currently working to bring Frames to other protocols like XMTP and Lens.

The Open Frames standard is similar to the Farcaster extended version of Open Graph, it has most of the same features but different tags and a client protocol identifier to let different protocols know if they’re supported (or not) by a given frame server.

Several projects have started building Frames on XMTP. These can be used on Converse, the web3 messaging app. You can try opening the following links right in the Converse app to start interacting or playing in chat with your friends:

Developers in the Lens ecosystem are also working on an adjusted Frame specification in collaboration with the Open Frames team. This should compose nicely with Frame's open actions, enabling them to use Frames as their frontend and bypassing the complexities of having to create custom front ends for each open action.

5. some current limits to the current state of Frames

Varun recently polled devs about the limits they currently feel about Frames, some of the drawbacks that felt most interesting to me:

• Lack of dev infra

• Buggy developer experience

• Little to no ways to monetize

• Lack of diversity in media types

That’s it for today. More to come soon! To keep up to date with innovation around frames make sure to check out topframes.xyz and follow /topframes on Warpcast.