Simplify templates to pure Jinja2 + CodeMirror editor + variable reference

Major template system overhaul: - TemplateConfig simplified from 21 fields to 9: removed all sub-templates (asset_image, asset_video, assets_format, people_format, etc.) Users write full Jinja2 with {% for %}, {% if %} inline. - Default EN/RU templates seeded on first startup (user_id=0, system-owned) with proper Jinja2 loops over added_assets, people, albums. - build_full_context() simplified: passes raw data directly to Jinja2 instead of pre-rendering sub-templates. - CodeMirror editor for template slots (HTML syntax highlighting, line wrapping, dark theme support via oneDark). - Variable reference API: GET /api/template-configs/variables returns per-slot variable descriptions + asset_fields for loop contexts. - Variable reference modal in UI: click "{{ }} Variables" next to any slot to see available variables with Jinja2 syntax examples. - Route ordering fix: /variables registered before /{config_id}. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 18:57:51 +03:00
parent bc8fda5984
commit 0bb4d8a949
9 changed files with 791 additions and 181 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,12 @@
 			"name": "frontend",
 			"version": "0.0.1",
 			"dependencies": {
-				"@mdi/js": "^7.4.47"
+				"@codemirror/lang-html": "^6.4.11",
+				"@codemirror/state": "^6.6.0",
+				"@codemirror/theme-one-dark": "^6.1.3",
+				"@codemirror/view": "^6.40.0",
+				"@mdi/js": "^7.4.47",
+				"codemirror": "^6.0.2"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^7.0.0",
@@ -28,6 +33,133 @@
 				"vite": "^7.3.1"
 			}
 		},
+		"node_modules/@codemirror/autocomplete": {
+			"version": "6.20.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
+			"integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/commands": {
+			"version": "6.10.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
+			"integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.6.0",
+				"@codemirror/view": "^6.27.0",
+				"@lezer/common": "^1.1.0"
+			}
+		},
+		"node_modules/@codemirror/lang-css": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+			"integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@lezer/common": "^1.0.2",
+				"@lezer/css": "^1.1.7"
+			}
+		},
+		"node_modules/@codemirror/lang-html": {
+			"version": "6.4.11",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+			"integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-javascript": "^6.0.0",
+				"@codemirror/language": "^6.4.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/css": "^1.1.0",
+				"@lezer/html": "^1.3.12"
+			}
+		},
+		"node_modules/@codemirror/lang-javascript": {
+			"version": "6.2.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+			"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.6.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/javascript": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/language": {
+			"version": "6.12.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
+			"integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.23.0",
+				"@lezer/common": "^1.5.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"node_modules/@codemirror/lint": {
+			"version": "6.9.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+			"integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/search": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+			"integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.37.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/state": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
+			"integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+			"dependencies": {
+				"@marijn/find-cluster-break": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/theme-one-dark": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+			"integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/view": {
+			"version": "6.40.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz",
+			"integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==",
+			"dependencies": {
+				"@codemirror/state": "^6.6.0",
+				"crelt": "^1.0.6",
+				"style-mod": "^4.1.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.27.4",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
@@ -524,6 +656,62 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lezer/common": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+			"integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw=="
+		},
+		"node_modules/@lezer/css": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.1.tgz",
+			"integrity": "sha512-PYAKeUVBo3HFThruRyp/iK91SwiZJnzXh8QzkQlwijB5y+N5iB28+iLk78o2zmKqqV0uolNhCwFqB8LA7b0Svg==",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"node_modules/@lezer/highlight": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+			"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+			"dependencies": {
+				"@lezer/common": "^1.3.0"
+			}
+		},
+		"node_modules/@lezer/html": {
+			"version": "1.3.13",
+			"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+			"integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/javascript": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+			"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.1.3",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"node_modules/@lezer/lr": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+			"integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@marijn/find-cluster-break": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+		},
 		"node_modules/@mdi/js": {
 			"version": "7.4.47",
 			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -1347,6 +1535,20 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/codemirror": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+			"integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/commands": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/search": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -1356,6 +1558,11 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -2025,6 +2232,11 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/style-mod": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+			"integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ=="
+		},
 		"node_modules/style-to-object": {
 			"version": "1.0.14",
 			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
@@ -2291,6 +2503,11 @@
 				}
 			}
 		},
+		"node_modules/w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+		},
 		"node_modules/zimmerframe": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
