Devtool / OSS

Formfeed

JSON in. Paper out.

Best for: API-first founders who need the whole surface — a landing page that convinces an engineer and the console screens that convince their team lead.

Formfeed

JSON in. Paper out.

Get an API key

Open live preview

Overview

Every product ships documents, and nobody wants to own the printer. Formfeed is a landing page and console-screen set for an API product, demonstrated as a document-render API: versioned templates, schema-validated data, one POST, one PDF. The landing pairs a request with its rendered page and answers the questions engineers actually ask (fidelity, fonts, latency, retention, EU rendering). The console screens are the part most templates skip: masked API keys with a rotation story, a quota readout that never drops month-end, and a render log where one failed render — R-88214, a timed-out logo asset — is traced from the table row to the replay. The demo month reconciles to the render: template counts sum to the monthly total, the error KPI matches the log, and every number is config.

Who it's for

Developers launching an API productFounders of API-first startupsTeams replacing homegrown PDF/report pipelinesAnyone selling software by the request

Highlights

Request→page hero: a JSON pane feeding a rendered invoice (bespoke mock)
A real first-render curl example in a terminal block
Console overview with quota math that reconciles to the day
API keys & environments screen with masked keys and a rotation story
Render-log detail tracing one failed render to its clean replay
The engineer's FAQ: fidelity, fonts, latency, retention, EU rendering

Pages included

Landing page
Sign in
Sign up
Terms of Service
Privacy Policy
Console overview
API keys & environments
Render log detail
Themed 404 / 500 / loading

Built with

Next.js 16React 19Tailwind v4TypeScript

What you'll get

A launch kit is more than code. Here's exactly what's in the box and what it takes to get it live.

Formfeed Launch Kit

v1.0.0 · Single-project license

Coming soon

In the box

API-product landing pageA request→page hero, a first-render curl example in a terminal block, the nobody-wants-to-own-the-printer problem split, per-page pricing, and the FAQ an engineer's team lead actually asks.
Three developer-console screensA console overview (renders, error rate, p95, quota math that reconciles), an API keys & environments screen with a rotation story, and a render-log detail tracing one failed render to its clean replay.
Request→page hero visualA bespoke doc-render composition — JSON request pane, feed arrow, rendered invoice with a render-time stamp — built from theme tokens, no stock imagery.
Auth screensSign in / sign up with GitHub and Google buttons — themed, ready to wire.
Legal starter pagesTerms & Privacy with anchor navigation — template text to adapt, not legal advice.
Themed system statesMatching 404, 500, and loading screens plus a theme-tuned scrollbar.
Content & theme configsEndpoint names, the curl example, every console number, template counts, and the failure trace in editable config — the numbers are commented where they must keep summing.
Guides + API-specific checklistCustomization, deployment, troubleshooting, and a launch checklist that keeps the console month reconciled while you make it yours.

To launch it

Difficulty: intermediate
Setup time: About 40 minutes
Deploys to: Vercel · Netlify · Any Node host
Guides: 4 included
Support: Standard email support; setup service available.

Request early access

Downloads open when checkout launches.

Customization & requirements

Everything renders from one config file, so editing copy, pricing, sections, or the theme is a data change — no component rewiring.

You'll need

Node 20+A code editor (VS Code)GitHub accountVercel account (free)

You can customize

Copy, endpoint names, and the curl exampleThe console month (renders, quota, error rate, p95)Template names and per-template render countsThe failed-render trace storyPricing tiers and included-render volumes

Built for AI agents

Customizing with Claude, Cursor, or another agent is the intended path — the kit tells the agent what it may touch. Use the “Build it with AI” button in the sidebar for a ready-made starter prompt.

AGENTS.mdOperating rules, project map, starter prompts.
DESIGN.mdDesign system and theming contract — tokens only.
configThe safe editing zone: copy, links, pricing, and theme as data — AGENTS.md names the files.

Launch checklist

Every kit ships with a practical, step-by-step checklist so you know exactly what to change before you go live.

Launch checklist

18 steps

Make it yours

Replace the logo and favicon
Update your business / brand name
Rewrite the hero copy
Update services, features, and pricing
Set your real contact email
Swap placeholder images for your own

Metadata & SEO

Update the page title and description
Set your Open Graph share image
Point metadataBase at your real domain

Quality check

Test the responsive layout on mobile
Test every button and contact CTA
Run a quick Lighthouse pass

Make the console tell your month

Set one month of numbers and keep them summingThe 61,240 monthly renders equal the four template counts summed, 61% of the 100k plan, and ~2.4k/day on the chart — the config comments mark each place the figure repeats.
Rewrite the failed render for a failure your API really hasR-88214's trace (schema pass → asset timeout → webhook → replay R-88215) is the kit's credibility moment — swap in your own failure mode and keep the IDs consistent between the console table and the detail page.
Replace the endpoint, key prefixes, and curl exampleapi.formfeed.dev, ff_live_/ff_test_ prefixes, and the invoice template names appear in the hero, code block, keys screen, and FAQ.

Launch