Skip to content

Quickstart Guide: Display Frames

This guide shows you how to add frames rendering to your next.js + tailwind app using frames.js.


Create a new repo

Create a new Next.js app

npx create-next-app@latest my-project --ts --eslint --tailwind --app
cd my-project

Add @frames.js/render to your project

yarn add @frames.js/render

Add proxies for routing frame requests via your backend for privacy + preventing CORS issues

export { GET, POST } from "@frames.js/render/next";

Add the renderer to your page

"use client";
import {
} from "@frames.js/render";
import { signFrameAction, FarcasterSigner } from '@frames.js/render/farcaster'
import { FrameImageNext } from "@frames.js/render/next";
import { FrameButton } from "frames.js";
import { useFrame } from "@frames.js/render/use-frame";
export default function Page() {
  // TODO: replace with your farcaster signer
  const farcasterSigner: FarcasterSigner = {
    fid: 1,
    status: 'approved',
  const frameState = useFrame({
    // replace with your frame url
    // corresponds to the name of the route for POST in step 3
    frameActionProxy: "/frames",
    connectedAddress: undefined,
    // corresponds to the name of the route for GET in step 3
    frameGetProxy: "/frames",
    frameContext: fallbackFrameContext,
    // map to your identity if you have one
    signerState: {
      hasSigner: farcasterSigner !== undefined,
      signer: farcasterSigner,
      onSignerlessFramePress: () => {
        // Only run if `hasSigner` is set to `false`
        // This is a good place to throw an error or prompt the user to login
        alert("A frame button was pressed without a signer. Perhaps you want to prompt a login");
      signFrameAction: signFrameAction,
  return (
    <div className="w-[400px]">
      <FrameUI frameState={frameState} theme={{}} FrameImage={FrameImageNext} />

In order for the styles to work, your project should have tailwind set up as well as the tailwind.config.js rule

const config = {
    // ...
    content: [
      // ...

Allow images from any domain

const nextConfig = {
  images: {
    remotePatterns: [
        protocol: "https",
        hostname: "**",

Run yarn run dev

Done! 🎉


If needed, you can implement FrameUI yourself, using the FrameUI component as a template