@@ -2299,6 +2516,133 @@
 		}
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": {
+			"version": "6.20.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
+			"integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@codemirror/commands": {
+			"version": "6.10.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
+			"integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.6.0",
+				"@codemirror/view": "^6.27.0",
+				"@lezer/common": "^1.1.0"
+			}
+		},
+		"@codemirror/lang-css": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+			"integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@lezer/common": "^1.0.2",
+				"@lezer/css": "^1.1.7"
+			}
+		},
+		"@codemirror/lang-html": {
+			"version": "6.4.11",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+			"integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-javascript": "^6.0.0",
+				"@codemirror/language": "^6.4.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/css": "^1.1.0",
+				"@lezer/html": "^1.3.12"
+			}
+		},
+		"@codemirror/lang-javascript": {
+			"version": "6.2.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+			"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.6.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/javascript": "^1.0.0"
+			}
+		},
+		"@codemirror/language": {
+			"version": "6.12.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
+			"integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.23.0",
+				"@lezer/common": "^1.5.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"@codemirror/lint": {
+			"version": "6.9.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+			"integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/search": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+			"integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.37.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/state": {
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
+			"integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+			"requires": {
+				"@marijn/find-cluster-break": "^1.0.0"
+			}
+		},
+		"@codemirror/theme-one-dark": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+			"integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
+		"@codemirror/view": {
+			"version": "6.40.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz",
+			"integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==",
+			"requires": {
+				"@codemirror/state": "^6.6.0",
+				"crelt": "^1.0.6",
+				"style-mod": "^4.1.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"@esbuild/aix-ppc64": {
 			"version": "0.27.4",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
@@ -2558,6 +2902,62 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"@lezer/common": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+			"integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw=="
+		},
+		"@lezer/css": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.1.tgz",
+			"integrity": "sha512-PYAKeUVBo3HFThruRyp/iK91SwiZJnzXh8QzkQlwijB5y+N5iB28+iLk78o2zmKqqV0uolNhCwFqB8LA7b0Svg==",
+			"requires": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"@lezer/highlight": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+			"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+			"requires": {
+				"@lezer/common": "^1.3.0"
+			}
+		},
+		"@lezer/html": {
+			"version": "1.3.13",
+			"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+			"integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+			"requires": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"@lezer/javascript": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+			"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+			"requires": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.1.3",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
+		"@lezer/lr": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+			"integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+			"requires": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@marijn/find-cluster-break": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+		},
 		"@mdi/js": {
 			"version": "7.4.47",
 			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -3032,12 +3432,31 @@
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
 			"dev": true
 		},
+		"codemirror": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+			"integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/commands": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/search": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
 		"cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
 			"dev": true
 		},
+		"crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+		},
 		"deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -3425,6 +3844,11 @@
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
 			"dev": true
 		},
+		"style-mod": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+			"integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ=="
+		},
 		"style-to-object": {
 			"version": "1.0.14",
 			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
@@ -3563,6 +3987,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+		},
 		"zimmerframe": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,11 @@
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
-		"@mdi/js": "^7.4.47"
+		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/state": "^6.6.0",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"@codemirror/view": "^6.40.0",
+		"@mdi/js": "^7.4.47",
+		"codemirror": "^6.0.2"
 	}
 }
--- a/frontend/src/lib/components/JinjaEditor.svelte
+++ b/frontend/src/lib/components/JinjaEditor.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { EditorView, keymap, placeholder as cmPlaceholder } from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+	import { html } from '@codemirror/lang-html';
+	import { oneDark } from '@codemirror/theme-one-dark';
+	import { getTheme } from '$lib/theme.svelte';
+
+	let { value = '', onchange, rows = 6, placeholder = '' } = $props<{
+		value: string;
+		onchange: (val: string) => void;
+		rows?: number;
+		placeholder?: string;
+	}>();
+
+	let container: HTMLDivElement;
+	let view: EditorView;
+	const theme = getTheme();
+
+	onMount(() => {
+		const extensions = [
+			html(),  // Jinja2 is close enough to HTML template syntax for highlighting
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					onchange(update.state.doc.toString());
+				}
+			}),
+			EditorView.lineWrapping,
+			EditorView.theme({
+				'&': { fontSize: '13px', fontFamily: 'monospace' },
+				'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '8px' },
+				'.cm-editor': { borderRadius: '0.375rem', border: '1px solid var(--color-border)' },
+				'.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '0px' },
+			}),
+		];
+
+		if (theme.isDark) {
+			extensions.push(oneDark);
+		}
+
+		if (placeholder) {
+			extensions.push(cmPlaceholder(placeholder));
+		}
+
+		view = new EditorView({
+			state: EditorState.create({ doc: value, extensions }),
+			parent: container,
+		});
+
+		return () => view.destroy();
+	});
+
+	// Sync external value changes (e.g. when editing different config)
+	$effect(() => {
+		if (view && view.state.doc.toString() !== value) {
+			view.dispatch({
+				changes: { from: 0, to: view.state.doc.length, insert: value },
+			});
+		}
+	});
+</script>
+
+<div bind:this={container}></div>
--- a/frontend/src/routes/template-configs/+page.svelte
+++ b/frontend/src/routes/template-configs/+page.svelte
@@ -10,9 +10,13 @@
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import Hint from '$lib/components/Hint.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import JinjaEditor from '$lib/components/JinjaEditor.svelte';

 	let configs = $state<any[]>([]);
 	let loaded = $state(false);
