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; manage forms and submissions from Node.js.
- CDN drop-in — one script tag +
data-formsreachon any form - Plain JS / ESM —
@formsreach/jsfor vanilla apps and custom UIs - React & Next.js —
useFormsReachhook - Vue & Nuxt —
useFormsReachcomposable - Node.js —
@formsreach/nodemanagement SDK (forms & submissions) - TypeScript — published types for all packages
- Zero runtime deps on the core JS and Node SDKs
| 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 |
@formsreach/node | npm i @formsreach/node | Node management (forms / subs) |
<formaction="https://api.formsreach.com/submit" method="POST"><inputtype="hidden" name="api_key" value="YOUR_API_KEY" /><inputtype="text" name="name" required/><inputtype="email" name="email" required/><textareaname="message" required></textarea><buttontype="submit">Submit Form</button></form>Get an API key from the FormsReach dashboard.
<scriptsrc="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script><script>FormsReach.init({apiKey: "fr_your_key"});</script><formdata-formsreach><inputtype="text" name="name" required/><inputtype="email" name="email" required/><textareaname="message" required></textarea><buttontype="submit">Submit</button></form>Get an API key from the FormsReach dashboard. See packages/js for programmatic submitForm usage.
npm install @formsreach/reactimport{useFormsReach}from"@formsreach/react";const{ submit, submitting }=useFormsReach("fr_your_key");// <form onSubmit={submit}>…</form>Full guide: packages/react.
npm install @formsreach/vue<script setup>import { useFormsReach } from"@formsreach/vue";const { submit, submitting } =useFormsReach("fr_your_key");</script>Full guide: packages/vue.
npm install @formsreach/nodeimport{FormsReach}from"@formsreach/node";constfr=newFormsReach({apiKey: process.env.FORMSREACH_API_KEY!});const{ items }=awaitfr.forms.list();constpage=awaitfr.submissions.list(items[0]!.id,{limit: 50});Uses a developer API key (Bearer), not the public form fr_… key. Full guide: packages/node.
| Stack | Path |
|---|---|
| HTML / plain JS | examples/html |
| React | examples/react |
| Next.js | examples/nextjs |
| Vue | examples/vue |
| Nuxt | examples/nuxt |
| Node | examples/node |
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)- 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,@formsreach/node), runpnpm changeset, choose a bump type, and commit the new file under.changeset/. - Browser packages (
js/react/vue) version in lockstep.@formsreach/nodeversions independently. - See Changesets for details.
Git hooks (Husky): Conventional Commits on commit-msg; lint-staged on pre-commit; full pnpm check on pre-push.
The Version Packages PR is opened automatically by GitHub Actions when changesets land on main.
- Merge PRs that include changesets into
main. - The Release workflow opens or updates a Version Packages PR (bumps all packages together, updates each package
CHANGELOG.md). - Review and merge the Version Packages PR.
- 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.
MIT
Part of FormsReach — form backend / contact form API. Product: formsreach.com · AI skill: formsreach/skills