FormsReach SDK

Official client libraries for FormsReach — a form backend and form API for static sites and modern frameworks. Submit HTML, React, or Vue forms without running your own server.

Features

• CDN drop-in — one script tag + data-formsreach on any form
• Plain JS / ESM — @formsreach/js for vanilla apps and custom UIs
• React & Next.js — useFormsReach hook
• Vue & Nuxt — useFormsReach composable
• TypeScript — published types for all packages
• Zero runtime deps on the core JS SDK

Packages

Package	Install	Use case
@formsreach/js	CDN or npm i @formsreach/js	Plain HTML / vanilla JS
@formsreach/react	npm i @formsreach/react	React & Next.js
@formsreach/vue	npm i @formsreach/vue	Vue & Nuxt

Quick start

HTML

<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY" />

  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>

Get an API key from the FormsReach dashboard.

Javascript

<script src="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script>
<script>
  FormsReach.init({ apiKey: "fr_your_key" });
</script>

<form data-formsreach>
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Submit</button>
</form>

Get an API key from the FormsReach dashboard. See packages/js for programmatic submitForm usage.

React / Next.js

npm install @formsreach/react

import { useFormsReach } from "@formsreach/react";

const { submit, submitting } = useFormsReach("fr_your_key");
// <form onSubmit={submit}>…</form>

Full guide: packages/react.

Vue / Nuxt

npm install @formsreach/vue

<script setup>
import { useFormsReach } from "@formsreach/vue";
const { submit, submitting } = useFormsReach("fr_your_key");
</script>

Full guide: packages/vue.

Examples

Stack	Path
HTML / plain JS	examples/html
React	examples/react
Next.js	examples/nextjs
Vue	examples/vue
Nuxt	examples/nuxt

Monorepo

pnpm install
pnpm -r build
pnpm -r test
pnpm lint
pnpm format
pnpm check   # format:check + lint + typecheck + test + build (also runs on pre-push)

Contributing

• Use the GitHub issue templates for bugs and feature requests.
• Open a PR against main. The PR template includes a short checklist.
• For changes that affect published packages (@formsreach/js, @formsreach/react, @formsreach/vue), run pnpm changeset, choose a bump type, and commit the new file under .changeset/.
• Packages version in lockstep (same version across all three).
• See Changesets for details.

Git hooks (Husky): Conventional Commits on commit-msg; lint-staged on pre-commit; full pnpm check on pre-push.

Releasing

The Version Packages PR is opened automatically by GitHub Actions when changesets land on main.

1. Merge PRs that include changesets into main.
2. The Release workflow opens or updates a Version Packages PR (bumps all packages together, updates each package CHANGELOG.md).
3. Review and merge the Version Packages PR.
4. The same workflow publishes to npm (pnpm release → build + changeset publish).

Maintainer setup (one-time): add a GitHub Actions secret NPM_TOKEN with publish access to the @formsreach npm scope. First public ship should use a real changeset (e.g. "Initial public release") via a Version PR — not a tooling-only dummy bump.

License

MIT