survey-creator-react 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +91 -0
- package/README.md +189 -30
- package/fesm/survey-creator-react.mjs +3260 -2637
- package/fesm/survey-creator-react.mjs.map +1 -1
- package/package.json +25 -18
- package/survey-creator-react.js +199 -12
- package/survey-creator-react.js.map +1 -1
- package/survey-creator-react.min.js +2 -2
- package/typings/CollabRow.d.ts +15 -0
- package/typings/FloatingPanel.d.ts +17 -0
- package/typings/SurveyCreator.d.ts +1 -0
- package/typings/adorners/TranslationDropdownQuestion.d.ts +13 -0
- package/typings/entries/index-wc.d.ts +5 -1
- package/typings/tabs/translation/Translation.d.ts +3 -0
- package/typings/tabs/translation/TranslationLocaleItem.d.ts +10 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
Devsoft Baltic OÜ
|
|
2
|
+
Commercial developer license for SurveyJS Creator, SurveyJS Pdf Generator and SurveyJS Dashboard libraries.
|
|
3
|
+
Copyright (C) 2015-2025 DEVSOFT BALTIC OÜ.
|
|
4
|
+
|
|
5
|
+
END-USER LICENSE AGREEMENT
|
|
6
|
+
FOR ALL SOFTWARE DEVELOPMENT PRODUCT(S) INCLUDED IN THIS DISTRIBUTION
|
|
7
|
+
|
|
8
|
+
IMPORTANT - PLEASE READ THIS END-USER LICENSE AGREEMENT ("AGREEMENT") CAREFULLY BEFORE USING THE SOFTWARE DEVELOPMENT PRODUCT(S) INCLUDED IN THIS DISTRIBUTION/INSTALLATION.
|
|
9
|
+
|
|
10
|
+
This Devsoft Baltic OÜ ("DEVSOFTBALTIC") AGREEMENT constitutes a legally binding agreement between you or the business and/or entity which you represent ("You" or "LICENSEE") and DEVSOFTBALTIC for all DEVSOFTBALTIC products, frameworks, widgets, source code, demos, intermediate files, media, printed materials, and documentation ("SOFTWARE DEVELOPMENT PRODUCT(S)") included in this distribution/installation.
|
|
11
|
+
|
|
12
|
+
By purchasing, installing, copying, or otherwise using the SOFTWARE DEVELOPMENT PRODUCT(S), you acknowledge that you have read this AGREEMENT and you agree to be bound by its terms and conditions. If you are representing a business and/or entity, you acknowledge that you have the legal authority to bind the business and/or entity you are representing to all the terms and conditions of this AGREEMENT.
|
|
13
|
+
|
|
14
|
+
If you do not agree to any of the terms and conditions of this AGREEMENT or if you do not have the legal authority to bind the business and/or entity you are representing to any of the terms and conditions of this AGREEMENT, DO NOT INSTALL, COPY, USE, EVALUATE, OR REPLICATE IN ANY MANNER, ANY PART, FILE OR PORTION OF THE SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
15
|
+
|
|
16
|
+
All SOFTWARE DEVELOPMENT PRODUCT(S) is licensed, not sold.
|
|
17
|
+
|
|
18
|
+
1. GRANT OF LICENSE.
|
|
19
|
+
Subject to all the terms and conditions of this AGREEMENT, DEVSOFTBALTIC grants LICENSEE a non-exclusive, non-transferable license to install and use the SOFTWARE DEVELOPMENT PRODUCT(S) included in this distribution as authorized in sections 1.1 through 1.2 below:
|
|
20
|
+
|
|
21
|
+
1.1 INDIVIDUAL USE LICENSE.
|
|
22
|
+
If you are an individual, you may install, copy, and use the SOFTWARE DEVELOPMENT PRODUCT(S) by purchasing a SurveyJS Creator license(s) from DEVSOFTBALTIC or its authorized resellers, in accordance with Section 4 of this AGREEMENT.
|
|
23
|
+
|
|
24
|
+
1.2 BUSINESS AND GOVERNMENT USE LICENSE.
|
|
25
|
+
DEVSOFTBALTIC licenses the SOFTWARE DEVELOPMENT PRODUCT(S) on a per-developer basis. If you represent a business and/or government entity, you or your employees may install, copy, and use the SOFTWARE DEVELOPMENT PRODUCT(S) by purchasing SurveyJS Creator license(s) from DEVSOFTBALTIC or its authorized resellers for each developer using the SOFTWARE DEVELOPMENT PRODUCT(S), in accordance with Section 4 of this AGREEMENT. The number of licensed developers using the SOFTWARE DEVELOPMENT PRODUCT(S) must equal or be less than the number of seats purchased from DEVSOFTBALTIC or its authorized resellers.
|
|
26
|
+
DEVSOFTBALTIC grants to Licensee a paid up, perpetual world-wide, irrevocable (except in the case of Licensee’s uncured breach) non-exclusive and non-transferable license to the SOFTWARE DEVELOPMENT PRODUCT(S), including the Redistributables, to use, test, demonstrate, develop derivative works, use for technical support, provide training, host and embed the Redistributables , in executable form only (the “DEVSOFTBALTIC Component”) , in all current and future versions of the Application (the "License"). This license grant extends to all Licensee distributors and resellers (collectively, “the Licensees”). By way of clarification, there is no limit on the number of customers or users (including users of Licensee’s resellers, distributors, and licensees) that Licensees can use the Redistributables for. Further, DEVSOFTBALTIC agrees that Licensee’s third-party contractors and hosting partners may access and use the Redistributables, subject to the same restrictions and solely for the purposes contemplated hereunder. The foregoing license grant applies to all corrections, patches, updates and future versions of the DEVSOFTBALTIC Component (collectively, “Updates”).
|
|
27
|
+
|
|
28
|
+
2. RENTAL.
|
|
29
|
+
You may not rent, lease, or lend the SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
30
|
+
|
|
31
|
+
3. TRANSFER.
|
|
32
|
+
You may NOT permanently or temporarily transfer ANY of your rights under this AGREEMENT to any individual or business or government entity without prior written approval from DEVSOFTBALTIC. Regardless of any modifications which you make and regardless of how you might compile, link, and/or package your programs, under no circumstances may the libraries, Redistributables, and/or files included in the SOFTWARE DEVELOPMENT PRODUCT(S) (including any portions thereof) be used for developing programs by anyone other than you. Only you as the LICENSEE have the right to use the libraries, redistributables, or other files of the SOFTWARE DEVELOPMENT PRODUCT(S) (or any portions thereof) for developing programs created with the SOFTWARE DEVELOPMENT PRODUCT(S). You may not share copies of the Redistributables with other co-developers.
|
|
33
|
+
|
|
34
|
+
4. RECEIVE UPDATES DURING TWELVE (12) MONTHS SINCE ORIGINAL PURCHASE.
|
|
35
|
+
LICENSEE will be eligible to receive all major and minor updates for the SOFTWARE DEVELOPMENT PRODUCT(S) during this 12-month period. Upon 12 months plus 1 day after original purchase date, and each subsequent year thereafter, Licensee may elect to continue receiving major and minor updates of the SOFTWARE DEVELOPMENT PRODUCT(S) from DEVSOFTBALTIC by paying the annual support fees which will be about forty percent (40%) of the original license fee the SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
36
|
+
|
|
37
|
+
If the SOFTWARE DEVELOPMENT PRODUCT(S) is labeled as an update, you must be properly licensed to obtain the updated SOFTWARE DEVELOPMENT PRODUCT(S). A SOFTWARE DEVELOPMENT PRODUCT(S) labeled as an update replaces and/or supplements the SOFTWARE DEVELOPMENT PRODUCT(S) that formed the basis for your eligibility for the update, and together constitutes a single PRODUCT(S). You may only use the updated PRODUCT(S) in accordance with all the terms of this AGREEMENT.
|
|
38
|
+
|
|
39
|
+
Pricing for the SOFTWARE DEVELOPMENT PRODUCT(S) license and any subsequent upgrade of the license subject to change with or without notice.
|
|
40
|
+
|
|
41
|
+
DEVSOFTBALTIC reserves the right to discontinue the SOFTWARE DEVELOPMENT PRODUCT(S) or its constituents, at any time. In the event this occurs LICENSEE has the right to use the discontinued SOFTWARE PRODUCT for unlimited period and get support for 24 months since the purchase date. LICENSEE shall be entitled to get full refund if the purchase was made in 90 days, 75% if the purchase was made in 180 days, 50% if the purchase was made in 270 days and 25% if the purchase was made within a year.
|
|
42
|
+
|
|
43
|
+
5. REDISTRIBUTION.
|
|
44
|
+
The SOFTWARE DEVELOPMENT PRODUCT(s) may include certain files ("REDISTRIBUTABLE(s)") intended for distribution by you to the users of software applications which you create. Redistributables include, for example, those files identified in printed or on-line documentation as redistributable files or those files preselected for deployment by an install utility provided with the SOFTWARE DEVELOPMENT PRODUCT(S) (if any). In all circumstances, the REDISTRIBUTABLES for the SOFTWARE DEVELOPMENT PRODUCT(S) are only those files specifically designated as such by DEVSOFTBALTIC.
|
|
45
|
+
AT NO TIME MAY LICENSEE CREATE ANY TOOL, REDISTRIBUTABLE, OR PRODUCT THAT DIRECTLY OR INDIRECTLY COMPETES WITH THE SOFTWARE DEVELOPMENT PRODUCT(S) BY UTILIZING ALL OR ANY PORTION OF THE DEVSOFTBALTIC SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
46
|
+
The LICENSEE may NOT distribute the SOFTWARE DEVELOPMENT PRODUCT(S), in any format, to others for development or application compilation purposes.
|
|
47
|
+
If you have purchased a license as described in Section 4 of this AGREEMENT, you may reproduce and distribute copies of the REDISTRIBUTABLES, provided that such copies are made from the original copy of the REDISTRIBUTABLES included with the SOFTWARE DEVELOPMENT PRODUCT(S) or modified versions of the REDISTRIBUTABLES which are provided to you by DEVSOFTBALTIC or those which you create. Copies of REDISTRIBUTABLES may only be distributed with and for the sole purpose of executing application programs permitted under this AGREEMENT that you have created using the SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
48
|
+
|
|
49
|
+
The following files in the SOFTWARE DEVELOPMENT PRODUCT(S) distribution are considered REDISTRIBUTABLES under this AGREEMENT. Refer to Section 4 of this AGREEMENT for licensing terms:
|
|
50
|
+
|
|
51
|
+
*.css, *.js, fonts\*.*, *.d.ts
|
|
52
|
+
|
|
53
|
+
6. THIRD-PARTY SOFTWARE PRODUCTS/LIBRARIES
|
|
54
|
+
DEVSOFTBALTIC represents and warrants that the DEVSOFTBALTIC SOFTWARE PRODUCTS, including Redistributables, do not and will not contain any third-party libraries or open-source software other than that open-source software licensed through MIT.
|
|
55
|
+
7. COPYRIGHT.
|
|
56
|
+
All title and copyrights in and to the SOFTWARE DEVELOPMENT PRODUCT(S) (including but not limited to any DEVSOFTBALTIC trademarks, copywritten images, demos, source code, intermediate files, packages, photographs, redistributables, animations, video, audio, music, text, and "applets" incorporated into the SOFTWARE DEVELOPMENT PRODUCT(S) the accompanying printed materials, and any copies of the SOFTWARE DEVELOPMENT PRODUCT(S)) are owned by DEVSOFTBALTIC or its subsidiaries.
|
|
57
|
+
The SOFTWARE DEVELOPMENT PRODUCT(S) is protected by copyright laws and international treaty provisions and therefore, you must treat the SOFTWARE DEVELOPMENT PRODUCT(S) like any other copyrighted material except that you may install and use the SOFTWARE DEVELOPMENT PRODUCT(S) as described in this AGREEMENT.
|
|
58
|
+
|
|
59
|
+
8. DOWNLOAD of SOFTWARE DEVELOPMENT PRODUCT(S).
|
|
60
|
+
The SOFTWARE DEVELOPMENT PRODUCT(S) will be made available for download from “SurveyJS Project” websites or installing SurveyJS packages using https://www.npmjs.com/ package installer.
|
|
61
|
+
|
|
62
|
+
9. DISCLAIMER OF WARRANTY.
|
|
63
|
+
DEVSOFTBALTIC expressly disclaims any warranty for the SOFTWARE DEVELOPMENT PRODUCT(S). THE SOFTWARE DEVELOPMENT PRODUCT(S) AND ANY RELATED DOCUMENTATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NONINFRINGEMENT. DEVSOFTBALTIC DOES NOT WARRANT, GUARANTEE, OR MAKE ANY REPRESENTATIONS REGARDING THE USE, OR THE RESULTS OF THE USE, OF THE SOFTWARE DEVELOPMENT PRODUCT(S) IN TERMS OF CORRECTNESS, ACCURACY, RELIABILITY, OR OTHERWISE. THE ENTIRE RISK ARISING OUT OF USE OR PERFORMANCE OF THE SOFTWARE DEVELOPMENT PRODUCT(S) REMAINS WITH YOU. No oral or written information or advice given by DEVSOFTBALTIC or its employees shall create a warranty or in any way increase the scope of this warranty.
|
|
64
|
+
|
|
65
|
+
10. LIMITATIONS ON LIABILITY.
|
|
66
|
+
To the maximum extent permitted by applicable law, in no event shall either party be liable for any special, incidental, indirect, or consequential damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or any other pecuniary loss) arising out of the use of or inability to use the SOFTWARE DEVELOPMENT PRODUCT(S) or the provision of or failure to provide SUPPORT SERVICES, even if DEVSOFTBALTIC has been advised of the possibility of such damages.
|
|
67
|
+
|
|
68
|
+
LICENSEE understands that the SOFTWARE DEVELOPMENT PRODUCT(S) may produce inaccurate results because of a failure or fault within the SOFTWARE DEVELOPMENT PRODUCT(S) or failure by LICENSEE to properly use and or deploy the SOFTWARE DEVELOPMENT PRODUCT(S). LICENSEE assumes full and sole responsibility for any use of the SOFTWARE DEVELOPMENT PRODUCT(S) and bears the entire risk for failures or faults within the SOFTWARE DEVELOPMENT PRODUCT(S). You agree that regardless of the cause of failure or fault or the form of any claim, THE SOLE REMEDY AND EITHER PARTIES SOLE OBLIGATION SHALL BE GOVERNED BY THIS AGREEMENT AND IN NO EVENT SHALL EITHER PARTIES LIABILITY EXCEED THE PRICE PAID TO DEVSOFTBALTIC FOR THE SOFTWARE DEVELOPMENT PRODUCT(S). This Limited Warranty is void if failure of the SOFTWARE DEVELOPMENT PRODUCT(S) has resulted from accident, abuse, alteration, unauthorized use, or misapplication of the SOFTWARE DEVELOPMENT PRODUCT(S). Nothing in this Agreement will limit any liability either party may have to the other: (a) for willful default or fraud; or (b) for any unauthorized use of the other party’s INTELLECTUAL PROPERTY or PERSONAL DATA.
|
|
69
|
+
|
|
70
|
+
11. INDEMNIFICATION.
|
|
71
|
+
You hereby agree to indemnify DEVSOFTBALTIC and its officers, directors, employees, agents, and representatives from each and every demand, claim, loss, liability, or damage of any kind, including actual attorney's fees, whether in tort or contract, that it or any of them may incur by reason of, or arising out of, any claim which is made by any third party with respect to any breach or violation of this AGREEMENT by you or any claims based on the Applications and the SOFTWARE DEVELOPMENT PRODUCT(S) included herein, including without limitation any claims asserted by your end user customers.
|
|
72
|
+
12. SUPPORT SERVICES.
|
|
73
|
+
DEVSOFTBALTIC may provide you with support services related to the SOFTWARE DEVELOPMENT PRODUCT(S) ("SUPPORT SERVICES"). Use of SUPPORT SERVICES is governed by DEVSOFTBALTIC policies and programs described in the user manual, in "online" documentation and/or other DEVSOFTBALTIC provided materials. DEVSOFTBALTIC may restrict or otherwise discontinue SUPPORT SERVICES provided to you if Your use of SUPPORT SERVICES is deemed by DEVSOFTBALTIC, in its sole and reasonable discretion, to be excessive and beyond the scope of fair use.
|
|
74
|
+
|
|
75
|
+
Any supplemental SOFTWARE DEVELOPMENT PRODUCT(S) provided to you as part of the SUPPORT SERVICES shall be considered part of the SOFTWARE DEVELOPMENT PRODUCT(S) and subject to the terms and conditions of this AGREEMENT. With respect to technical information, you provide to DEVSOFTBALTIC as part of the SUPPORT SERVICES, DEVSOFTBALTIC may use such information for its business purposes, including for SOFTWARE DEVELOPMENT PRODUCT(S) support and development.
|
|
76
|
+
|
|
77
|
+
13. TERMINATION.
|
|
78
|
+
Without prejudice to any other rights or remedies, DEVSOFTBALTIC will terminate this AGREEMENT upon your failure to comply with all the terms and conditions of this AGREEMENT. In such events, LICENSEE must destroy all copies of the SOFTWARE DEVELOPMENT PRODUCT(S) and all of its component parts including any related documentation and must remove ANY and ALL use of DEVSOFTBALTIC intellectual property from any applications distributed by LICENSEE, whether in native, altered or compiled states.
|
|
79
|
+
LICENSEE has an unconditional right to terminate before the first ninety (90) days of purchase of the SOFTWARE DEVELOPMENT PRODUCT(S) and shall be entitled to a full refund.
|
|
80
|
+
14. PERSONAL DATA.
|
|
81
|
+
All Information DEVSOFTBALTIC collects from You is stored and maintained on servers utilizing reasonable and appropriate data security safeguards. DEVSOFTBALTIC does not lend, lease, sell, or market information it obtains from its customers or those who provide us personally identifiable information. DEVSOFTBALTIC does not disclose purchase information or licensing information to third parties.
|
|
82
|
+
DEVSOFTBALTIC collects personally identifiable information whenever You purchase/license a DEVSOFTBALTIC product or service. Information includes Name, Address, Phone Number, Email address, Payment Information, Product Purchases, Licenses Owned, Employee/Contact Details, etc.
|
|
83
|
+
|
|
84
|
+
DEVSOFTBALTIC collects personally identifiable information whenever You purchase/license a DEVSOFTBALTIC product or service. Information includes Name, Address, Phone Number, Email address, Payment Information, Product Purchases, Licenses Owned, Employee/Contact Details, etc. The information we collect allows DEVSOFTBALTIC to communicate with You regarding upcoming product updates, new product releases, company news and other important business matters.
|
|
85
|
+
|
|
86
|
+
DEVSOFTBALTIC does not wish to receive, act to procure, nor desire to solicit, confidential or proprietary materials and information from You through the use of the SOFTWARE DEVELOPMENT PRODUCT(S) or SUPPORT SERVICES. Any and all materials, attachments, or information submitted by You as part of error submissions, or divulged during chats, online discussions, or made available to DEVSOFTBALTIC in any manner will be deemed NOT to be confidential by DEVSOFTBALTIC. You acknowledge that submissions to DEVSOFTBALTIC will not be considered confidential or proprietary and that DEVSOFTBALTIC will be under no obligation to keep such information confidential.
|
|
87
|
+
|
|
88
|
+
15. MISCELLANEOUS.
|
|
89
|
+
This AGREEMENT may only be modified in writing signed by you and an authorized officer of Devsoft Baltic OÜ. If any provision of this AGREEMENT is found void or unenforceable, the remainder will remain valid and enforceable according to its terms. If any remedy provided is determined to have failed for its essential purpose, all limitations of liability and exclusions of damages set forth in the Limited Warranty shall remain in effect.
|
|
90
|
+
This Agreement shall be governed by and construed in accordance with the laws of any of the following jurisdictions based on LICENSEE choice: European Union, United States of America, Canada, England and Wales, Australia, or New Zealand.
|
|
91
|
+
DEVSOFTBALTIC reserves all rights not specifically granted in this AGREEMENT.
|
package/README.md
CHANGED
|
@@ -1,61 +1,220 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# SurveyJS Survey Creator for React — Drag-and-Drop Form Builder
|
|
2
4
|
|
|
5
|
+
<img width="1200" height="600" alt="readme_overview_creator" src="https://github.com/user-attachments/assets/e4f2eafc-aadf-4331-8ae0-842b875d91c2" /><br>
|
|
3
6
|
|
|
4
|
-
|
|
7
|
+
[](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=149&repoName=surveyjs%2Fsurvey-creator&branchName=master)
|
|
8
|
+
[](https://www.npmjs.com/package/survey-creator-react)
|
|
9
|
+
[](https://playwright.dev)
|
|
10
|
+
[](https://github.com/surveyjs/survey-creator/issues)
|
|
11
|
+
[](https://github.com/surveyjs/survey-creator/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+)
|
|
5
12
|
|
|
13
|
+
</div>
|
|
14
|
+
<div align="justify">
|
|
6
15
|
|
|
7
|
-
|
|
8
|
-
|
|
16
|
+
Survey Creator for React is an embeddable drag-and-drop form builder for creating and editing dynamic, JSON-based forms and surveys in React applications.
|
|
17
|
+
|
|
18
|
+
The `survey-creator-react` package provides the React rendering layer for SurveyJS Creator. It works with the framework-independent [`survey-creator-core`](https://github.com/surveyjs/survey-creator/tree/master/packages/survey-creator-core) package, which manages the form builder model, editor state, form-editing logic, Toolbox, Property Grid, tabs, actions, and other core behavior. `survey-creator-core` is a peer dependency: npm 7 and later install it automatically; with pnpm or Yarn 1, add it explicitly. You configure a builder instance with `survey-creator-core` and hand it to this package's `SurveyCreatorComponent` through its `creator` prop: `<SurveyCreatorComponent creator={creator} />`.
|
|
19
|
+
|
|
20
|
+
Use Survey Creator to build multi-page forms, surveys, quizzes, assessments, and other data-entry tools, configure conditional logic and validation, and customize the form builder UI. Survey Creator generates SurveyJS JSON form definitions that you can [save in your own backend](https://surveyjs.io/survey-creator/documentation/integration-with-backend) and render with [SurveyJS React Form Library](https://github.com/surveyjs/survey-library/tree/master/packages/survey-react-ui).
|
|
21
|
+
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
[Try Survey Creator for React](https://surveyjs.io/create-free-survey)
|
|
25
|
+
|
|
26
|
+
## Install
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
npm install survey-creator-react --save
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## License key
|
|
33
|
+
|
|
34
|
+
Survey Creator displays an alert banner until you activate a [purchased commercial license](https://surveyjs.io/licensing). Activate your key with `setLicenseKey` from `survey-core`:
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { setLicenseKey } from "survey-core";
|
|
38
|
+
|
|
39
|
+
setLicenseKey("your-license-key-goes-here");
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Call it once before the component renders — at module scope in the file that renders `SurveyCreatorComponent`, or in your application's entry file. Your key and step-by-step setup instructions are on the [How to Remove the Alert Banner](https://surveyjs.io/remove-alert-banner) page in your SurveyJS account.
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
'use client'
|
|
48
|
+
import { useState } from "react";
|
|
49
|
+
import { ICreatorOptions } from "survey-creator-core";
|
|
50
|
+
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
|
|
51
|
+
import "survey-core/survey-core.css";
|
|
52
|
+
import "survey-creator-core/survey-creator-core.css";
|
|
53
|
+
|
|
54
|
+
const defaultCreatorOptions: ICreatorOptions = {
|
|
55
|
+
autoSaveEnabled: true,
|
|
56
|
+
collapseOnDrag: true
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default function SurveyCreatorWidget(props: { options?: ICreatorOptions }) {
|
|
60
|
+
let [creator, setCreator] = useState<SurveyCreator>();
|
|
61
|
+
|
|
62
|
+
if (!creator) {
|
|
63
|
+
creator = new SurveyCreator(props.options || defaultCreatorOptions);
|
|
64
|
+
creator.saveSurveyFunc = (saveNo, callback) => {
|
|
65
|
+
// Save `creator.JSON` or `creator.text` to your database, then:
|
|
66
|
+
callback(saveNo, true);
|
|
67
|
+
};
|
|
68
|
+
setCreator(creator);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return <SurveyCreatorComponent creator={creator} />;
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Survey Creator is interactive: it relies on state, event handlers, and drag-and-drop. Under [Next.js](https://nextjs.org) or another framework with React Server Components, mark the component that renders it as client code with the ['use client'](https://react.dev/reference/react/use-client) directive.
|
|
76
|
+
|
|
77
|
+
Give the component's container an explicit height — for example, `height: 100vh` — because Survey Creator fills the space it is given.
|
|
78
|
+
|
|
79
|
+
## Themes
|
|
80
|
+
|
|
81
|
+
`survey-creator-core/survey-creator-core.css` applies the Light UI theme. The Dark, Contrast, and Survey Creator 2020 themes are imported from `survey-creator-core/themes` and applied with `creator.applyCreatorTheme(theme)`:
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
import { DefaultDark } from "survey-creator-core/themes";
|
|
85
|
+
|
|
86
|
+
creator.applyCreatorTheme(DefaultDark);
|
|
87
|
+
```
|
|
9
88
|
|
|
10
|
-
|
|
89
|
+
The UI theme styles the builder itself. The look of the forms it produces is edited in the built-in Theme tab and stored in the survey theme JSON. See [Themes & Styles](https://surveyjs.io/survey-creator/documentation/survey-creator-interface-themes) and [Theme Editor](https://surveyjs.io/survey-creator/documentation/theme-editor).
|
|
11
90
|
|
|
12
|
-
|
|
91
|
+
## Theme adapters
|
|
13
92
|
|
|
14
|
-
|
|
93
|
+
A theme adapter maps an existing design system's CSS variables onto SurveyJS design tokens, so a survey inherits the look of the host application. Survey Creator supports adapters: the form on the design surface and in the Preview tab is a real survey, so it picks up whichever adapter the page loads. Adapters ship with `survey-core` as plain CSS — import one after the base style sheets:
|
|
15
94
|
|
|
16
|
-
|
|
95
|
+
```js
|
|
96
|
+
import "survey-core/survey-core.css";
|
|
97
|
+
import "survey-creator-core/survey-creator-core.css";
|
|
98
|
+
import "survey-core/themes/adapters/shadcn-default.css";
|
|
99
|
+
```
|
|
17
100
|
|
|
18
|
-
|
|
101
|
+
Adapters are available for [Bootstrap](https://getbootstrap.com) (plus Bootswatch variants), [Material UI](https://mui.com), and [shadcn/ui](https://ui.shadcn.com), with matching icon sets (`survey-core/themes/adapters/icons/lucide`, `.../icons/mui`). See [Theme Adapters](https://surveyjs.io/themes/theme-adapters).
|
|
102
|
+
|
|
103
|
+
## Key features
|
|
104
|
+
|
|
105
|
+
### React Integration
|
|
106
|
+
|
|
107
|
+
- React rendering package for SurveyJS Creator
|
|
108
|
+
- Framework-independent editor model through `survey-creator-core`
|
|
109
|
+
- TypeScript support
|
|
110
|
+
- Client-side form editing without a required SurveyJS backend
|
|
111
|
+
|
|
112
|
+
### Visual Form Editing
|
|
113
|
+
|
|
114
|
+
- Drag-and-drop form builder UI
|
|
115
|
+
- Multi-page forms and form wizards
|
|
116
|
+
- Conditional visibility, branching, validation, and calculated values
|
|
117
|
+
- Dedicated Logic and JSON Editor interfaces
|
|
118
|
+
- Form preview before publication
|
|
119
|
+
|
|
120
|
+
### Customizable Editor UI
|
|
121
|
+
|
|
122
|
+
- Configure the Toolbox, Property Grid, tabs, actions, and editor behavior
|
|
123
|
+
- [Create reusable configurations with the UI Preset Editor](https://surveyjs.io/survey-creator/documentation/ui-preset-editor)
|
|
124
|
+
- [Add custom question types and reusable components](https://surveyjs.io/survey-creator/documentation/customize-question-types)
|
|
125
|
+
- Configure different editor experiences for roles, tenants, or subscription plans
|
|
126
|
+
|
|
127
|
+
### Appearance Customization
|
|
128
|
+
|
|
129
|
+
- Built-in themes and custom branding
|
|
130
|
+
- Shared design token system based on CSS variables
|
|
131
|
+
- [Theme Adapters for Bootstrap, Material UI, and shadcn/ui](https://surveyjs.io/themes/theme-adapters)
|
|
132
|
+
- Localization and right-to-left language support
|
|
133
|
+
|
|
134
|
+
## Related packages
|
|
135
|
+
|
|
136
|
+
| Package | Purpose |
|
|
137
|
+
| --- | --- |
|
|
138
|
+
| [`survey-creator-core`](https://www.npmjs.com/package/survey-creator-core) | Platform-independent Survey Creator model (peer dependency) |
|
|
139
|
+
| [`survey-creator-angular`](https://www.npmjs.com/package/survey-creator-angular) | Angular renderer |
|
|
140
|
+
| [`survey-creator-vue`](https://www.npmjs.com/package/survey-creator-vue) | Vue 3 renderer |
|
|
141
|
+
| [`survey-creator-js`](https://www.npmjs.com/package/survey-creator-js) | HTML/CSS/JavaScript renderer |
|
|
142
|
+
| [`survey-react-ui`](https://www.npmjs.com/package/survey-react-ui) | Renders the forms that Survey Creator produces |
|
|
143
|
+
|
|
144
|
+
## Documentation
|
|
19
145
|
|
|
20
146
|
- [Website](https://surveyjs.io/)
|
|
21
|
-
- [Documentation](https://surveyjs.io/
|
|
22
|
-
- [
|
|
23
|
-
- [
|
|
147
|
+
- [Documentation](https://surveyjs.io/survey-creator/documentation/overview)
|
|
148
|
+
- [Get Started with React](https://surveyjs.io/survey-creator/documentation/get-started-react)
|
|
149
|
+
- [API Reference](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator)
|
|
150
|
+
- [Survey Creator Demos for React](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/reactjs)
|
|
151
|
+
- [What's New](https://surveyjs.io/stay-updated/major-updates/2025-2026)
|
|
24
152
|
|
|
25
|
-
|
|
153
|
+
For AI coding agents: [https://surveyjs.io/llms.txt](https://surveyjs.io/llms.txt) indexes the documentation. Any documentation page is also available as raw Markdown — append `.md` to its URL, for example [https://surveyjs.io/survey-creator/documentation/get-started-react.md](https://surveyjs.io/survey-creator/documentation/get-started-react.md).
|
|
26
154
|
|
|
27
|
-
|
|
155
|
+
## SurveyJS ecosystem
|
|
28
156
|
|
|
29
|
-
|
|
30
|
-
|
|
157
|
+
| Product | Purpose | License |
|
|
158
|
+
| --- | --- | --- |
|
|
159
|
+
| [Form Library](https://surveyjs.io/form-library) | Render dynamic forms from JSON | MIT |
|
|
160
|
+
| [Survey Creator](https://surveyjs.io/survey-creator) | Drag-and-drop form builder UI (this package) | Commercial |
|
|
161
|
+
| [Dashboard](https://surveyjs.io/dashboard) | Visualize and analyze collected results | Commercial |
|
|
162
|
+
| [PDF Generator](https://surveyjs.io/pdf-generator) | Render forms and responses as PDF | Commercial |
|
|
163
|
+
| [AI Form Response Extractor](https://surveyjs.io/documentation/combine-paper-and-online-survey-form-data) | Extract responses from paper forms, PDFs, and images into a SurveyJS schema (`ai-form-response-extractor`) | MIT |
|
|
31
164
|
|
|
32
|
-
|
|
33
|
-
- [Build the Survey Creator Model from Sources](https://github.com/surveyjs/survey-creator/tree/master/packages/survey-creator-core#build-the-survey-creator-model-from-sources)
|
|
165
|
+
## Build from sources
|
|
34
166
|
|
|
35
|
-
|
|
167
|
+
This monorepo does **not** use npm workspaces: each package installs independently, but a root install is still required for the shared tooling (linting, Playwright).
|
|
36
168
|
|
|
37
|
-
1.
|
|
169
|
+
1. **Build `survey-library` and `survey-creator-core` first**
|
|
38
170
|
|
|
39
|
-
|
|
40
|
-
|
|
171
|
+
This package resolves `survey-core`, `survey-react-ui`, and `survey-creator-core` from sibling `build` folders, so those must be built before this library can be built or tested. Refer to the following instructions:
|
|
172
|
+
|
|
173
|
+
- [Build from sources](https://github.com/surveyjs/survey-library/blob/master/packages/survey-core/README.md#build-from-sources) in the `survey-core` README — build `survey-core`, then `survey-react-ui`.
|
|
174
|
+
- [Build from sources](https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/README.md#build-from-sources) in the `survey-creator-core` README.
|
|
175
|
+
<br>
|
|
176
|
+
|
|
177
|
+
> NOTE: Make sure that the folders with the cloned `survey-library` and `survey-creator` repositories are in the same directory.
|
|
178
|
+
|
|
179
|
+
2. **Install dependencies and build this library**
|
|
180
|
+
|
|
181
|
+
```sh
|
|
182
|
+
cd packages/survey-creator-react
|
|
41
183
|
npm install
|
|
184
|
+
npm run build
|
|
42
185
|
```
|
|
43
186
|
|
|
44
|
-
|
|
187
|
+
Build output goes to the `build` directory. Use `npm run watch:dev` while developing.
|
|
45
188
|
|
|
189
|
+
3. **Run a test application**
|
|
190
|
+
|
|
191
|
+
```sh
|
|
192
|
+
npm run start
|
|
46
193
|
```
|
|
47
|
-
npm run build
|
|
48
|
-
```
|
|
49
194
|
|
|
50
|
-
|
|
195
|
+
This serves the package directory at http://localhost:8080/.
|
|
196
|
+
|
|
197
|
+
4. **Run unit tests**
|
|
51
198
|
|
|
52
|
-
|
|
199
|
+
Unit tests use [Jest](https://jestjs.io/) and live in `tests`.
|
|
53
200
|
|
|
201
|
+
```sh
|
|
202
|
+
npm run test # whole suite
|
|
203
|
+
npm run test:dev # watch mode
|
|
204
|
+
npm run test:update # update snapshots
|
|
54
205
|
```
|
|
55
|
-
|
|
206
|
+
|
|
207
|
+
5. **Run end-to-end tests**
|
|
208
|
+
|
|
209
|
+
E2E, visual-regression, and accessibility tests are Playwright suites. Do not start an HTTP server yourself — the Playwright config starts its own.
|
|
210
|
+
|
|
211
|
+
```sh
|
|
212
|
+
npm run e2e:ci # e2e
|
|
213
|
+
npm run e2e:ci -- --grep "TestName" # a single test
|
|
214
|
+
npm run test:scr:ci # visual regression
|
|
215
|
+
npm run test:a11y:ci # accessibility
|
|
56
216
|
```
|
|
57
|
-
This command runs unit tests using [Karma](https://karma-runner.github.io/0.13/index.html).
|
|
58
217
|
|
|
59
218
|
## Licensing
|
|
60
219
|
|
|
61
|
-
Survey Creator
|
|
220
|
+
You can install Survey Creator and evaluate its full functionality right away — no license is needed to prototype, test, or build a proof of concept. Production use requires a [commercial license](https://surveyjs.io/licensing) for each developer who works with the SurveyJS APIs or implements the integration, and activating a [license key](#license-key) removes the alert banner. The forms Survey Creator produces are rendered by [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview), which is MIT-licensed and runs free of charge.
|