Remix integration

Frames.js can be easily integrated with Remix applications.

Usage

Create Frames handler

Frames handler is responsible for rendering your Frames and also reacts to user interactions with buttons.

./app/routes/frames.tsx

/* eslint-disable react/jsx-key */
import { createFrames, Button } from "frames.js/remix";
 
const frames = createFrames();
const handleRequest = frames(async (ctx) => {
  return {
    image: <span>Test</span>,
    buttons: [<Button action="post">Click me</Button>],
  };
});
 
export const action = handleRequest;
export const loader = handleRequest;

Render initial frame on your existing page

./app/routes/_index.tsx

import { fetchMetadata } from "frames.js/remix";
 
export async function loader({ request }) {
  return {
    // provide full URL to your /frames route
    metaTags: await fetchMetadata(new URL("/frames", request.url)),
  };
}
 
export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [{ title: "My Page" }, ...data.metaTags];
};
 
export default function Page() {
  return <span>My page</span>;
}