A simple form viewer for react

Usage no npm install needed!

<script type="module">
  import reactFormViewer from '';



An easy multi column form builder

Build or view, your beautiful form is just a click away.
No technical knowledge is required.
NO BACKEND,Entirely based on frontend.

GitHub watchers GitHub watchers GitHub watchers GitHub watchers

This is a fully customizable form builder based on React

image info Table of Contents






  • JSON based.
  • Redux based.
  • Fully Responsive
  • Customizable
  • Quick and easy.
  • Styled component based.
  • Theme supported
  • Full validation support
  • Custom theme

When do you need it

  • You have complex form to be created?
  • Forms are dynamic in nature?
  • You don't want to manage the form?
  • You need a structured/organised form rendering?
  • You are providing forms as service


  • Simple Form
  • Dynamic Form
  • Quiz
  • Exams
  • Tutorial
  • Sky is the only limit

Install 🐙

npm install react-form-viewer


yarn add react-form-viewer

Highlight 🔥

This project contains an advanced Form Builder and a Form Viewer.

Form Builder

  • Capable of creating form of any type.
  • Styled component theme support
  • Endlesss Customization
  • Add your own style
  • Add your own properties

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

  onControlValueChanged={() => {
  onFormValueChanged={() => {

Supported Elements

FormPlanner comes with tons of prebuilt elements which are already grouped for convenience. Few of them are visible by default. Rest can be turned on when required

Group Element Internal Name Availability
Basic Header header Default
Medium Header mediumheader Default
Small Header smallheader Default
Label label Default
Form Control Text Box text On Demand
Number Box number On Demand
Multiline Box multiline On Demand
Date Picker date On Demand
Date Time Picker datetime On Demand
Time Picker time On Demand
Checkbox checkbox On Demand
Radio radio On Demand
Select select On Demand
Color Picker color On Demand
Media Image image On Demand
Video video On Demand
PDF pdf On Demand
Quiz Question question On Demand
Advanced Grid grid On Demand
Rich Text richtext On Demand
Multi Values multivalue On Demand
Uploads Image Upload imageupload On Demand
Multiple Image Upload imagesupload On Demand
Miscellaneous Divider divider On Demand

Form Properties

Allows to add/update form meta information like

  • Title
  • Description
  • Header background image
  • Header background color
  • Background image
  • Background color image info

Form Parameters

Name Description Default Value
showFormProperties Show form properties button to update form level values false
showPreview Integrated button to show form preview false
allowCustomStyles Allow user to set custom css styles false
allowCustomProps Allow user to set custom field properties false
advancedFeatures Enable advanced features false
fields List of control types to be shown All

Preview your form

Preview your form while editing

Form Viewer

This is a full fledged form viewer.

  • Capable of rendering complex form layout.
  • Multi line and multi row
  • Theme support

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

  onChange={(key_name, balue, field_definition) => {
    console.log('Value received')


Getting built


Form Planner example image info

Edit element on hover image info

Edit element image info

Prebuilt Customization image info

Or add your own custmization image info

Items in queue

  • Localization

Contribution 🍰

Feel free to create issue and make pull request

Refer code of conduct

Refer contributing


MIT © Koustov