SKIFFLE

SKIFFLE lets you render images for Farcaster Frames using SvelteKit routes and layouts.

Load page data and render content as you normally would, using Svelte template syntax, style tags, +layout.svelte / +page.svelte components, and load() functions in +layout.server.ts / +layout.ts / +page.server.ts / +page.ts (or .js) files.

Link frame buttons to other frame routes using relative URLs, or handle signature packets using Form Actions (define actions in +page.server.ts, then target ?/actionName).

Try the SKIFFLE demo – cast skiffle.dev on Warpcast or your Farcaster client of choice!

Demo frame includes: • hierarchical route-based navigation complete with back buttons and auto-pagination • sub-pages with pagination state stored in URL query parameters • Farcaster profile browser showing recent casts (powered by Pinata's Farcaster API) • "Top Frames" browser showing the top frames posted by highly ranked Farcaster profiles, with summaries of who posted them and Frame button link-outs to the original casts (powered by Karma3Labs's Farcaster Graph API)

Check out SKIFFLE on GitHub – github.com/darrylyeo/skiffle

Follow @darrylyeo on Farcaster and GitHub for project updates – https://warpcast.com/darrylyeo

More documentation and examples coming soon!

How do you render a page as a frame with SKIFFLE?

To render a SvelteKit page as a frame, export a frames object from +page.server.ts or +page.ts matching the FrameMeta type (also defined under the global PageData type).

Page route URLs double as frame image URLs and share common load() functions. This overloading behavior is made possible by the handle server hook in hooks.server.ts.

A page route request with an Accept HTTP header containing image/ yields this pipeline: compile Svelte to HTML/CSS, convert to SVG with satori, render to PNG with resvg-js.