The latest articles on DEV Community by Esther (@bashti). https://dev.to/bashti https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F779445%2Fc19e9b64-d072-4284-b9d8-5968a600d6a9.jpg https://dev.to/bashti en Esther Mon, 29 Sep 2025 06:48:33 +0000 https://dev.to/bashti/ai-powered-form-builder-1105 https://dev.to/bashti/ai-powered-form-builder-1105 <p><em>This is a submission for the <a href="https://dev.to/challenges/kendoreact-2025-09-10">KendoReact Free Components Challenge</a>.</em></p> <h2> What I Built </h2> <p>I created a dynamic React form builder app that allows users to generate customizable forms using natural language prompts. Users can describe the form they want, and the app builds it with fully functional KendoReact components. The app also supports live previews, code generation, and copying the React code for integration into other projects. </p> <p>This project demonstrates the versatility of KendoReact's free components, combining inputs, layout, form validation, and advanced UI elements into a seamless user experience.</p> <h2> Demo </h2> <p><a href="https://stackblitz.com/edit/vitejs-vite-9rk9pkds" rel="noopener noreferrer">https://stackblitz.com/edit/vitejs-vite-9rk9pkds</a></p> <p> <iframe src="https://stackblitz.com/edit/vitejs-vite-9rk9pkds?" width="100%" height="500"> </iframe> </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiekxn6c3qlhuw9cmipwy.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiekxn6c3qlhuw9cmipwy.png" alt="Hero"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlqok4lhfd3rqjdq2hty.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqlqok4lhfd3rqjdq2hty.png" alt="Form"></a></p> <p>Repo: <a href="https://github.com/essykings/ai-form-builder" rel="noopener noreferrer">https://github.com/essykings/ai-form-builder</a></p> <h2> KendoReact Components Used </h2> <ul> <li> <strong>Layout &amp; Navigation:</strong> <ul> <li><code>TabStrip</code></li> <li><code>TabStripTab</code></li> </ul> </li> <li> <strong>Dialogs &amp; Actions:</strong> <ul> <li><code>Dialog</code></li> <li><code>DialogActionsBar</code></li> <li><code>Button</code></li> </ul> </li> <li> <strong>Inputs:</strong> <ul> <li><code>Input</code></li> <li><code>TextArea</code></li> <li><code>TextBox</code></li> <li><code>MaskedTextBox</code></li> <li><code>NumericTextBox</code></li> <li><code>Checkbox</code></li> <li><code>RadioButton</code></li> <li><code>Switch</code></li> <li><code>Slider</code></li> <li><code>RangeSlider</code></li> <li><code>Rating</code></li> <li><code>ColorPicker</code></li> </ul> </li> <li> <strong>Dropdowns &amp; Selects:</strong> <ul> <li><code>DropDownList</code></li> <li><code>MultiSelect</code></li> <li><code>ComboBox</code></li> <li><code>AutoComplete</code></li> </ul> </li> <li> <strong>Date &amp; Time:</strong> <ul> <li><code>DatePicker</code></li> <li><code>TimePicker</code></li> <li><code>DateTimePicker</code></li> <li><code>DateRangePicker</code></li> </ul> </li> <li> <strong>File Upload:</strong> <ul> <li><code>Upload</code></li> </ul> </li> <li> <strong>Forms:</strong> <ul> <li><code>Form</code></li> <li><code>FormElement</code></li> <li><code>Field</code></li> </ul> </li> <li> <strong>Labels &amp; Helpers:</strong> <ul> <li><code>Label</code></li> <li><code>Hint</code></li> <li><code>Error</code></li> </ul> </li> <li> <strong>Indicators:</strong> <ul> <li><code>Loader</code></li> </ul> </li> <li> <strong>Notifications:</strong> <ul> <li><code>Notification</code></li> <li><code>NotificationGroup</code></li> </ul> </li> </ul> devchallenge kendoreactchallenge react webdev