The Fillo API, on one page.

<FilloForm>#

The framed renderer. Pass formId (a published, dashboard-hosted form) or form (a schema or a code-defined form); code forms need client to save responses.

<FilloProvider> + <FormField>#

The headless escape hatch: runs the same engine, renders no layout. Compose your own with <FormField>, useField(), and useFillo()— render every required field, or submission fails on a field the visitor can’t see.

<FormField> renders one field with the default (or overridden) component, in your layout:

<Fillo.Form> extras#

The JSX authoring root (guide: /docs/authoring). Besides every <FilloForm> prop above (except form/formId), it takes the schema-level props:

Hooks#

useFillo() returns the full engine API — it throws outside <FilloForm> / <FilloProvider>:

useField(id) drives one field — the lowest-level hook:

useFilloController(options) is the React binding both components use — same options as <FilloProvider>. Outside React, the identical engine is createFormController() from @usefillo/core or @usefillo/dom.

import { FilloProvider, FormField, useField, useFillo } from "@usefillo/react";

function SubmitBar() {
  const { isLastPage, next, submit, status } = useFillo();
  return (
    <button onClick={() => (isLastPage ? void submit() : next())}>
      {status === "submitting" ? "Sending…" : isLastPage ? "Send" : "Next"}
    </button>
  );
}

function BareEmail() {
  const { value, error, setValue } = useField("email");
  return <input value={String(value ?? "")} onChange={(e) => setValue(e.target.value)} aria-invalid={!!error} />;
}

createClient#

import { createClient } from "@usefillo/react"; // or "@usefillo/dom"

const client = createClient({
  key: process.env.NEXT_PUBLIC_FILLO_KEY!, // pk_… — public by design
});

Methods — requests time out after 30 seconds; failures throw FilloError with status and, on 429, retryAfterSec:

settings.* keys#

On defineForm({ settings }), <Fillo.Form settings={…}>, or the dashboard. All optional.

Theme tokens#

Generated from FILLO_THEME_VARS (exported by @usefillo/core). Tokens with a FormTheme key are set inline by the theme prop / defineForm({ theme }) and sync to the hosted page; the rest are stylesheet-only — override them from your CSS on any ancestor. FormTheme.colorScheme is not a variable: it sets data-fillo-color-scheme on the root.

Strings#

Generated from DEFAULT_STRINGS (exported by @usefillo/core). Override any subset via the strings prop; schema-authored text — labels, success copy in settings — always wins.

@usefillo/dom#

renderForm(target, options) — target is an element or a selector string; returns a handle.

import { renderForm } from "@usefillo/dom";
import "@usefillo/dom/styles.css";

const instance = renderForm("#form", {
  formId: "customer-onboarding",
  onSubmitted: (id, data) => console.log("response", id, data),
});

// instance.setValue("email", "jane@example.com");
// await instance.submit();
// instance.destroy();

The returned handle:

Also exported: createFormElement(options) (build a detached node), the <fillo-form> web component (registerFilloElement(); publishable-key / form-id attributes, fillo-change / fillo-submit / fillo-error events), and createFormController() — the render-nothing engine for Vue, Svelte, or vanilla layouts.