PortalSmith: Generate schema-driven uibuilder form portals from JSON
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.
CyprNet Solutions: https://www.cyprnetsolutions.com
- 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
- Node.js: 18+ (20.x recommended)
- Node-RED: 3.1+ (4.x recommended)
- node-red-contrib-uibuilder: v7.x
- Browser: modern Chrome/Firefox/Edge
Install into your Node-RED userDir:
``bash`
cd ~/.node-red
npm install @cyprnet/node-red-contrib-uibuilder-formgen
Then restart Node-RED.
1. Create a uibuilder instance (example URL: form-jobapp) and deploy.uibuilder-formgen
2. Send a schema into (legacy Vue 2) or uibuilder-formgen-v3 (Vue 3) as msg.schema (or use the example flow)./uibuilder/
3. Open in your browser.
Generated portals are a 3-file set that must stay together in the uibuilder instance’s served folder:
- src/index.htmlsrc/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.
- 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
- 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.
- Offline user guide (packaged): docs/user-guide.htmlexamples/portalsmith-formgen-example.json
- Example flow: examples/schemas/
- Industry schemas: examples/formgen-builder/src/index.html
- Schema Builder frontend files (uibuilder v7+): and examples/formgen-builder/src/index.jsexamples/formgen-builder-uib2/src/index.html
- Schema Builder frontend files (legacy uibuilder 2.x): and examples/formgen-builder-uib2/src/index.js
MIT. See LICENSE`.