DOCSEARCHbyAlgolia
Submit Docs

SurveyJS Creator Documentation

repository·master·Indexed 23 days ago

https://github.com/surveyjs/survey-creator

A professional-grade, client-side drag-and-drop form builder that generates JSON schemas for dynamic forms. It provides no-code form creation capabilities and supports integration with React, Angular, Vue, and Knockout/jQuery. The tool consists of a platform-independent data model (survey-creator-core) and framework-specific rendering packages.

Tokens
77.2K
Snippets
99
Records
443
Agent score
76%

What's inside SurveyJS Creator

  1. Overview of SurveyJS Creator

    master

    SurveyJS Creator is an extensible, client-side drag-and-drop form builder component. It allows users to build dynamic, JSON-based forms within a JavaScript application.

    Key characteristics:

    • JSON-Driven: Every form created in the UI generates a JSON schema containing configurations for style, content, layout, and behavior (validation, branching, etc.).
    • Integration: The generated JSON can be saved to any backend and rendered using the SurveyJS Form Library.
    • Framework Support: Native support for React, Angular, Vue, and Knockout. jQuery applications can use it via a Knockout wrapper.
    • Customizable: The UI is white-labelable and can be modified via toolbox customization, property grid customization, and custom widget support.

  2. Overview of the Survey Creator User Interface

    master
    The Survey Creator component provides a visual interface for building surveys, organized into several functional tabs. The primary tabs allow users to design the survey structure, preview the end-user experience, and customize the visual appearance via themes. Each tab contains specific tools for managing question types, panels, and survey properties.

  3. Overview of Survey Creator / Form Builder

    master
    Survey Creator is a visual designer component used to create surveys and forms via a drag-and-drop interface. The primary output of the designer is a survey configuration in JSON format. This JSON schema is compatible with the SurveyJS Form Library, allowing you to design a form in the Creator and subsequently render it in your application using the Library.

  4. New UI/UX Features in Survey Creator V2

    master

    Survey Creator V2 introduced several significant UI/UX improvements:

    • Toolbox and Property Grid: Redesigned for a modern look and adaptive layouts.
    • Action Buttons: Moved inside questions for easier access; supports programmatic access.
    • Page Navigation: Pages are now displayed vertically (one under another) in the design surface. Use the page navigator to jump between them.
    • Adorners: Design-surface controls that allow for inline text editing and direct property changes (e.g., changing column cell properties) within the designer.
    • Survey Element Creation: Use the 'Add Question' button or the ellipsis button to quickly add and select new question types.
    • Survey Element Selector: Now features a tree view of the survey structure and a search box (appears when there are more than 10 items).
    • Translation Tab: Uses a SurveyJS Matrix question component and includes a Property Grid to manage required languages.
    • Logic Tab: Allows creating and editing logic rules in a single view, with the ability to filter rules by questions or action types.
    • Preview Tab: Renamed from 'Test Survey'; includes a device selector to preview the survey on various popular devices.

  5. Use Survey Creator for HTML/CSS/JavaScript applications

    master

    The survey-creator-js package provides a visual designer for creating and modifying surveys and forms within applications built with vanilla HTML, CSS, and JavaScript. It is built upon Preact.

    While this package is intended for framework-less applications or custom integrations, SurveyJS also provides dedicated integration packages for specific frameworks:

    • survey-creator-react for React
    • survey-creator-angular for Angular
    • survey-creator-vue for Vue 3

  6. What are Validators and their types

    master

    A validator is a rule that checks a user's answer against a condition. If the condition is not met, the form displays a notification message.

    Survey Creator supports the following validator types:

    TypeDescription
    TextEnsures the entered text length is within a minimum and maximum character range.
    NumberEnsures the answer is a number and checks if it falls between a minimum and maximum value.
    EmailEnsures the answer is a valid email address.
    Answer CountEnsures a user selects no fewer than the minimum number of choices and no more than the maximum number. Applies to multi-choice questions.
    RegexEnsures the entered value matches a regular expression you define.
    ExpressionChecks that a logical expression evaluates to true. If not, validation fails and the question displays a notification message.

  7. Use the Designer Tab to configure surveys

    master
    The Designer tab is the primary workspace for survey configuration. You can build surveys by dragging and dropping question and panel types from the Toolbox onto the design surface. To modify specific settings (like labels, validation, or data behavior), select an element on the design surface and use the Property Grid to adjust its properties.

  10. Override element rendering for Adorners

    master

    Survey Creator V2 allows you to register new element rendering functions that override default functions. This enables more efficient DOM manipulation by adding adorners immediately during the first render pass, rather than modifying the DOM a second time.

    For example, you can implement in-place text editing by registering a rendering function that uses an element supporting editable content instead of the default string element.

  11. Customize Survey Creator UI elements using SurveyJS Form Library

    master

    In Survey Creator V2, most UI elements (including the Property Grid) are rendered using the SurveyJS Form Library. Because these elements are essentially surveys, you can customize them using standard survey customization techniques.

    For example, the Property Grid is treated as a single-page survey where every property is a question. To introduce a new property editor or override an existing one, you must define a custom question JSON configuration and implement the functions that survey events call internally.