Everright FormEditor: A Vue3‑Based Visual Form Builder – Features and Implementation Details

Everright FormEditor is an open‑source visual form editor built with Vue3, leveraging element‑plus for PC and Vant for mobile. It provides flexible drag‑and‑drop, numerous field types (text, email, date, rating, etc.), layout containers (grid, table, tabs, collapse), built‑in internationalization, and two operating modes (layout‑field coupled or separated).

The core element is the Field , which represents both form fields and layout containers. Fields are placed on a Canvas that stores data as a two‑dimensional array Array[r][c] , allowing nested layout containers.

When a field is added to the Canvas, it is automatically wrapped by a Selection component that enables dragging, resizing, deletion, and parent selection. Selecting a field highlights it on the Canvas and displays its full property set in the Config panel.

The Adapter layer reconciles differing parameter names between element‑plus and Vant; for example, the rating component uses max on element‑plus and count on Vant. Sample adapter code:

if (!isPc) {
result.count = options.max
} else {
result.max = options.max
}

Two editor modes are supported: layoutType1 where layout and fields are not separated (PC design auto‑adapts to mobile), and layoutType2 where they are separated, allowing independent modifications on each platform while keeping field properties synchronized.

Drag‑and‑drop behavior relies on sortablejs with a custom plugin that intercepts dragOver and drop events to decide whether to insert a row (wrapping the element in an inline container) or a column.

During development a Node.js service with SQLite is bundled to store the form definitions, providing simple CRUD operations without the overhead of a full database server.

Current open issues include adding history tracking, visualizing the internal tree structure, and GUI controls for field visibility and validation logic, which are slated for future development.