Building dynamic forms in JavaScript with Bryntum widgets Bryntum, a provider of scheduling components, has published a guide demonstrating how to build dynamic forms in vanilla JavaScript using its Grid trial package, which includes core UI widgets. The tutorial shows how to define form fields as JSON data and generate the UI dynamically, including conditional fields based on user input, and provides step-by-step setup instructions with a Vite project. Building dynamic forms in JavaScript with Bryntum widgets We strive to keep posts updated, but code samples may sometimes be outdated. Humans, see the Bryntum documentation ; agents, https://mcp.bryntum.com for the latest info. A form that’s hardcoded in HTML needs a code change every time a question changes. For forms that change often, like an event registration form where the ticket types and workshops differ per event, it helps to define the fields as data and generate the UI from it. Update the JSON in the backend, and the form updates. The form is dynamic. A dynamic form can also mean form inputs change based on user input. In this guide, we’ll show you how to build a dynamic event registration form in vanilla JavaScript using Bryntum widgets. The form is defined in a JSON file and validates user input. It also includes a dynamically displayed field that shows based on a user’s answer. Bryntum is known for scheduling components such as the Gantt https://bryntum.com/products/gantt/ , Scheduler https://bryntum.com/products/scheduler/ , and Scheduler Pro https://bryntum.com/products/schedulerpro/ , but every Bryntum product ships with a set of core UI widgets https://bryntum.com/products/grid/docs/api/widgets : text fields, combos, date and time fields, checkboxes, radio groups, buttons, popups, and more. You can see them all in the kitchen sink demo https://bryntum.com/products/grid/examples/kitchen-sink/ . Getting started: Setting up the project Create a vanilla JavaScript Vite project and install the Bryntum Grid trial, which includes all the widgets we need: npm create vite@latest dynamic-forms -- --template vanilla cd dynamic-forms npm install npm install @bryntum/grid@npm:@bryntum/grid-trial If you have a Bryntum license, refer to our npm Repository Guide https://bryntum.com/products/grid/docs/guide/Grid/npm/repository/private-repository-access and install the licensed package. Add a vite.config.js file in the project root to prevent Vite from loading the Bryntum bundle twice in dev mode: js import { defineConfig } from 'vite'; export default defineConfig { optimizeDeps : { include : '@bryntum/grid' } } ; Delete the Vite starter files src/counter.js and the src/assets folder: rm src/counter.js && rm -r src/assets Replace the