@cyprnet/node-red-contrib-uibuilder-formgen

PortalSmith: Generate schema-driven uibuilder form portals from JSON
1,473
Install
npm install @cyprnet/node-red-contrib-uibuilder-formgen
Latest Version:0.5.41
License:MIT
Last Updated:Feb 4, 2026
Links: npm
Maintainer: kmccyprnet

PortalSmith FormGen (uibuilder-formgen)

PortalSmith FormGen is a Node-RED contrib module that generates schema-driven uibuilder portals (HTML/JS) from a JSON schema. It is designed for no-build-step operation: generate → open in browser → submit back to Node-RED.

Website

CyprNet Solutions: https://www.cyprnetsolutions.com

Features

  • Schema-driven forms: sections + fields + basic validation
  • Export: JSON/CSV/HTML (client-side)
  • Draft save/load: browser + file workflows
  • Theme + branding: light/dark theme support; logo support (licensed)
  • Results page: optional result rendering after HTTP submit

Requirements (dependencies)

  • Node.js: 18+ (20.x recommended)
  • Node-RED: 3.1+ (4.x recommended)
  • node-red-contrib-uibuilder: v7.x
  • Browser: modern Chrome/Firefox/Edge

Installation

Install into your Node-RED userDir:

cd ~/.node-red
npm install @cyprnet/node-red-contrib-uibuilder-formgen

Then restart Node-RED.

Quick start

  1. Create a uibuilder instance (example URL: form-jobapp) and deploy.
  2. Send a schema into uibuilder-formgen (legacy Vue 2) or uibuilder-formgen-v3 (Vue 3) as msg.schema (or use the example flow).
  3. Open /uibuilder/<instance>/ in your browser.

Important: the portal needs form.schema.json

Generated portals are a 3-file set that must stay together in the uibuilder instance’s served folder:

  • src/index.html
  • src/index.js
  • src/form.schema.json

If you copy a portal to another uibuilder instance (or commit/restore from git), make sure you copy all three. The portal loads the schema at runtime and will not work correctly if form.schema.json is missing.

Node differences (legacy vs v3)

  • uibuilder-formgen (legacy): generates portals using Vue 2 + Bootstrap 4
  • uibuilder-formgen-v3: generates portals using Vue 3 + Bootstrap 5

The two portals are intentionally very similar in appearance; the difference is the runtime stack and long-term supportability.

To confirm which node generated a portal, open the generated portalsmith.runtime.json and check:

  • generatorNode: uibuilder-formgen or uibuilder-formgen-v3

Licensing (offline-first)

  • Free (default): watermarked portal + default PortalSmith branding.
  • Licensed (PRO): allows watermark removal and custom branding/logo (if enabled by your license features).

To apply a license, paste the license key provided by CyprNet into the shared portalsmith-license config node and reference it from your uibuilder-formgen nodes. Restart Node-RED after installing/updating the module.

Documentation & examples

  • Offline user guide (packaged): docs/user-guide.html
  • Example flow: examples/portalsmith-formgen-example.json
  • Industry schemas: examples/schemas/
  • Schema Builder frontend files (uibuilder v7+): examples/formgen-builder/src/index.html and examples/formgen-builder/src/index.js
  • Schema Builder frontend files (legacy uibuilder 2.x): examples/formgen-builder-uib2/src/index.html and examples/formgen-builder-uib2/src/index.js

License

MIT. See LICENSE.

Related Packages

@vueblocks/element-schema-form

A schema-based form generator component for Element UI.

1,261 35
@genform/vue

A form generator using JS based on a JSON object for Vue projects

1,005
@feugene/granularity-forms-schema

Schema-driven forms for the @feugene/granularity design system — zod and JSON Sc...

2,546 1
vue-formular

a comprehensive vue.js form component

4,451 43

Version History

Version Released License
0.5.41 MIT
0.5.40 MIT
0.5.39 MIT
0.5.38 MIT
0.5.37 MIT