Framework-agnostic DOM renderer, web component, and standalone browser bundle for Fillo — forms that render inside your own product, no iframe. Use it with Vue, Svelte, Astro, or plain browser JavaScript.

📚 Full documentation → fillo.so/docs

npm i @usefillo/dom

import { renderForm } from "@usefillo/dom";
import "@usefillo/dom/styles.css"; // optional default theme — or bring your own

renderForm(document.querySelector("#fillo-form"), {
  formId: "cust-feedback",
  onSubmitted: (id) => console.log("response", id),
});

Published formId embeds can fetch and submit without a publishable key. Use createClient({ key }) only when syncing code-defined schemas, or when you need to point the SDK at a custom API origin.

import { createClient, defineForm, renderForm } from "@usefillo/dom";

const client = createClient({ key: "pk_…" }); // Settings → Code-defined forms
const form = defineForm({
  id: "cust-feedback",
  pages: [{ id: "p1", blocks: [
    { id: "email", kind: "email", label: "Work email", required: true },
    { id: "msg", kind: "long_text", label: "What should we know?" },
  ] }],
});

renderForm(document.querySelector("#fillo-form"), {
  form,
  client,
  onSubmitted: (id) => console.log("response", id),
});

Or drop it in with a single script tag — the bundle exposes a global Fillo:

<div id="fillo-form"></div>
<script src="https://unpkg.com/@usefillo/dom/dist/standalone.global.js"></script>
<script>
  const client = Fillo.createClient({ key: "pk_…" });
  const form = Fillo.defineForm({ id: "cust-feedback", pages: [/* … */] });
  Fillo.renderForm(document.querySelector("#fillo-form"), { form, client });
</script>

For tiny feedback widgets, set settings.submitMode: "auto" on a select/rating/checkbox/dropdown/linear scale form. The default renderer hides the first submit button, submits after a complete discrete answer, and brings the submit button back if that answer opens a text or upload follow-up. Add submissionLimit: "once_per_visitor" for browser-scoped one-response feedback.

The default stylesheet follows system dark mode for unthemed embeds. Pass theme: { colorScheme: "dark" } or "light" when the host surface is known.

Re-exports the core embedding surface from @usefillo/core (createClient, FilloClient, FormSchema, validation/logic helpers, …).