+	let varsRef = $state<Record<string, any>>({});
+	let showVarsFor = $state<string | null>(null);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
 	let error = $state('');
@@ -23,68 +27,44 @@

 	const defaultForm = () => ({
 		name: '', icon: '',
-		message_assets_added: '📷 {added_count} new photo(s) added to album "{album_name}"{common_date}{common_location}.{people}{assets}{video_warning}',
-		message_assets_removed: '🗑️ {removed_count} photo(s) removed from album "{album_name}".',
-		message_album_renamed: '✏️ Album "{old_name}" renamed to "{new_name}".',
-		message_album_deleted: '🗑️ Album "{album_name}" was deleted.',
-		message_asset_image: '\n  • 🖼️ {filename}',
-		message_asset_video: '\n  • 🎬 {filename}',
-		message_assets_format: '\nAssets:{assets}',
-		message_assets_more: '\n  • ...and {more_count} more',
-		message_people_format: ' People: {people}.',
+		message_assets_added: '',
+		message_assets_removed: '',
+		message_album_renamed: '',
+		message_album_deleted: '',
+		periodic_summary_message: '',
+		scheduled_assets_message: '',
+		memory_mode_message: '',
 		date_format: '%d.%m.%Y, %H:%M UTC',
-		common_date_template: ' from {date}',
-		date_if_unique_template: ' ({date})',
-		location_format: '{city}, {country}',
-		common_location_template: ' in {location}',
-		location_if_unique_template: ' 📍 {location}',
-		favorite_indicator: '❤️',
-		periodic_summary_message: '📋 Tracked Albums Summary ({album_count} albums):{albums}',
-		periodic_album_template: '\n  • {album_name}: {album_url}',
-		scheduled_assets_message: '📸 Here are some photos from album "{album_name}":{assets}',
-		memory_mode_message: '📅 On this day:{assets}',
 		video_warning: '\n\n⚠️ Note: Videos may not be sent due to Telegram\'s 50 MB file size limit.',
 	});
 	let form = $state(defaultForm());

 	const templateSlots = [
 		{ group: 'eventMessages', slots: [
-			{ key: 'message_assets_added', label: 'assetsAdded' },
-			{ key: 'message_assets_removed', label: 'assetsRemoved' },
-			{ key: 'message_album_renamed', label: 'albumRenamed' },
-			{ key: 'message_album_deleted', label: 'albumDeleted' },
-		]},
-		{ group: 'assetFormatting', slots: [
-			{ key: 'message_asset_image', label: 'imageTemplate' },
-			{ key: 'message_asset_video', label: 'videoTemplate' },
-			{ key: 'message_assets_format', label: 'assetsWrapper' },
-			{ key: 'message_assets_more', label: 'moreMessage' },
-			{ key: 'message_people_format', label: 'peopleFormat' },
-		]},
-		{ group: 'dateLocation', slots: [
-			{ key: 'date_format', label: 'dateFormat' },
-			{ key: 'common_date_template', label: 'commonDate' },
-			{ key: 'date_if_unique_template', label: 'uniqueDate' },
-			{ key: 'location_format', label: 'locationFormat' },
-			{ key: 'common_location_template', label: 'commonLocation' },
-			{ key: 'location_if_unique_template', label: 'uniqueLocation' },
-			{ key: 'favorite_indicator', label: 'favoriteIndicator' },
+			{ key: 'message_assets_added', label: 'assetsAdded', rows: 10 },
+			{ key: 'message_assets_removed', label: 'assetsRemoved', rows: 3 },
+			{ key: 'message_album_renamed', label: 'albumRenamed', rows: 2 },
+			{ key: 'message_album_deleted', label: 'albumDeleted', rows: 2 },
 		]},
 		{ group: 'scheduledMessages', slots: [
-			{ key: 'periodic_summary_message', label: 'periodicSummary' },
-			{ key: 'periodic_album_template', label: 'periodicAlbum' },
-			{ key: 'scheduled_assets_message', label: 'scheduledAssets' },
-			{ key: 'memory_mode_message', label: 'memoryMode' },
+			{ key: 'periodic_summary_message', label: 'periodicSummary', rows: 6 },
+			{ key: 'scheduled_assets_message', label: 'scheduledAssets', rows: 6 },
+			{ key: 'memory_mode_message', label: 'memoryMode', rows: 6 },
 		]},
 		{ group: 'telegramSettings', slots: [
-			{ key: 'video_warning', label: 'videoWarning' },
+			{ key: 'date_format', label: 'dateFormat', rows: 1 },
+			{ key: 'video_warning', label: 'videoWarning', rows: 2 },
 		]},
 	];

 	onMount(load);
 	async function load() {
-		try { configs = await api('/template-configs'); }
-		catch (err: any) { error = err.message || t('common.loadError'); }
+		try {
+			[configs, varsRef] = await Promise.all([
+				api('/template-configs'),
+				api('/template-configs/variables'),
+			]);
+		} catch (err: any) { error = err.message || t('common.loadError'); }
 		finally { loaded = true; }
 	}

