Headless, bring-your-own-markup frontend SDKs for
FormFlow — the
@formflowjs/strapi-plugin-formflow Strapi v5 plugin.
Fetch a form schema by slug and render it with your own elements and styles — Tailwind, shadcn, MUI, or plain CSS. The SDKs own schema typing, client-side validation (parity with the server), conditional visibility, multi-step flow, file uploads, and captcha/honeypot plumbing. They ship no CSS and render no markup of their own.
| Package | For | Description |
|---|---|---|
@formflowjs/core |
Framework-agnostic | Types, content-API client, schema-driven form store, validation, conditional logic, multi-step, uploads, captcha and start-analytics plumbing. |
@formflowjs/react |
React · Next.js · Astro | Headless hooks and renderless fields with ARIA-complete prop getters. SSR/RSC-safe. |
@formflowjs/vue |
Vue 3 · Nuxt | Renderless components and composables exposing reactive state and prop bags. |
# React
npm i @formflowjs/react
# Vue
npm i @formflowjs/vue@formflowjs/core is re-exported from both adapters, so you import everything from the one you use.
import { FormFlowProvider, FormFlowField, useFormFlow } from '@formflowjs/react';
function Fields() {
const f = useFormFlow();
return (
<form {...f.getFormProps()}>
{f.fields.map((field) => (
<FormFlowField key={field.name} name={field.name}
render={(api) => (
<label {...api.getLabelProps()}>
{api.field.label}
<input {...api.getInputProps()} />
{api.invalid && <span>{api.error}</span>}
</label>
)} />
))}
<button disabled={f.isSubmitting}>{f.schema.settings.submitButtonText}</button>
</form>
);
}Per-framework guides (Next.js App Router, Astro islands, Vite, Nuxt) live in each package's README.
- Strapi plugin: https://github.com/Digidinc/strapi-plugin-formflow
- Examples:
examples/(React + Vue, Vite)
MIT. FormFlow is developed and maintained by Bardiya Rahimi and commercially published by Digid Inc.