Framework Entry Points

Formerie has one API contract and several integration entry points. Use the UI adapter for component state, and use @formerie/client when your form flow runs inside a browser component, server route, action, or endpoint.

Choose An Entry Point

Package Managers

Use whichever package manager your project already uses.

npm install @formerie/client

pnpm add @formerie/client

yarn add @formerie/client

bun add @formerie/client

Framework adapters follow the same pattern. This example uses React; replace the package name with the adapter or meta-framework package for your project.

npm install @formerie/react

pnpm add @formerie/react

yarn add @formerie/react

bun add @formerie/react

Use workspace for the Formerie workspace handle in SDK target objects.

Next.js

Use @formerie/next in client components and Server Actions. The package re-exports the React hooks and adds helpers for App Router forms that submit through your Next.js app first.

import { createFormerieNextAction } from "@formerie/next";

const submitContact = createFormerieNextAction({
  workspace: "example.com",
  form: "contact"
});

export function ContactForm() {
  return (
    <form action={submitContact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button>Send</button>
    </form>
  );
}

Nuxt

Use @formerie/vue in Vue components. Use @formerie/nuxt in Nuxt server routes when the submission should pass through your application.

import { readFormData } from "h3";
import { createFormerieNuxtSubmitHandler } from "@formerie/nuxt";

export default defineEventHandler(
  createFormerieNuxtSubmitHandler(
    {
      workspace: "example.com",
      form: "contact"
    },
    {
      readFormData
    }
  )
);

Remix

Use @formerie/remix in Remix route modules when an action should submit form data to Formerie and return a normalized JSON response. The package also re-exports the React hooks for route components.

import { createFormerieRemixAction } from "@formerie/remix";

export const action = createFormerieRemixAction({
  workspace: "example.com",
  form: "contact"
});

Qwik

Use @formerie/client inside Qwik City actions for now. A dedicated @formerie/qwik package can come later if repeated action helpers emerge.

import { component$ } from "@builder.io/qwik";
import { Form, routeAction$ } from "@builder.io/qwik-city";
import { FormerieRuntimeClient } from "@formerie/client";

export const useContact = routeAction$(async (data) => {
  const formerie = new FormerieRuntimeClient();

  return formerie.submit("example.com", "contact", {
    fields: {
      email: String(data.email ?? ""),
      message: String(data.message ?? "")
    }
  });
});

export default component$(() => {
  const contact = useContact();

  return (
    <Form action={contact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button type="submit">Send</button>
    </Form>
  );
});

Astro

Use @formerie/astro to generate Formerie attributes for Astro forms. Use @formerie/client or a framework adapter inside islands that submit programmatically.

---
import { createFormerieFormAttributes } from "@formerie/astro";

const attrs = createFormerieFormAttributes({
  workspace: "example.com",
  form: "contact"
});
---

<form {...attrs}>
  <input name="email" type="email" />
</form>

When To Add A Dedicated Package

Add a dedicated framework package only when it removes real repeated work:

• framework-specific state helpers
• automatic runtime configuration
• server-action or route-action wrappers that normalize Formerie responses
• first-class form attribute generation
• integration with a framework’s validation or error display conventions

Until then, prefer @formerie/client plus a framework guide.