Design forms. Ship them anywhere.
Open-Source React SDK
Map each field type to your own React components. You control the markup, styling, and behavior. No iframes, no vendor CSS.
Form API
Fetch form specs, submit responses, and evaluate computed fields over HTTPS. API keys on paid plans, no sales call required.
Logic Included
Conditional visibility, validation rules, and computed fields travel with the spec. Your renderer evaluates them automatically.
How it works
Business users design forms in Formidable. Developers render them in their own apps. No handoff meetings, no Figma-to-code translation.
Business user
Describes the form
"I need a loan application with income verification and auto-qualification."
Formidable
Generates the spec
Fields, validation, conditional logic, computed values
Developer
Fetches via API
GET /api/f/loan-app → JSON spec with all form logic
Your app
Renders the form
Your components, your design system, your brand
Business user
Describes the form
"I need a loan application with income verification and auto-qualification."
Formidable
Generates the spec
Fields, validation, conditional logic, computed values
Developer
Fetches via API
GET /api/f/loan-app → JSON spec with all form logic
Your app
Renders the form
Your components, your design system, your brand
The handoff that isn't
Business users update forms in Formidable. Developers fetch the latest spec from the API. No tickets, no waiting.
Business user
I've updated the loan application. The debt-to-income ratio now auto-calculates, and applicants with DTI under 36% and credit above 680 are auto-approved.
Published
Changes are live. Your dev team's app will pick up the updated spec automatically.
Add a field for monthly expenses and include it in the DTI calculation.
Developer
import { FormRenderer } from "@fogpipe/forma-react";
import { components } from "./components";
export function LoanApp() {
// Spec updates are automatic —
// no code changes needed
const { data: spec } = useSWR(
"https://api.formidable.software/api/f/loan-app",
fetcher
);
return (
<FormRenderer
spec={spec}
components={components}
onSubmit={handleSubmit}
/>
);
}Zero code changes. When the business user publishes updates in Formidable, your app renders the new fields and logic on the next fetch.
Fetch, render, submit
Three API calls is all it takes. Fetch the spec, render your UI, submit responses back.
# 1. Fetch the form spec
curl https://api.formidable.software/api/f/loan-app \
-H "Authorization: Bearer fmb_live_..."
# 2. Submit a response
curl -X POST https://api.formidable.software/api/f/loan-app/submit \
-H "Authorization: Bearer fmb_live_..." \
-d '{ "annual_income": 85000, "credit_score": 720 }'Response
{
"submissionId": "sub_8f3a...",
"computedOutputs": {
"dti_ratio": 28.2,
"qualification": "Approved"
}
}import { FormRenderer } from "@fogpipe/forma-react";
import type { ComponentMap } from "@fogpipe/forma-react";
// Map field types to your own components
const components: ComponentMap = {
text: YourTextInput,
number: YourNumberField,
select: YourSelect,
boolean: YourCheckbox,
display: YourComputedDisplay,
};
function LoanApp({ spec }) {
return (
<FormRenderer
spec={spec}
components={components}
onSubmit={async (data) => {
await fetch("/api/submissions", {
method: "POST",
body: JSON.stringify(data),
});
}}
/>
);
}Loan Application
Computed
Debt-to-Income
16.9%
Qualification
ApprovedBuild vs. buy
You could build a form engine from scratch. Here's what that looks like next to Formidable.
Frequently asked questions
What is a headless form builder?
A headless form builder separates form design from form rendering. You design the form in Formidable's UI, and render it in your own application using the React SDK or API. This gives you full control over the look and feel while keeping the form logic, validation, and conditional rules managed centrally.
How does the React SDK work?
Install @fogpipe/forma-react, create a ComponentMap that maps field types (text, number, select, etc.) to your own React components, and pass it to FormRenderer along with the form spec. The SDK handles state management, validation, field visibility, and computed values. You only write the UI layer.
Do I need to use React?
The React SDK is the fastest path, but the form spec is plain JSON. You can fetch it via API and build your own renderer in any framework. The spec includes all the information needed: field definitions, validation rules, conditional logic, and computed field expressions.
Can non-technical users create and edit forms?
Yes. Business users design and modify forms through Formidable's conversational AI interface. No code, no drag-and-drop builder to learn. When they publish changes, your application picks up the updated spec automatically.
Is the React SDK open source?
Yes. @fogpipe/forma-react and @fogpipe/forma-core are published on npm. You can inspect the source, contribute, or fork it. There's no vendor lock-in on the rendering side.
Build a form. Render it your way.
“Create a customer onboarding form with company name, industry, team size, primary use case, and a computed plan recommendation based on team size and use case”
Free to start · No credit card required · See plans