create-reactaform-app

Scaffold a minimal Vite (default) or Next.js React app with ReactaForm preconfigured. Paste a form definition and see results instantly.

Install the CLI

The CLI is published on npm. Install it globally to run the create-reactaform-app command directly, or use npx/yarn dlx/pnpm dlx to run without installing.

Global install (npm):

npm install -g create-reactaform-app
# then run
create-reactaform-app my-app

Using npx (no install):

npx create-reactaform-app my-app

Yarn (global):

yarn global add create-reactaform-app
# then run
create-reactaform-app my-app

pnpm (global):

pnpm add -g create-reactaform-app
# then run
create-reactaform-app my-app

Quick start

Create a new app from the CLI (JavaScript):

npx create-reactaform-app my-app

TypeScript project:

npx create-reactaform-app my-app --ts

Create a Next.js app (App Router):

npx create-reactaform-app my-next-app --next

Use an example overlay (overwrites the starter formDefinition):

npx create-reactaform-app my-app --ts --example contact-form

After creating the project:

cd my-app
npm install
npm run dev

Open the URL shown by the dev server (usually http://localhost:5173 or http://localhost:3000).

What you get

• Vite + React app or Next.js App Router scaffolded
• reactaform installed and wired into the starter app (src/App.jsx or app/page)
• A starter formDefinition file you can edit to update the UI instantly

Project layout (Vite)

my-app/

• src/
  • App.jsx # ReactaForm renderer
  • formDefinition.js
  • main.jsx
• index.html
• package.json
• vite.config.js

Project layout (Next.js App Router)

my-next-app/

• app/
  • page.jsx # imports ./formDefinition
  • formDefinition.js
• package.json

How it works

1. CLI scaffolds a base project (Vite or Next) using the official initializers.
2. The CLI copies small template files into the generated project (App wiring, styles).
3. The CLI creates a starter formDefinition.js (or .ts when --ts) inside the app so ReactaForm has data to render.
4. If --example <name> is provided, the example files are overlaid into the project (JS examples are converted to TypeScript when --ts).

Starter formDefinition example

// src/formDefinition.js
export const formDefinition = {
  name: 'contactForm',
  displayName: 'Contact Form',
  version: '1.0.0',
  properties: [
    { name: 'fullName', displayName: 'Full Name', type: 'text', defaultValue: '', required: true },
    { name: 'email', displayName: 'Email', type: 'email', defaultValue: '', required: true }
  ]
};

CLI options

• --ts Create a TypeScript project
• --next Create a Next.js App Router project
• --install Run npm install after scaffolding
• --example Overlay an example (e.g. --example contact-form)

Testing the CLI locally

Pack and test without publishing:

npm pack
npx ./create-reactaform-app-0.1.0.tgz my-app-test --ts --example contact-form

Or link locally for iterative testing:

npm link
create-reactaform-app my-app-test --ts --example contact-form

Publishing notes

• Ensure bin/cli.js is executable and has the Node shebang (#!/usr/bin/env node).
• Add repository, author, files, and publishConfig to package.json before publishing.

Requirements

• Node.js >= 18

Contributing

Contributions welcome: open an issue or PR with improvements, examples, or bugfixes.

License

MIT