Skip to main content

For product engineers

Your product needs a form. Not another form backend.

Install the renderer and keep the route, components, and product context in your app. Fillo maintains the schema, validation, uploads, response records, and delivery behind it.

SupportForm.tsx
"use client";

import { createClient, Fillo } from "@usefillo/react";
import "@usefillo/react/styles.css";

const fillo = createClient({
  key: process.env.NEXT_PUBLIC_FILLO_KEY!,
});

export function SupportForm() {
  return (
    <Fillo.Form id="support" client={fillo}>
      <Fillo.Email id="email" label="Work email" required />
      <Fillo.Phone id="phone" label="Phone" />
      <Fillo.Rating id="urgency" label="How urgent?" />
    </Fillo.Form>
  );
}
Powered by Fillo
no <iframe>
Browser
Native DOM, no iframe
Contract
Shared schema & validation
After submit
Response, files & delivery state

The boundary

Keep the product. Hand off the plumbing.

Fillo is useful when the form belongs inside your product, but rebuilding the backend and admin workflow for every form does not.

Your app owns

  • The route and surrounding flow
  • Components and visual design
  • User and account context
  • What happens after submit

Fillo handles

  • Schema and server validation
  • Browser-direct file uploads
  • Response records and exports
  • Versions, webhooks, and delivery state

One contract, end to end

The form is only the first step.

The same definition stays connected from the component your user sees to the response your team acts on.

  1. 01

    Define the form

    Use JSX, the visual editor, the CLI, or your coding agent. One schema becomes the contract.

  2. 02

    Render it in your app

    React or DOM controls mount on your route as native elements. Your CSS stays in charge.

  3. 03

    Collect the response

    Fillo validates the answers, uploads files, and attaches the product context you pass in.

  4. 04

    Act on it

    Review the response, export it, or deliver it through a signed webhook or integration.

Choose your surface

Start where you already work.

React & Next.js

@usefillo/react

Render a published form or keep the schema in JSX. Start with accessible defaults, then replace any field or the full layout.

Open the React quickstart

Vue, Svelte, Astro & plain HTML

@usefillo/dom

Mount the same form with a small DOM renderer, a custom element, or a standalone browser bundle.

See every embed method

Claude Code, Codex & other agents

Skill, CLI & MCP

Give your coding agent the canonical Fillo instructions. It can scaffold, preview, stage, and publish against the real product.

Set up a coding agent

Reference

Everything you need when you need the details.

Human-readable guides live beside OpenAPI, Markdown, and agent context. You should not have to reverse-engineer the product before you can integrate it.

Machine-readable context for tools and coding agents.

No sales call required

Render the first form in your app.

Start with the React quickstart, or open a guest draft in the browser. You can try the real hosted product without a payment card.