Skip to content

1.0.2

Choose a tag to compare

@henriquefps henriquefps released this 15 Jun 02:08

OpenForms v1.0.0 - Official Launch

We are excited to announce the initial production release of OpenForms (v1.0.0)!

OpenForms is a lightweight, zero-dependency, open-source (Apache-2.0) visual form builder and renderer designed specifically to run in any web environment—from standard single-page apps to hybrid mobile containers (Capacitor/Cordova) and low-code platforms like OutSystems.

What's Inside?

This release introduces the two core pillars of the suite:

OpenFormBuilder: A visual drag-and-drop schema designer that outputs a clean, structured JSON schema (FormSchemaJSON).
OpenFormRenderer: A responsive, reactive form player that consumes the JSON schema, manages state, handles live calculations, and triggers JavaScript callbacks (onFieldChange, onSubmit).
Key Features🔌 Zero External Dependencies

Written entirely in pure ES6 Vanilla JavaScript and Vanilla CSS. It loads globally via a simple script tag without the need for NPM package managers, bundlers (Vite, Webpack), or framework wrappers. Completely immune to third-party NPM security vulnerabilities.

📐 CSS HSL Theme Customization

Styling is built on a clean token design system utilizing native CSS variables. Redefine a few base HSL variables (like --color-primary) to instantly match OpenForms to your parent application's branding.

📐 Visual Grid Layouts

Supports structural multi-column form layouts. Admins can arrange fields into rows and adjust column spans dynamically on a fluid 12-column responsive layout.

📑 Wizard Workflows (Pagination)

Enables multi-page forms (wizards) with native page-jump validation, keeping the active DOM light and fast by rendering only the active page section.

⚡ Reactive Conditional Visibility (CNF)

Features a Conjunctive Normal Form (AND-of-ORs) logic engine. Conditional visibility rules evaluate on every keystroke/change event to show or hide fields and sections, toggle mandatory constraints (updating HTML required tags and red asterisks), or disable fields (freezing text inputs and signature canvases). It also automatically collapses empty DOM rows to prevent visual layout gaps.

🧮 Secure Calculated Fields & Formulas

Supports spreadsheet-like calculations for number inputs. Formulas parse curly-braced variables (e.g., {price} * {qty}) and evaluate them securely via a strict regex-sanitized math whitelist (blocking script injection). Nested formula dependencies are resolved dynamically using a fixed-point relaxation loop.

📷 Native Mobile Camera & Share Hooks

Out-of-the-box support for Capacitor and Cordova plugins. Automatically detects native shells to trigger native camera captures (via @capacitor/camera / cordova-plugin-camera) and native OS share sheets (via @capacitor/share and @capacitor/filesystem).

🔢 Custom Input Masking

Enforces entry patterns (e.g., dates, phone numbers, or ID cards) using wildcards (9 for numbers, a for letters, * for alphanumeric) in real-time with smooth cursor tracking and options to persist clean (unmasked) values.

♿ WCAG 2.1 Level AA Accessibility (a11y)

Optimized for assistive technologies, featuring high-visibility focus indicators, keyboard-navigable steps (role="tablist" using Arrow/Enter/Space), semantic HTML with strict label-to-input id/for bindings, dynamic validation announcements (aria-describedby / aria-invalid), and screen-reader live regions (aria-live).

🌐 Localization & Swappable Translations

Full support for multi-language overrides. Swap language dictionaries on the fly to translate structural UI elements, placeholder texts, validation warnings, and the form fields themselves.

🔒 Read-Only Presentation Mode

Instantly renders completed forms in an immutable, flat-text view state, suitable for audit logs, historical receipts, and detail screens.

Open-Source & Community

License: Apache-2.0 (100% free for commercial and personal use, royalty-free).
Playground Sandbox: openforms.pages.dev
GitHub Repository: henriquefps/open-forms