Merge pull request #30 from surveyjs/add-blogpost-demos

SurveyJS Form Builder in Next.js - Add sample app

Author: JaneSjs

blogpost-apps/nextjs-form-builder/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

blogpost-apps/nextjs-form-builder/README.md

@@ -0,0 +1,27 @@
+# SurveyJS Form Builder in Next.js
+
+This repository contains the source code for a complete tutorial on integrating the [SurveyJS Form Builder](https://surveyjs.io/open-source) with a Next.js application.
+
+## Features
+
+* SurveyJS Form Builder (drag-and-drop interface)
+* Live preview with PDF export
+* Save/load survey definitions from a local storage
+* Custom Creator theme
+
+## Related Blog Post
+
+Read the full tutorial here: [Build Dynamic Forms with SurveyJS Form Builder in Next.js](http://surveyjs.io/stay-updated/blog/nextjs-form-builder).
+
+## Getting Started
+
+```
+npm install
+npm run dev
+```
+
+Visit http://localhost:3000 to start using the builder.
+
+## See Also
+
+For more advanced examples and backend integration options, check out: [SurveyJS + Next.js Quickstart Template](https://github.com/surveyjs/surveyjs-nextjs).

blogpost-apps/nextjs-form-builder/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

blogpost-apps/nextjs-form-builder/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

blogpost-apps/nextjs-form-builder/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "surveyjs-form-builder",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "ace-builds": "^1.43.2",
+    "next": "15.4.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "survey-core": "2.2.5",
+    "survey-creator-core": "2.2.5",
+    "survey-creator-react": "2.2.5",
+    "survey-pdf": "2.2.5",
+    "survey-react-ui": "2.2.5"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5"
+  }
+}

blogpost-apps/nextjs-form-builder/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;