@@ -149,9 +129,19 @@
 				<div class="space-y-3 mt-2">
 					{#each group.slots as slot}
 						<div>
-							<label class="block text-xs text-[var(--color-muted-foreground)] mb-1">{t(`templateConfig.${slot.label}`)}</label>
-							<textarea bind:value={(form as any)[slot.key]} rows={slot.key.includes('message_asset_') || slot.key.includes('_template') || slot.key === 'favorite_indicator' || slot.key === 'date_format' || slot.key === 'location_format' ? 1 : 2}
-								class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)] font-mono"></textarea>
+							<div class="flex items-center justify-between mb-1">
+								<label class="text-xs text-[var(--color-muted-foreground)]">{t(`templateConfig.${slot.label}`)}</label>
+								{#if varsRef[slot.key]}
+									<button type="button" onclick={() => showVarsFor = slot.key}
+										class="text-xs text-[var(--color-muted-foreground)] hover:underline">{{ }} Variables</button>
+								{/if}
+							</div>
+							{#if (slot.rows || 2) > 2}
+								<JinjaEditor value={(form as any)[slot.key] || ''} onchange={(v) => (form as any)[slot.key] = v} rows={slot.rows || 6} />
+							{:else}
+								<input bind:value={(form as any)[slot.key]}
+									class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)] font-mono" />
+							{/if}
 						</div>
 					{/each}
 				</div>
@@ -201,3 +191,30 @@

 <ConfirmModal open={confirmDelete !== null} message={t('templateConfig.confirmDelete')}
 	onconfirm={() => confirmDelete?.onconfirm()} oncancel={() => confirmDelete = null} />
+
+<!-- Variables reference modal -->
+<Modal open={showVarsFor !== null} title="Template Variables: {showVarsFor}" onclose={() => showVarsFor = null}>
+	{#if showVarsFor && varsRef[showVarsFor]}
+		<p class="text-sm text-[var(--color-muted-foreground)] mb-3">{varsRef[showVarsFor].description}</p>
+		<div class="space-y-1">
+			<p class="text-xs font-medium mb-1">Variables:</p>
+			{#each Object.entries(varsRef[showVarsFor].variables || {}) as [name, desc]}
+				<div class="flex items-start gap-2 text-sm">
+					<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ ' + name + ' }}'}</code>
+					<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
+				</div>
+			{/each}
+		</div>
+		{#if varsRef[showVarsFor].asset_fields}
+			<div class="mt-3 pt-3 border-t border-[var(--color-border)]">
+				<p class="text-xs font-medium mb-1">Asset fields (in {'{'}% for asset in added_assets %{'}'}):</p>
+				{#each Object.entries(varsRef[showVarsFor].asset_fields || {}) as [name, desc]}
+					<div class="flex items-start gap-2 text-sm">
+						<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ asset.' + name + ' }}'}</code>
+						<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</Modal>