Everright-formeditor NPM

Everright-formEditor is a free and open source javascript visual low-code editor. It can create forms with simple operations through the GUI interface. It has a flexible interaction. The PC depends on element-plus while the mobile depends on vant. There is a set of adapters to convert parameters into ones that can be recognized by both element-plus and vant.

Features

1.Support Chinese and English
2.Support Pc and Mobile
3.Rich fields and layout containers
4.Flexible interaction
5.Fields and layout separated
6.Fields and layout not separated
7.The editor, previewer, and configuration panel can all be used separately
8.Logical controller (Visible, Required, Read only)

Docs

Examples

Editor layoutType1: Fields and layout not separated
Editor layoutType2: Fields and layout separated
Preview layoutType1: Fields and layout not separated
Preview layoutType2: Fields and layout separated
Config panel Various properties for displaying and editing form fields are provided, including basic information, types, layouts, and so on

Screenshot

yourDesign

Logical controller

Logical controlle

Fields adaptation

Type	Pc	Mobile
Input	:white_check_mark:	:white_check_mark:
Email	:white_check_mark:	:white_check_mark:
ID	:white_check_mark:	:white_check_mark:
Cellphone	:white_check_mark:	:white_check_mark:
URL	:white_check_mark:	:white_check_mark:
Textarea	:white_check_mark:	:white_check_mark:
Number	:white_check_mark:	:white_check_mark:
Radio	:white_check_mark:	:white_check_mark:
Checkbox	:white_check_mark:	:white_check_mark:
Select	:white_check_mark:	:white_check_mark:
Time	:white_check_mark:	:white_check_mark:
Date	:white_check_mark:	:white_check_mark:
Rate	:white_check_mark:	:white_check_mark:
Switch	:white_check_mark:	:white_check_mark:
Slider	:white_check_mark:	:white_check_mark:
Html	:white_check_mark:	:white_check_mark:
Cascader	:white_check_mark:	:white_check_mark:
File	:white_check_mark:	:white_check_mark:
Signature	:white_check_mark:	:white_check_mark:
Region	:white_check_mark:	:white_check_mark:

Containers adaptation

Type	Pc	Mobile
Grid	:white_check_mark:	:white_check_mark:
Table	:white_check_mark:	:x:
Tabs	:white_check_mark:	:white_check_mark:
Collapse	:white_check_mark:	:white_check_mark:
Divider	:white_check_mark:	:white_check_mark:
Subform	:white_check_mark:	:white_check_mark:

Logical controller operator

Field	Equal	Not equal	Contains	Not contain	Greater than	Greater than or equal to	Less than	Less than or equal to	Between	Equal to one of	Not equal to one of	Belong to one of	Not belong to one of	Empty	Not empty
Input	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Email	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
ID number	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Cellphone	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
URL	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Textarea	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Number	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Radio	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Checkbox	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Select	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Time	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (date)	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (datetime)	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Date (dates)	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Date (daterange)	:white_check_mark:	:white_check_mark:												:white_check_mark:	:white_check_mark:
Rate	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:					:white_check_mark:	:white_check_mark:
Switch	:white_check_mark:	:white_check_mark:
Slider	:white_check_mark:	:white_check_mark:			:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Html	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:										:white_check_mark:	:white_check_mark:
Cascader	:white_check_mark:	:white_check_mark:												:white_check_mark:	:white_check_mark:
File														:white_check_mark:	:white_check_mark:
Signature														:white_check_mark:	:white_check_mark:
Region										:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Subform														:white_check_mark:	:white_check_mark: