{"id":19338565,"url":"https://github.com/surveyjs/surveyjs-blazor","last_synced_at":"2026-06-22T10:31:53.987Z","repository":{"id":232493808,"uuid":"782547621","full_name":"surveyjs/surveyjs-blazor","owner":"surveyjs","description":"This repository offers a quick start for developers who want to incorporate survey/form management system into their Blazor projects.","archived":false,"fork":false,"pushed_at":"2025-09-19T09:35:21.000Z","size":417,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-19T11:38:52.051Z","etag":null,"topics":["blazor-application","blazor-form-builder","blazor-server","form-builder","form-builder-demo","survey","survey-analysis","survey-management-system","surveys-management"],"latest_commit_sha":null,"homepage":"https://surveyjs.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surveyjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-05T14:13:36.000Z","updated_at":"2025-09-19T09:48:24.000Z","dependencies_parsed_at":"2024-04-10T02:44:49.260Z","dependency_job_id":"9ab48409-3601-43bf-96ac-a0f5672e174e","html_url":"https://github.com/surveyjs/surveyjs-blazor","commit_stats":null,"previous_names":["surveyjs/surveyjs-blazor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/surveyjs/surveyjs-blazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Fsurveyjs-blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Fsurveyjs-blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Fsurveyjs-blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Fsurveyjs-blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surveyjs","download_url":"https://codeload.github.com/surveyjs/surveyjs-blazor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surveyjs%2Fsurveyjs-blazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34645681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor-application","blazor-form-builder","blazor-server","form-builder","form-builder-demo","survey","survey-analysis","survey-management-system","surveys-management"],"created_at":"2024-11-10T03:17:55.038Z","updated_at":"2026-06-22T10:31:53.979Z","avatar_url":"https://github.com/surveyjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SurveyJS + Blazor + React Quickstart Template\n\nSurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template shows how to integrate the following SurveyJS components into a Blazor application:\n\n- [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview)\n- [Survey Creator / Form Builder](https://surveyjs.io/survey-creator/documentation/overview)\n- [SurveyJS PDF Generator](https://surveyjs.io/pdf-generator/documentation/overview)\n- [SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/overview)\n\n\u003e This project uses React for the front-end part, but the SurveyJS components can also be similarly integrated with Angular, jQuery, and Vue 3, or used without any front-end framework. Refer to the following repository for an example with vanilla JavaScript: [SurveyJS + Blazor + Vanilla JS Quickstart Template](https://github.com/surveyjs/surveyjs-blazor-vanillajs).\n\n## Run the application\n\n```bash\ngit clone https://github.com/surveyjs/surveyjs-blazor.git\ncd surveyjs-blazor\nnpm i\ndotnet run\n```\n\nOpen http://localhost:5208/ in your web browser.\n\n\u003e NOTE: This application uses [.NET Core 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0). Make sure that you have ASP.NET Core Runtime 8.0 installed on your machine.\n\n## Template structure\n\nThis template covers most basic use cases. You can find code examples for them in the following files:\n\n- Create a standalone survey\n  - [ClientAssets/Data/survey_json.js](ClientAssets/Data/survey_json.js)\n  - [ClientAssets/TypeScript/components/Survey.tsx](ClientAssets/TypeScript/components/Survey.tsx)\n- Add Survey Creator to a page\n  - [ClientAssets/TypeScript/components/Creator.tsx](ClientAssets/TypeScript/components/Creator.tsx)\n- Export a survey to a PDF document\n  - [ClientAssets/TypeScript/components/PDFGenerator.tsx](ClientAssets/TypeScript/components/PDFGenerator.tsx)\n- Visualize survey results\n  - As charts\n    - [ClientAssets/Data/dashboard_data.js](ClientAssets/Data/dashboard_data.js)\n    - [ClientAssets/TypeScript/components/Dashboard.tsx](ClientAssets/TypeScript/components/Dashboard.tsx)\n  - As a table\n    - [ClientAssets/Data/dashboard_data.js](ClientAssets/Data/dashboard_data.js)\n    - [ClientAssets/TypeScript/components/Tabulator.tsx](ClientAssets/TypeScript/components/Tabulator.tsx)\n\n## How to integrate SurveyJS components into your Blazor application\n\nSurveyJS components can be used with Angular, React, Vue.js, jQuery, and vanilla JavaScript. You can integrate SurveyJS into a Blazor application that already uses one of these JavaScript frameworks/libraries or into one that doesn't use any of them. Follow the instructions below:\n\n- [Add SurveyJS to a Blazor application with a JavaScript framework](#add-surveyjs-to-a-blazor-application-with-a-javascript-framework)\n- [Add SurveyJS to a Blazor application without a JavaScript framework](#add-surveyjs-to-a-blazor-application-without-a-javascript-framework)\n\n### Add SurveyJS to a Blazor application with a JavaScript framework\n\n1. **Install SurveyJS libraries and configure SurveyJS components**       \nUse the following tutorials to get started with SurveyJS components in your framework:\n\n\t- Get Started with Form Library: [Angular](https://surveyjs.io/form-library/documentation/get-started-angular) | [Vue.js](https://surveyjs.io/form-library/documentation/get-started-vue) | [React](https://surveyjs.io/form-library/documentation/get-started-react) | [HTML/CSS/JavaScript](https://surveyjs.io/form-library/documentation/get-started-html-css-javascript)\n\t- Get Started with Survey Creator: [Angular](https://surveyjs.io/survey-creator/documentation/get-started-angular) | [Vue.js](https://surveyjs.io/survey-creator/documentation/get-started-vue) | [React](https://surveyjs.io/survey-creator/documentation/get-started-react) | [HTML/CSS/JavaScript](https://surveyjs.io/survey-creator/documentation/get-started-html-css-javascript)\n\t- Get Started with Dashboard: [Angular](https://surveyjs.io/dashboard/documentation/get-started-angular) | [Vue.js](https://surveyjs.io/dashboard/documentation/get-started-vue) | [React](https://surveyjs.io/dashboard/documentation/get-started-react) | [HTML/CSS/JavaScript](https://surveyjs.io/dashboard/documentation/get-started-html-css-javascript)\n\t- Get Started with PDF Generator: [Angular](https://surveyjs.io/pdf-generator/documentation/get-started-angular) | [Vue.js](https://surveyjs.io/pdf-generator/documentation/get-started-vue) | [React](https://surveyjs.io/pdf-generator/documentation/get-started-react) | [HTML/CSS/JavaScript](https://surveyjs.io/pdf-generator/documentation/get-started-html-css-javascript)\n\n    For component configuration examples in React, you can refer to the [`ClientAssets/TypeScript/components`](ClientAssets/TypeScript/components) directory.\n\t\n2. **Update the Webpack configuration**       \nTo compile SurveyJS components into JavaScript and CSS files, you need to add new entry points to the Webpack configuration. Open the `webpack.config.js` file in the root directory of your project and update the `entry` and `output` objects. The following code shows how these objects are configured in this quick start template. In your project, the file paths may be different.\n\n    ```js\n    // webpack.config.js\n    // ...\n    module.exports = {\n      // ...\n      entry: {\n        \"survey-creator\": \"./ClientAssets/TypeScript/edit.tsx\",\n        \"form-library\": \"./ClientAssets/TypeScript/run.tsx\",\n        dashboard: \"./ClientAssets/TypeScript/dashboard.tsx\",\n        tabulator: \"./ClientAssets/TypeScript/table.tsx\",\n        pdf: \"./ClientAssets/TypeScript/pdf.tsx\",\n      },\n      output: {\n        libraryTarget: 'module',\n        path: path.resolve(__dirname, \"./wwwroot/static\"),\n        publicPath: \"/static/\",\n        filename: \"[name].js\"\n      },\n      // ...\n    }\n    ```\n\n    [View webpack.config.js](./webpack.config.js)\n\n3. **Update the TypeScript configuration**      \nIf your project uses TypeScript, open the `tsconfig.json` file in the root directory and set the following properties in it:\n\n    ```js\n    {\n      \"compilerOptions\": {\n        // ...\n        \"esModuleInterop\": true,\n        \"target\": \"es5\"\n      },\n      // ...\n    }\n    ```\n\n\u003ca id=\"add-razor-components\"\u003e\u003c/a\u003e \n\n4. **Add Razor components that render SurveyJS components**     \n\n    4.1. Specify the Razor component's route using the `@page` directive.\n\n      ```razor\n      @page \"/dashboard\"\n      ```\n    4.2. Apply the `InteractiveServer` render mode using the `@rendermode` directive.\n\n      ```razor\n      @rendermode InteractiveServer\n      ```\n    4.3. Add a link to the Webpack-generated style sheet. This link depends on the SurveyJS component for which you create the Razor component.\n\n      ```html\n      \u003clink href=\"static/dashboard.css\" rel=\"stylesheet\"/\u003e\n      ```\n    4.4. Add a markup element (usually `\u003cdiv\u003e`) in which the SurveyJS component will be rendered. Assign an `id` to it and use this `id` to access the element in JavaScript code.\n\n      ```html\n      \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n      ```\n    4.5. Load the Webpack-generated script in the Razor component. Inject the `IJSRuntime` dependency to be able to call JavaScript functions from C# code. Add an `OnAfterRenderAsync` method that imports the script file with the SurveyJS component and calls the file's `init` function. In addition, you should implement the `IDisplosable` interface to release the resources allocated to the imported JavaScript file.\n\n\n      ```razor\n      @inject IJSRuntime jsRuntime\n      @implements IDisposable\n      @code{\n        private IJSObjectReference? module;\n\n        protected override async Task OnAfterRenderAsync(bool firstRender) {\n          await base.OnAfterRenderAsync(firstRender);\n          module = await jsRuntime.InvokeAsync\u003cIJSObjectReference\u003e(\"import\", \"./static/dashboard.js\");     \n          await module.InvokeVoidAsync(\"init\");\n        }\n        void IDisposable.Dispose() {\n          module?.DisposeAsync();\n          module = null;\n        }\n      }\n      ```\n\n### Add SurveyJS to a Blazor application without a JavaScript framework\n\n1. **Set up the JavaScript environment**      \nCopy the following files from this template to the root directory of your project:\n\n    - [`package.json`](./package.json)\n    - [`tsconfig.json`](./tsconfig.json)\n    - [`webpack.config.js`](./webpack.config.js)\n\n2. **Add a pre-build task for the JavaScript part**        \nOpen the `.csproj` file of your project in a text editor and add the following pre-build task. It installs npm packages and builds the JavaScript part of your project every time you build the entire project:\n\n    ```xml\n    \u003cProject Sdk=\"Microsoft.NET.Sdk.Web\"\u003e\n      \u003c!-- ... --\u003e\n      \u003cTarget Name=\"PreBuild\" BeforeTargets=\"PreBuildEvent\"\u003e\n        \u003cExec Command=\"npm install\" WorkingDirectory=\".\" /\u003e\n        \u003cExec Command=\"npm run build\" WorkingDirectory=\".\" /\u003e\n      \u003c/Target\u003e\n    \u003c/Project\u003e\n    ```\n\n1. **Configure SurveyJS components**      \nSurveyJS components support a number of JavaScript frameworks. The current template uses React. If you are not using any JavaScript framework or using React, you can simply copy files from the [`ClientAssets`](./ClientAssets/) directory to your project and adjust them as required.\n\n1. **Add Razor components that render SurveyJS components**     \nRefer to [step 4](#add-razor-components) of the instructions for Blazor applications with a JavaScript framework.\n\n## SurveyJS Resources\n\n- [Website](https://surveyjs.io/)\n- [Documentation](https://surveyjs.io/form-library/documentation/overview)\n- [Starter Demos](https://surveyjs.io/form-library/examples/overview)\n- [What's New](https://surveyjs.io/stay-updated/major-updates/2024)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurveyjs%2Fsurveyjs-blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurveyjs%2Fsurveyjs-blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurveyjs%2Fsurveyjs-blazor/lists"}