Frontend Tips 5— Creating dynamic pages and forms with SurveyJS

In this tip I want to share a tool that I’ve been using for more than 3 years and more than 5 real projects. I want to introduce to you SurveyJS.

In some projects we have to let the user to create different dynamic pages and forms, right now I was participating in 3 kinds of projects with these necessities:

• Simple projects: Where the dynamic page “is modeled” in the backend, and we just receive a JSON that we have to render, after render it the user will be able to interact with a dynamic page or dynamic form.
• Common projects: The same as Simple projects but also the want to let another kind of user to create these JSONs using fancy boxes.
• Complex projects: All the things described above but also custom features like code editor, complex components, etc.

As developers, we can create all this features from scratch, or we can search for a tool that helps us to do the most of them automatically, and focus our effort into business features.

That was how a coworker introduced me SurveyJS, described by themselves as:

Build fully-customizable surveys,
forms and quizzes that seamlessly
integrate into your application

SurveyJS goes beyond cloud-based surveys
• Embed surveys in your application
• Add the survey creator to your application
• Implement your own data storage

And that’s only the start.

The Library

Survey has a free and open source option that is their library, this library let us to render a JSON (Simple projects 💪🏻) the core of the library is made with KnockoutJS, but they have good wrappers to use with jQuery, Angular, React or Vue 😀.

I’ve personally used with React and Vue and works really well with both of them.

You can fully customize how the dynamic page or form will look like, using custom components or overriding the SCSS, it is also compatible with Bootstrap.