diff --git a/console/package.json b/console/package.json
index 8edeb8920..ad1b9172b 100644
--- a/console/package.json
+++ b/console/package.json
@@ -44,6 +44,8 @@
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-hotkeys": "^0.4.1",
         "@tanstack/react-table": "^8.21.3",
+        "@templatical/editor": "0.19.0",
+        "@templatical/types": "0.19.0",
         "@textea/json-viewer": "^4.0.1",
         "@tiptap/core": "3.20.1",
         "@tiptap/extension-blockquote": "3.20.1",
@@ -83,6 +85,7 @@
         "html-react-parser": "^5.2.16",
         "i18next": "^23.16.8",
         "i18next-http-backend": "^2.7.3",
+        "liquidjs": "^10.27.2",
         "lucide-react": "^0.563.0",
         "maplibre-gl": "^5.19.0",
         "md5": "^2.3.0",
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index f0e901a3c..23804b3cd 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -128,6 +128,12 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@templatical/editor':
+        specifier: 0.19.0
+        version: 0.19.0
+      '@templatical/types':
+        specifier: 0.19.0
+        version: 0.19.0
       '@textea/json-viewer':
         specifier: ^4.0.1
         version: 4.0.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react@18.3.1))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react@18.3.1))(@types/react@19.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@19.2.14)(immer@9.0.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -245,6 +251,9 @@ importers:
       i18next-http-backend:
         specifier: ^2.7.3
         version: 2.7.3
+      liquidjs:
+        specifier: ^10.27.2
+        version: 10.27.2
       lucide-react:
         specifier: ^0.563.0
         version: 0.563.0(react@18.3.1)
@@ -335,7 +344,7 @@ importers:
         version: 9.39.2
       '@react-router/dev':
         specifier: ^7.13.0
-        version: 7.13.0(@react-router/serve@7.13.0(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3))(@types/node@22.19.9)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))
+        version: 7.13.0(@react-router/serve@7.13.0(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3))(@types/node@22.19.9)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(supports-color@10.2.2)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))
       '@testing-library/jest-dom':
         specifier: ^5.17.0
         version: 5.17.0
@@ -365,10 +374,10 @@ importers:
         version: 10.0.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.46.2
-        version: 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
       '@typescript-eslint/parser':
         specifier: ^8.46.2
-        version: 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
       '@vitejs/plugin-react':
         specifier: ^5.1.3
         version: 5.1.3(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))
@@ -377,25 +386,25 @@ importers:
         version: 2.4.1
       eslint:
         specifier: ^9.39.2
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       eslint-config-prettier:
         specifier: ^10.1.8
-        version: 10.1.8(eslint@9.39.2(jiti@2.6.1))
+        version: 10.1.8(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
       eslint-plugin-prettier:
         specifier: ^5.5.5
-        version: 5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.1)
+        version: 5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2)))(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(prettier@3.8.1)
       eslint-plugin-react-hooks:
         specifier: ^7.0.1
-        version: 7.0.1(eslint@9.39.2(jiti@2.6.1))
+        version: 7.0.1(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
       eslint-plugin-react-refresh:
         specifier: ^0.5.0
-        version: 0.5.0(eslint@9.39.2(jiti@2.6.1))
+        version: 0.5.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
       globals:
         specifier: ^17.3.0
         version: 17.3.0
       jsdom:
         specifier: ^28.0.0
-        version: 28.0.0
+        version: 28.0.0(supports-color@10.2.2)
       openapi-fetch:
         specifier: ^0.15.0
         version: 0.15.0
@@ -416,13 +425,13 @@ importers:
         version: 5.9.3
       typescript-eslint:
         specifier: ^8.54.0
-        version: 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3)
       vite:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@types/node@22.19.9)(happy-dom@20.5.0)(jiti@2.6.1)(jsdom@28.0.0)(lightningcss@1.30.2)(terser@5.46.0)
+        version: 4.0.18(@types/node@22.19.9)(happy-dom@20.5.0)(jiti@2.6.1)(jsdom@28.0.0(supports-color@10.2.2))(lightningcss@1.30.2)(terser@5.46.0)
 
 packages:
 
@@ -1722,30 +1731,35 @@ packages:
   '@react-email/body@0.2.1':
     resolution: {integrity: sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/button@0.2.1':
     resolution: {integrity: sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/code-block@0.2.1':
     resolution: {integrity: sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/code-inline@0.0.6':
     resolution: {integrity: sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/column@0.0.14':
     resolution: {integrity: sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -1759,60 +1773,70 @@ packages:
   '@react-email/container@0.0.16':
     resolution: {integrity: sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/font@0.0.10':
     resolution: {integrity: sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/head@0.0.13':
     resolution: {integrity: sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/heading@0.0.16':
     resolution: {integrity: sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/hr@0.0.12':
     resolution: {integrity: sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/html@0.0.12':
     resolution: {integrity: sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/img@0.0.12':
     resolution: {integrity: sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/link@0.0.13':
     resolution: {integrity: sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/markdown@0.0.18':
     resolution: {integrity: sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/preview@0.0.14':
     resolution: {integrity: sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -1826,12 +1850,14 @@ packages:
   '@react-email/row@0.0.13':
     resolution: {integrity: sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/section@0.0.17':
     resolution: {integrity: sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -1877,6 +1903,7 @@ packages:
   '@react-email/text@0.1.6':
     resolution: {integrity: sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==}
     engines: {node: '>=20.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -2004,66 +2031,79 @@ packages:
     resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.57.1':
     resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.57.1':
     resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.57.1':
     resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.57.1':
     resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.57.1':
     resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.57.1':
     resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.57.1':
     resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.57.1':
     resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.57.1':
     resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.57.1':
     resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.57.1':
     resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.57.1':
     resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.57.1':
     resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
@@ -2145,24 +2185,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -2237,6 +2281,23 @@ packages:
   '@tanstack/virtual-core@3.13.18':
     resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==}
 
+  '@templatical/editor@0.19.0':
+    resolution: {integrity: sha512-QNsjU6O/82ReD/Rd7Cswrrnegc8yCL37mEij5NiNUeHKWfR9Psh5YMDb3iVhG1rwNdT5ZztPBOoJ2az99mm62g==}
+    peerDependencies:
+      '@templatical/media-library': 0.19.0
+      '@templatical/quality': 0.19.0
+      '@templatical/renderer': 0.19.0
+    peerDependenciesMeta:
+      '@templatical/media-library':
+        optional: true
+      '@templatical/quality':
+        optional: true
+      '@templatical/renderer':
+        optional: true
+
+  '@templatical/types@0.19.0':
+    resolution: {integrity: sha512-xZFXNCacBejKhZvWYqejf7KRONoar1dBtEzOB+0DTTWZ0Arm9n8bKhEmQiCrT+cLJmcQBGQGJzzxcKTYBGGBoQ==}
+
   '@testing-library/dom@8.20.1':
     resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
     engines: {node: '>=12'}
@@ -2925,6 +2986,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -3958,24 +4023,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -4002,6 +4071,11 @@ packages:
   linkifyjs@4.3.2:
     resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
 
+  liquidjs@10.27.2:
+    resolution: {integrity: sha512-kvknfAEtOHjHkAAv7GxLEJh8ghpMQm3Fc4uWVyF7hERSTsSRsdC7saWs0p5aDG7GDcWsu5o+T4232O+8KZO55w==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -6039,14 +6113,14 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))':
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/config-array@0.21.1':
+  '@eslint/config-array@0.21.1(supports-color@10.2.2)':
     dependencies:
       '@eslint/object-schema': 2.1.7
       debug: 4.4.3(supports-color@10.2.2)
@@ -7010,7 +7084,7 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  '@react-router/dev@7.13.0(@react-router/serve@7.13.0(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3))(@types/node@22.19.9)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))':
+  '@react-router/dev@7.13.0(@react-router/serve@7.13.0(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3))(@types/node@22.19.9)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(supports-color@10.2.2)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/generator': 7.29.0
@@ -7041,7 +7115,7 @@ snapshots:
       tinyglobby: 0.2.15
       valibot: 1.2.0(typescript@5.9.3)
       vite: 7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)
-      vite-node: 3.2.4(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)
+      vite-node: 3.2.4(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(supports-color@10.2.2)(terser@5.46.0)
     optionalDependencies:
       '@react-router/serve': 7.13.0(react-router@7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.9.3)
       typescript: 5.9.3
@@ -7328,6 +7402,10 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.18': {}
 
+  '@templatical/editor@0.19.0': {}
+
+  '@templatical/types@0.19.0': {}
+
   '@testing-library/dom@8.20.1':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -7678,15 +7756,15 @@ snapshots:
     dependencies:
       '@types/node': 22.19.18
 
-  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.54.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       ignore: 7.0.5
       natural-compare: 1.4.0
       ts-api-utils: 2.4.0(typescript@5.9.3)
@@ -7694,19 +7772,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
       '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.54.0(supports-color@10.2.2)(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.54.0
       debug: 4.4.3(supports-color@10.2.2)
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.54.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.54.0(supports-color@10.2.2)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.54.0
@@ -7724,13 +7802,13 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.54.0(supports-color@10.2.2)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3)
       debug: 4.4.3(supports-color@10.2.2)
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -7738,9 +7816,9 @@ snapshots:
 
   '@typescript-eslint/types@8.54.0': {}
 
-  '@typescript-eslint/typescript-estree@8.54.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.54.0(supports-color@10.2.2)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/project-service': 8.54.0(supports-color@10.2.2)(typescript@5.9.3)
       '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
       '@typescript-eslint/types': 8.54.0
       '@typescript-eslint/visitor-keys': 8.54.0
@@ -7753,13 +7831,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
       '@typescript-eslint/scope-manager': 8.54.0
       '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/typescript-estree': 8.54.0(supports-color@10.2.2)(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -8108,6 +8186,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@10.0.1: {}
+
   commander@2.20.3:
     optional: true
 
@@ -8365,7 +8445,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       csstype: 3.2.3
 
   dom-serializer@2.0.0:
@@ -8493,33 +8573,33 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
+  eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2)):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
 
-  eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.1):
+  eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2)))(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(prettier@3.8.1):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       prettier: 3.8.1
       prettier-linter-helpers: 1.0.1
       synckit: 0.11.12
     optionalDependencies:
-      eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
+      eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
 
-  eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2)):
     dependencies:
       '@babel/core': 7.29.0
       '@babel/parser': 7.29.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       hermes-parser: 0.25.1
       zod: 4.3.6
       zod-validation-error: 4.0.2(zod@4.3.6)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-react-refresh@0.5.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-react-refresh@0.5.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2)):
     dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -8530,11 +8610,11 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.39.2(jiti@2.6.1):
+  eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))
       '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.21.1
+      '@eslint/config-array': 0.21.1(supports-color@10.2.2)
       '@eslint/config-helpers': 0.4.2
       '@eslint/core': 0.17.0
       '@eslint/eslintrc': 3.3.3
@@ -8734,7 +8814,7 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.2
+      hasown: 2.0.3
       math-intrinsics: 1.1.0
 
   get-nonce@1.0.1: {}
@@ -8919,7 +8999,7 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
-  http-proxy-agent@7.0.2:
+  http-proxy-agent@7.0.2(supports-color@10.2.2):
     dependencies:
       agent-base: 7.1.4
       debug: 4.4.3(supports-color@10.2.2)
@@ -9130,7 +9210,7 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@28.0.0:
+  jsdom@28.0.0(supports-color@10.2.2):
     dependencies:
       '@acemir/cssom': 0.9.31
       '@asamuzakjp/dom-selector': 6.7.8
@@ -9139,7 +9219,7 @@ snapshots:
       data-urls: 7.0.0
       decimal.js: 10.6.0
       html-encoding-sniffer: 6.0.0
-      http-proxy-agent: 7.0.2
+      http-proxy-agent: 7.0.2(supports-color@10.2.2)
       https-proxy-agent: 7.0.6(supports-color@10.2.2)
       is-potential-custom-element-name: 1.0.1
       parse5: 8.0.0
@@ -9244,6 +9324,10 @@ snapshots:
 
   linkifyjs@4.3.2: {}
 
+  liquidjs@10.27.2:
+    dependencies:
+      commander: 10.0.1
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -10215,7 +10299,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -10718,13 +10802,13 @@ snapshots:
       media-typer: 0.3.0
       mime-types: 2.1.35
 
-  typescript-eslint@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+  typescript-eslint@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.54.0(supports-color@10.2.2)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1)(supports-color@10.2.2))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)(supports-color@10.2.2)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -10845,7 +10929,7 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@3.2.4(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0):
+  vite-node@3.2.4(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(supports-color@10.2.2)(terser@5.46.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@10.2.2)
@@ -10881,7 +10965,7 @@ snapshots:
       lightningcss: 1.30.2
       terser: 5.46.0
 
-  vitest@4.0.18(@types/node@22.19.9)(happy-dom@20.5.0)(jiti@2.6.1)(jsdom@28.0.0)(lightningcss@1.30.2)(terser@5.46.0):
+  vitest@4.0.18(@types/node@22.19.9)(happy-dom@20.5.0)(jiti@2.6.1)(jsdom@28.0.0(supports-color@10.2.2))(lightningcss@1.30.2)(terser@5.46.0):
     dependencies:
       '@vitest/expect': 4.0.18
       '@vitest/mocker': 4.0.18(vite@7.3.1(@types/node@22.19.9)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0))
@@ -10906,7 +10990,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.9
       happy-dom: 20.5.0
-      jsdom: 28.0.0
+      jsdom: 28.0.0(supports-color@10.2.2)
     transitivePeerDependencies:
       - jiti
       - less
diff --git a/console/pnpm-workspace.yaml b/console/pnpm-workspace.yaml
index 25c0d18a5..71c50193b 100644
--- a/console/pnpm-workspace.yaml
+++ b/console/pnpm-workspace.yaml
@@ -1,3 +1,9 @@
+allowBuilds:
+  '@clerk/shared': true
+  esbuild: true
+minimumReleaseAgeExclude:
+  - '@templatical/editor@0.19.0'
+  - '@templatical/types@0.19.0'
 onlyBuiltDependencies:
   - '@clerk/shared'
   - esbuild
diff --git a/console/src/components/iframe.tsx b/console/src/components/iframe.tsx
index add3ada4c..f561b4136 100644
--- a/console/src/components/iframe.tsx
+++ b/console/src/components/iframe.tsx
@@ -24,7 +24,21 @@ export default function Iframe({
                 frame.contentDocument.documentElement.style.overflow = allowScroll ? "" : "hidden"
             }
             if (fullHeight) {
-                frame.style.minHeight = `${frame.contentWindow?.document.documentElement.scrollHeight}px`
+                // Collapse before measuring. A document can never report a
+                // scrollHeight smaller than the frame rendering it, so measuring
+                // in place only ever grows the frame — a short document inherits
+                // the height of whatever was shown before it, and the first
+                // measurement is pinned to the 300x150 default an iframe gets
+                // when no size is set.
+                const root = frame.contentDocument?.documentElement
+                if (root) {
+                    const previous = frame.style.height
+                    frame.style.height = "0px"
+                    const contentHeight = root.scrollHeight
+                    // Keep the previous height rather than collapsing to nothing
+                    // if the document is not measurable yet.
+                    frame.style.height = contentHeight > 0 ? `${contentHeight}px` : previous
+                }
             }
         }
     }, [allowScroll, content, fullHeight])
diff --git a/console/src/components/preview.tsx b/console/src/components/preview.tsx
index 316e3ad0f..9db0f90f1 100644
--- a/console/src/components/preview.tsx
+++ b/console/src/components/preview.tsx
@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next"
 import { ProjectContext } from "../contexts"
 import clsx from "clsx"
 import { compileEmail } from "@/views/campaign/template/mail/editor/codeEditor/compileEmail"
+import { templaticalPreviewHtml } from "@/lib/templatical-preview"
 import { getSystemPreviewProps } from "@/views/campaign/template/mail/editor/variableScope"
 import { EmailFrame } from "@/components/preview/EmailFrame"
 import { PhoneFrame } from "@/components/preview/PhoneFrame"
@@ -52,6 +53,15 @@ function EmailPreviewContent({
     const abortRef = useRef<AbortController | null>(null)
 
     useEffect(() => {
+        // A visually authored template is rendered by the backend at save time,
+        // and the resulting HTML is what the bundle holds. Compiling code.source
+        // here instead would show the JSX the template carried before it was
+        // switched, which is kept only so the switch stays reversible.
+        if (data?.type === "templatical") {
+            setCompiledHtml(templaticalPreviewHtml(data?.code?.bundle))
+            return
+        }
+
         const source = data?.code?.source
         if (!source) {
             setCompiledHtml("")
@@ -80,7 +90,7 @@ function EmailPreviewContent({
         return () => {
             abortController.abort()
         }
-    }, [data?.code?.source])
+    }, [data?.type, data?.code?.bundle, data?.code?.source])
 
     // In the small thumbnail (e.g. the Journey Send node) the Gmail-style
     // header chrome doesn't fit and just looks broken — show the rendered
diff --git a/console/src/lib/path-suggestions.ts b/console/src/lib/path-suggestions.ts
index f1c15eafc..abd5ea164 100644
--- a/console/src/lib/path-suggestions.ts
+++ b/console/src/lib/path-suggestions.ts
@@ -2,82 +2,92 @@ import { oapiClient } from "@/oapi/client"
 import type { UUID } from "@/types/common"
 import type { VariableSuggestions } from "@/types"
 
+/**
+ * Swallow a failure from an endpoint that not every deployment serves, so one
+ * missing schema source cannot take the whole aggregate down.
+ */
+function optional<T>(request: Promise<T>, what: string): Promise<T | undefined> {
+    return request.catch((error) => {
+        console.debug(`Failed to fetch ${what}:`, error)
+        return undefined
+    })
+}
+
 /**
  * Fetches variable path suggestions for a project by aggregating the various
  * subject schema endpoints. Organization-related schemas are optional and fall
  * back to empty arrays when the endpoints are unavailable.
  *
+ * The six endpoints are independent, so they go out together: requested one
+ * after another this cost six round trips, which editors that must wait for a
+ * complete variable list before mounting pay in full.
+ *
  * Replaces the legacy `api.projects.pathSuggestions` aggregator; uses the typed
  * OpenAPI client throughout.
  */
 export async function fetchPathSuggestions(projectId: UUID): Promise<VariableSuggestions> {
     const path = { projectID: projectId }
 
-    const { data: userEvents } = await oapiClient.GET(
-        "/api/admin/projects/{projectID}/subjects/user/events/schema",
-        { params: { path } },
-    )
-    const eventPaths = (userEvents?.results ?? []).map((event) => ({
+    const [userEvents, users, scheduled, organizationEvents, organizationUsers, organizations] =
+        await Promise.all([
+            oapiClient.GET("/api/admin/projects/{projectID}/subjects/user/events/schema", {
+                params: { path },
+            }),
+            oapiClient.GET("/api/admin/projects/{projectID}/subjects/users/schema", {
+                params: { path },
+            }),
+            optional(
+                oapiClient.GET("/api/admin/projects/{projectID}/subjects/user/scheduled/schema", {
+                    params: { path },
+                }),
+                "scheduled schemas",
+            ),
+            optional(
+                oapiClient.GET(
+                    "/api/admin/projects/{projectID}/subjects/organization/events/schema",
+                    {
+                        params: { path },
+                    },
+                ),
+                "organization event schemas",
+            ),
+            optional(
+                oapiClient.GET(
+                    "/api/admin/projects/{projectID}/subjects/organizations/users/schema",
+                    { params: { path } },
+                ),
+                "organization user schemas",
+            ),
+            optional(
+                oapiClient.GET("/api/admin/projects/{projectID}/subjects/organizations/schema", {
+                    params: { path },
+                }),
+                "organization schemas",
+            ),
+        ])
+
+    const eventPaths = (userEvents.data?.results ?? []).map((event) => ({
         ...event,
         schema: event.schema ?? [],
     })) as VariableSuggestions["eventPaths"]
 
-    const { data: users } = await oapiClient.GET(
-        "/api/admin/projects/{projectID}/subjects/users/schema",
-        { params: { path } },
-    )
-    const userPaths = (users?.results ?? []) as VariableSuggestions["userPaths"]
+    const userPaths = (users.data?.results ?? []) as VariableSuggestions["userPaths"]
 
-    let scheduledPaths: VariableSuggestions["scheduledPaths"] = []
-    try {
-        const { data } = await oapiClient.GET(
-            "/api/admin/projects/{projectID}/subjects/user/scheduled/schema",
-            { params: { path } },
-        )
-        scheduledPaths = (data?.results ?? []).map((s) => ({
-            ...s,
-            schema: s.schema ?? [],
-        })) as VariableSuggestions["scheduledPaths"]
-    } catch (error) {
-        console.debug("Failed to fetch scheduled schemas:", error)
-    }
+    const scheduledPaths = (scheduled?.data?.results ?? []).map((s) => ({
+        ...s,
+        schema: s.schema ?? [],
+    })) as VariableSuggestions["scheduledPaths"]
 
-    let organizationEventPaths: VariableSuggestions["organizationEventPaths"] = []
-    try {
-        const { data } = await oapiClient.GET(
-            "/api/admin/projects/{projectID}/subjects/organization/events/schema",
-            { params: { path } },
-        )
-        organizationEventPaths = (data?.results ?? []).map((event) => ({
-            ...event,
-            schema: event.schema ?? [],
-        })) as VariableSuggestions["organizationEventPaths"]
-    } catch (error) {
-        console.debug("Failed to fetch organization event schemas:", error)
-    }
+    const organizationEventPaths = (organizationEvents?.data?.results ?? []).map((event) => ({
+        ...event,
+        schema: event.schema ?? [],
+    })) as VariableSuggestions["organizationEventPaths"]
 
-    let organizationUserPaths: VariableSuggestions["organizationUserPaths"] = []
-    try {
-        const { data } = await oapiClient.GET(
-            "/api/admin/projects/{projectID}/subjects/organizations/users/schema",
-            { params: { path } },
-        )
-        organizationUserPaths = (data?.results ??
-            []) as VariableSuggestions["organizationUserPaths"]
-    } catch (error) {
-        console.debug("Failed to fetch organization user schemas:", error)
-    }
+    const organizationUserPaths = (organizationUsers?.data?.results ??
+        []) as VariableSuggestions["organizationUserPaths"]
 
-    let organizationPaths: VariableSuggestions["organizationPaths"] = []
-    try {
-        const { data } = await oapiClient.GET(
-            "/api/admin/projects/{projectID}/subjects/organizations/schema",
-            { params: { path } },
-        )
-        organizationPaths = (data?.results ?? []) as VariableSuggestions["organizationPaths"]
-    } catch (error) {
-        console.debug("Failed to fetch organization schemas:", error)
-    }
+    const organizationPaths = (organizations?.data?.results ??
+        []) as VariableSuggestions["organizationPaths"]
 
     return {
         eventPaths,
diff --git a/console/src/lib/templatical-preview.test.ts b/console/src/lib/templatical-preview.test.ts
new file mode 100644
index 000000000..b211aec47
--- /dev/null
+++ b/console/src/lib/templatical-preview.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest"
+import {
+    resolveMergeTags,
+    templaticalPlainText,
+    templaticalPreviewHtml,
+} from "./templatical-preview"
+
+const context = {
+    user: { email: "admin@localhost", data: { admin: true } },
+    unsubscribe_url: "https://lunogram.com/unsubscribe",
+    now: "2026-07-26T00:00:00.000Z",
+}
+
+describe("resolveMergeTags", () => {
+    it("resolves a nested user path", () => {
+        expect(resolveMergeTags("Hello {{ user.email }}", context)).toBe("Hello admin@localhost")
+        expect(resolveMergeTags("{{ user.data.admin }}", context)).toBe("true")
+    })
+
+    it("resolves tags outside the user scope", () => {
+        // These are offered by the merge-tag picker but were previously
+        // unresolvable, because only `user` was in the preview context.
+        expect(resolveMergeTags("{{ unsubscribe_url }}", context)).toBe(
+            "https://lunogram.com/unsubscribe",
+        )
+    })
+
+    it("resolves filtered tags", () => {
+        // The picker's "Current Year". Handlebars could not parse the `|`, and
+        // because the pass covers the whole document its parse error took every
+        // other tag down with it.
+        expect(resolveMergeTags("{{ now | date: '%Y' }}", context)).toBe("2026")
+    })
+
+    it("renders an unknown path empty without affecting its neighbours", () => {
+        expect(
+            resolveMergeTags("a={{ user.email }} b={{ nope }} c={{ now | date: '%Y' }}", context),
+        ).toBe("a=admin@localhost b= c=2026")
+    })
+
+    it("leaves rendered email scaffolding intact", () => {
+        const html = [
+            "<style>@media only screen and (min-width:480px) { .col { width:100% !important; } }</style>",
+            "<!--[if mso | IE]><table><tr><td><![endif]-->",
+            "<p>Hi {{ user.email }}</p>",
+        ].join("\n")
+
+        const out = resolveMergeTags(html, context)
+
+        expect(out).toContain("@media only screen and (min-width:480px)")
+        expect(out).toContain("<!--[if mso | IE]>")
+        expect(out).toContain("Hi admin@localhost")
+    })
+
+    it("returns the input unchanged when there is nothing to render", () => {
+        expect(resolveMergeTags("", context)).toBe("")
+    })
+})
+
+describe("bundle readers", () => {
+    it("read the html and plain text written by the backend", () => {
+        const bundle = JSON.stringify({
+            kind: "templatical",
+            html: "<p>hi</p>",
+            plainText: "hi",
+        })
+
+        expect(templaticalPreviewHtml(bundle)).toBe("<p>hi</p>")
+        expect(templaticalPlainText(bundle)).toBe("hi")
+    })
+
+    it("preview as blank for a template that has not been saved yet", () => {
+        expect(templaticalPreviewHtml(undefined)).toBe("")
+        expect(templaticalPlainText(null)).toBe("")
+        expect(templaticalPreviewHtml("not json")).toBe("")
+    })
+})
diff --git a/console/src/lib/templatical-preview.ts b/console/src/lib/templatical-preview.ts
new file mode 100644
index 000000000..14d6c8415
--- /dev/null
+++ b/console/src/lib/templatical-preview.ts
@@ -0,0 +1,72 @@
+import { Liquid } from "liquidjs"
+
+/**
+ * Preview HTML for a visually authored (Templatical) email template.
+ *
+ * These templates are rendered by the backend when the template is saved, and
+ * the resulting HTML is stored in the bundle. The console must not fall back to
+ * compiling `code.source` for them: that field holds whatever JSX the template
+ * carried before it was switched to the visual editor, kept only so the switch
+ * stays reversible, and rendering it shows the wrong email entirely.
+ *
+ * Returns an empty string when the template has not been saved yet, which
+ * previews as blank — the same as a code template that has not compiled.
+ */
+export function templaticalPreviewHtml(bundle: string | undefined | null): string {
+    return readBundle(bundle).html ?? ""
+}
+
+/**
+ * Plain-text alternative for a visually authored template.
+ *
+ * Derived by the backend from the rendered HTML, so like the HTML it reflects
+ * the last save rather than unsaved edits.
+ */
+export function templaticalPlainText(bundle: string | undefined | null): string {
+    return readBundle(bundle).plainText ?? ""
+}
+
+/**
+ * Liquid, matching the merge-tag syntax the block editor is configured with and
+ * the engine the send pipeline uses server-side. Non-strict so an unknown path
+ * renders empty instead of throwing, the same as a real send.
+ */
+const liquid = new Liquid({ strictVariables: false, strictFilters: false })
+
+/**
+ * Substitute merge tags in a rendered email against a preview context.
+ *
+ * The backend renders a visually authored template once, at save time, leaving
+ * merge tags as literal `{{ … }}` for the Liquid pass that runs per recipient.
+ * Previewing therefore means running that same pass in the console.
+ *
+ * It must be Liquid rather than Handlebars: the merge-tag picker offers
+ * filtered tags such as `{{ now | date: '%Y' }}`, and Handlebars cannot parse
+ * the `|`. Because the substitution covers the whole document, a parse error
+ * takes every other tag down with it, not just the offending one.
+ *
+ * Falls back to the unsubstituted HTML if rendering fails, so a preview never
+ * goes blank.
+ */
+export function resolveMergeTags(html: string, context: Record<string, unknown>): string {
+    if (!html) return html
+    try {
+        return liquid.parseAndRenderSync(html, context)
+    } catch (error) {
+        console.warn("Merge tag preview failed:", error)
+        return html
+    }
+}
+
+function readBundle(bundle: string | undefined | null): {
+    kind?: string
+    html?: string
+    plainText?: string
+} {
+    if (!bundle) return {}
+    try {
+        return JSON.parse(bundle) as { kind?: string; html?: string; plainText?: string }
+    } catch {
+        return {}
+    }
+}
diff --git a/console/src/stubs/pusher-js.ts b/console/src/stubs/pusher-js.ts
new file mode 100644
index 000000000..b609d360e
--- /dev/null
+++ b/console/src/stubs/pusher-js.ts
@@ -0,0 +1,20 @@
+/**
+ * Stub for `pusher-js`, aliased in vite.config.ts.
+ *
+ * `@templatical/editor` dynamically imports pusher-js from its cloud chunk to
+ * power realtime collaboration in `initCloud()`. The console only ever calls
+ * the self-hosted `init()`, so that chunk is never loaded — but Rollup still
+ * has to resolve the import at build time, and pusher-js is not among the
+ * package's declared dependencies.
+ *
+ * Aliasing it here keeps a transport library we never use out of the bundle.
+ * If the cloud editor is ever adopted, delete this stub and add the real
+ * dependency instead.
+ */
+export default class PusherStub {
+    constructor() {
+        throw new Error(
+            "pusher-js is stubbed: the Templatical cloud editor is not enabled in this build.",
+        )
+    }
+}
diff --git a/console/src/types.ts b/console/src/types.ts
index 7fbccf436..1ad14e8b3 100644
--- a/console/src/types.ts
+++ b/console/src/types.ts
@@ -802,12 +802,18 @@ export interface EmailTemplateData {
     subject: string
     preheader?: string
     editor: "code" | "visual"
-    type?: "react-email"
+    /**
+     * Which document the backend compiles. Absent means "react-email", so
+     * templates stored before this field existed keep working.
+     */
+    type?: "react-email" | "templatical"
     code?: {
         source: string
         bundle?: string
         bundle_hash?: string
     }
+    /** The Templatical document. Present only when `type` is "templatical". */
+    blocks?: Record<string, unknown>
     plaintext?: {
         generated?: string
         custom?: string
diff --git a/console/src/validation/campaign/template/data.ts b/console/src/validation/campaign/template/data.ts
index 8af7b6873..303fe1ce3 100644
--- a/console/src/validation/campaign/template/data.ts
+++ b/console/src/validation/campaign/template/data.ts
@@ -8,12 +8,17 @@ export const emailTemplateDataSchema = z.object({
         })
         .default({ name: "", address: "" }),
     subject: z.string().default(""),
-    editor: z.enum(["code", "visual"]).default("visual"),
+    // Which editor authored this template. Set at creation from the choice in
+    // the New Campaign form, then kept in step by the editor itself. Replaces
+    // an earlier `editor: "code" | "visual"` field that nothing ever read;
+    // rows still carrying it are inert.
+    editorMode: z.enum(["code", "builder", "blocks"]).optional(),
     cc: z.string().optional(),
     bcc: z.string().optional(),
     reply_to: z.string().optional(),
     preheader: z.string().optional(),
-    type: z.literal("react-email").optional(),
+    // Which document the backend compiles. Absent means "react-email".
+    type: z.enum(["react-email", "templatical"]).optional(),
     code: z
         .object({
             source: z.string(),
@@ -21,6 +26,8 @@ export const emailTemplateDataSchema = z.object({
             bundle_hash: z.string().optional(),
         })
         .optional(),
+    // The Templatical document, present only when type is "templatical".
+    blocks: z.record(z.string(), z.unknown()).optional(),
     plaintext: z
         .object({
             generated: z.string().optional(),
diff --git a/console/src/views/campaign/CampaignVariableContext.test.tsx b/console/src/views/campaign/CampaignVariableContext.test.tsx
new file mode 100644
index 000000000..863821acf
--- /dev/null
+++ b/console/src/views/campaign/CampaignVariableContext.test.tsx
@@ -0,0 +1,105 @@
+import { describe, expect, it, vi, beforeEach } from "vitest"
+import { render, screen, waitFor } from "@testing-library/react"
+import { CampaignContext, ProjectContext } from "@/contexts"
+import type { VariableSuggestions } from "@/types"
+import { toDisplayConditions } from "./template/mail/editor/blockEditor/displayConditions"
+
+const fetchPathSuggestions = vi.hoisted(() => vi.fn())
+vi.mock("@/lib/path-suggestions", () => ({ fetchPathSuggestions }))
+
+const { CampaignVariableProvider, useCampaignVariableContext } =
+    await import("./CampaignVariableContext")
+
+/**
+ * The schema endpoint prefixes discovered attributes with `.data`, so a boolean
+ * user attribute arrives looking like this.
+ */
+const suggestions = {
+    userPaths: [
+        { path: ".email", types: ["string"] },
+        { path: ".data.isPro", types: ["boolean"] },
+        { path: ".data.admin", types: ["boolean"] },
+        { path: ".data.plan", types: ["string"] },
+    ],
+    eventPaths: [],
+    scheduledPaths: [],
+    organizationEventPaths: [],
+    organizationUserPaths: [],
+    organizationPaths: [],
+} as unknown as VariableSuggestions
+
+function Probe() {
+    const { variableGroups, variablesReady } = useCampaignVariableContext()
+    const conditions = toDisplayConditions(variableGroups)
+    return (
+        <div>
+            <span data-testid="ready">{String(variablesReady)}</span>
+            <span data-testid="conditions">{conditions.map((c) => c.before).join("|")}</span>
+        </div>
+    )
+}
+
+function renderProbe() {
+    return render(
+        <ProjectContext.Provider value={[{ id: "p1" }] as never}>
+            <CampaignContext.Provider value={[{ channel: "email", variables: [] }] as never}>
+                <CampaignVariableProvider>
+                    <Probe />
+                </CampaignVariableProvider>
+            </CampaignContext.Provider>
+        </ProjectContext.Provider>,
+    )
+}
+
+describe("CampaignVariableProvider", () => {
+    beforeEach(() => {
+        fetchPathSuggestions.mockReset()
+    })
+
+    // The regression this guards: the block editor reads its display conditions
+    // once, at init. Mounting it before the schema fetch settles handed it an
+    // empty list — none of the hardcoded base variables is a boolean — and the
+    // editor hides the whole control when the list is empty.
+    it("reports no variables ready until the schema fetch settles", async () => {
+        let settle: (value: VariableSuggestions) => void = () => {}
+        fetchPathSuggestions.mockReturnValue(
+            new Promise<VariableSuggestions>((resolve) => {
+                settle = resolve
+            }),
+        )
+
+        renderProbe()
+
+        expect(screen.getByTestId("ready")).toHaveTextContent("false")
+        expect(screen.getByTestId("conditions")).toBeEmptyDOMElement()
+
+        settle(suggestions)
+
+        await waitFor(() => expect(screen.getByTestId("ready")).toHaveTextContent("true"))
+    })
+
+    it("offers a condition pair per boolean attribute once ready", async () => {
+        fetchPathSuggestions.mockResolvedValue(suggestions)
+
+        renderProbe()
+
+        await waitFor(() => expect(screen.getByTestId("ready")).toHaveTextContent("true"))
+
+        expect(screen.getByTestId("conditions")).toHaveTextContent(
+            "{% if user.data.isPro %}|{% unless user.data.isPro %}|" +
+                "{% if user.data.admin %}|{% unless user.data.admin %}",
+        )
+    })
+
+    // A project whose schema endpoints are down still needs a usable editor,
+    // so readiness is about the fetch having settled, not having succeeded.
+    it("becomes ready even when the schema fetch fails", async () => {
+        vi.spyOn(console, "error").mockImplementation(() => {})
+        fetchPathSuggestions.mockRejectedValue(new Error("schema endpoint down"))
+
+        renderProbe()
+
+        await waitFor(() => expect(screen.getByTestId("ready")).toHaveTextContent("true"))
+        expect(screen.getByTestId("conditions")).toBeEmptyDOMElement()
+    })
+})
diff --git a/console/src/views/campaign/CampaignVariableContext.tsx b/console/src/views/campaign/CampaignVariableContext.tsx
index a6d2b9b86..e25926d76 100644
--- a/console/src/views/campaign/CampaignVariableContext.tsx
+++ b/console/src/views/campaign/CampaignVariableContext.tsx
@@ -14,10 +14,22 @@ import type { VariableSuggestions } from "@/types"
 interface CampaignVariableContextValue {
     /** Variable groups available for campaign template editors */
     variableGroups: VariableGroup[]
+    /**
+     * Whether the schema fetch has settled, so `variableGroups` is as complete
+     * as it will get. Until then the groups hold only the hardcoded base
+     * variables and none of the project's own attributes.
+     *
+     * Editors that read their configuration once, at mount, must wait for this:
+     * mounting early silently pins them to the base set for the rest of the
+     * session. Set on failure as well as success — a project whose schema
+     * endpoints are down still needs a usable editor.
+     */
+    variablesReady: boolean
 }
 
 const CampaignVariableContext = createContext<CampaignVariableContextValue>({
     variableGroups: [],
+    variablesReady: false,
 })
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -103,15 +115,20 @@ export function CampaignVariableProvider({ children }: PropsWithChildren) {
     const [project] = useContext(ProjectContext)
     const [campaign] = useContext(CampaignContext)
     const [suggestions, setSuggestions] = useState<VariableSuggestions | null>(null)
+    const [variablesReady, setVariablesReady] = useState(false)
 
     // Fetch user schema paths once per project
     useEffect(() => {
         let cancelled = false
+        setVariablesReady(false)
         fetchPathSuggestions(project.id)
             .then((s) => {
                 if (!cancelled) setSuggestions(s)
             })
             .catch(console.error)
+            .finally(() => {
+                if (!cancelled) setVariablesReady(true)
+            })
         return () => {
             cancelled = true
         }
@@ -166,8 +183,8 @@ export function CampaignVariableProvider({ children }: PropsWithChildren) {
     }, [suggestions, campaign.variables, campaign.channel])
 
     const value = useMemo<CampaignVariableContextValue>(
-        () => ({ variableGroups }),
-        [variableGroups],
+        () => ({ variableGroups, variablesReady }),
+        [variableGroups, variablesReady],
     )
 
     return (
diff --git a/console/src/views/campaign/NewCampaign.tsx b/console/src/views/campaign/NewCampaign.tsx
index 96e5c3321..134b1fa86 100644
--- a/console/src/views/campaign/NewCampaign.tsx
+++ b/console/src/views/campaign/NewCampaign.tsx
@@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useNavigate, useParams } from "react-router"
 import { useTranslation } from "react-i18next"
-import { Inbox, Info, Mail, MessageSquareDot, Smartphone } from "lucide-react"
+import { Code2, Inbox, Info, LayoutGrid, Mail, MessageSquareDot, Smartphone } from "lucide-react"
 import { toast } from "sonner"
 
 import api from "@/api"
@@ -23,9 +23,11 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { SelectableCard } from "@/components/ui/selectable-card"
 import { Switch } from "@/components/ui/switch"
 
 import { CampaignVariables } from "./CampaignVariables"
+import { BLOCKS_MODE, type EditorMode } from "./template/mail/editor/codeEditor/hooks/useEditorMode"
 import { newCampaignSchema, type NewCampaignFormValues } from "@/validation/campaign/new-campaign"
 import {
     emailTemplateDataSchema,
@@ -53,6 +55,8 @@ export default function NewCampaign() {
 
     const [variables, setVariables] = useState<CampaignVariable[]>([])
     const [isCreating, setIsCreating] = useState(false)
+    // Visual is the default: most campaigns are built by non-engineers.
+    const [editorMode, setEditorMode] = useState<EditorMode>(BLOCKS_MODE)
 
     const channel = isChannelType(channelParam) ? channelParam : null
     // Inbox campaigns have no subscription model — they are always transactional.
@@ -200,9 +204,20 @@ export default function NewCampaign() {
                 })
             }
 
+            // The editor choice is made here rather than inside the editor:
+            // switching afterwards starts the other editor empty, so it is a
+            // decision worth making before any content exists.
+            const templateData = templateSchemaMap[channel].parse({})
             const template = await api.campaigns.templates.create(project.id, campaignId, {
                 locale: project.locale,
-                data: templateSchemaMap[channel].parse({}),
+                data:
+                    channel === "email"
+                        ? {
+                              ...templateData,
+                              editorMode,
+                              type: editorMode === BLOCKS_MODE ? "templatical" : "react-email",
+                          }
+                        : templateData,
             })
 
             navigate(`/projects/${project.id}/campaigns/${campaignId}/templates/${template.id}`)
@@ -273,6 +288,42 @@ export default function NewCampaign() {
                         </Field>
                     </FieldGroup>
 
+                    {channel === "email" && (
+                        <FieldGroup>
+                            <Field className="gap-2">
+                                <FieldLabel>{t("campaign.editor.label", "Editor")}</FieldLabel>
+                                <FieldDescription>
+                                    {t(
+                                        "campaign.editor.description",
+                                        "How you'll build this email. Switching later is possible but starts the other editor from scratch.",
+                                    )}
+                                </FieldDescription>
+                                <div className="grid grid-cols-2 gap-3">
+                                    <SelectableCard
+                                        title={t("campaign.editor.visual.title", "Visual editor")}
+                                        summary={t(
+                                            "campaign.editor.visual.summary",
+                                            "Drag and drop blocks. No code required.",
+                                        )}
+                                        icon={<LayoutGrid className="h-4 w-4" />}
+                                        active={editorMode === BLOCKS_MODE}
+                                        onClick={() => setEditorMode(BLOCKS_MODE)}
+                                    />
+                                    <SelectableCard
+                                        title={t("campaign.editor.code.title", "Code editor")}
+                                        summary={t(
+                                            "campaign.editor.code.summary",
+                                            "Write React Email components directly.",
+                                        )}
+                                        icon={<Code2 className="h-4 w-4" />}
+                                        active={editorMode === "code"}
+                                        onClick={() => setEditorMode("code")}
+                                    />
+                                </div>
+                            </Field>
+                        </FieldGroup>
+                    )}
+
                     <FieldGroup>
                         <Field className="gap-2">
                             <FieldLabel>{t("campaign.variables.label", "Variables")}</FieldLabel>
diff --git a/console/src/views/campaign/template/mail/Setup.tsx b/console/src/views/campaign/template/mail/Setup.tsx
index e884e28a0..12ce99a8b 100644
--- a/console/src/views/campaign/template/mail/Setup.tsx
+++ b/console/src/views/campaign/template/mail/Setup.tsx
@@ -9,7 +9,8 @@ import oapiClient from "@/oapi/client"
 import * as z from "zod"
 import { Render } from "@/renderTemplates"
 import { compileEmail } from "./editor/codeEditor/compileEmail"
-import { getSystemPreviewProps } from "./editor/variableScope"
+import { resolveMergeTags, templaticalPreviewHtml } from "@/lib/templatical-preview"
+import { getSystemPreviewProps, mergeUserIntoProps } from "./editor/variableScope"
 
 import { Input } from "@/components/ui/input"
 import { TemplateInput } from "@/components/ui/template-input"
@@ -341,6 +342,30 @@ export function EmailContentPreview({ campaign, form, edit = false }: EmailSetup
             return
         }
 
+        const previewProps: Record<string, unknown> = {
+            ...getSystemPreviewProps(),
+            ...(selectedUser ? { user: selectedUser } : {}),
+        }
+
+        // Visually authored templates are rendered by the backend on save;
+        // compiling code.source would show the JSX kept only for reversibility.
+        // That render leaves merge tags literal for the per-recipient Liquid
+        // pass, so picking a user means running that pass here — without it the
+        // body never changes and only the subject and sender react.
+        //
+        // The context goes through mergeUserIntoProps rather than spreading the
+        // user directly, so tags like `{{ user.external_id }}` resolve to the
+        // same values the editor's preview shows.
+        if (template?.data?.type === "templatical") {
+            const html = templaticalPreviewHtml(template?.data?.code?.bundle)
+            setCompiledHtml(
+                selectedUser
+                    ? resolveMergeTags(html, mergeUserIntoProps(previewProps, selectedUser))
+                    : html,
+            )
+            return
+        }
+
         const source = template?.data?.code?.source
         if (!source) {
             setCompiledHtml("")
@@ -353,11 +378,6 @@ export function EmailContentPreview({ campaign, form, edit = false }: EmailSetup
         const abortController = new AbortController()
         abortRef.current = abortController
 
-        const previewProps: Record<string, unknown> = {
-            ...getSystemPreviewProps(),
-            ...(selectedUser ? { user: selectedUser } : {}),
-        }
-
         compileEmail(source, previewProps, abortController.signal)
             .then((result) => {
                 if (!abortController.signal.aborted) {
@@ -376,7 +396,13 @@ export function EmailContentPreview({ campaign, form, edit = false }: EmailSetup
         }
         // @ts-expect-error template.data.code can not be undefined here because this page doesn't load without the email being selected,
         // and the email template type requires code to be defined.
-    }, [template?.data?.code?.source, selectedUser, template?.type])
+    }, [
+        template?.data?.type,
+        template?.data?.code?.bundle,
+        template?.data?.code?.source,
+        selectedUser,
+        template?.type,
+    ])
 
     const { subject, from, replyTo } = form.watch()
 
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/BlockEditor.tsx b/console/src/views/campaign/template/mail/editor/blockEditor/BlockEditor.tsx
new file mode 100644
index 000000000..ac62e9cac
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/BlockEditor.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useRef } from "react"
+import { init } from "@templatical/editor"
+import type { TemplaticalEditor } from "@templatical/editor"
+import type { TemplateContent } from "@templatical/types"
+import type { TemplaticalMergeTag } from "./mergeTags"
+import type { TemplaticalDisplayCondition } from "./displayConditions"
+import "@templatical/editor/style.css"
+
+/**
+ * Imperative operations exposed once the editor is mounted, in Templatical's
+ * own types. The wrapper above adapts this to the host-facing
+ * `BlockEditorHandle`, which speaks the opaque `EmailDocument`.
+ */
+export interface TemplaticalEditorHandle {
+    setContent: (content: TemplateContent) => void
+}
+
+interface BlockEditorProps {
+    /**
+     * Document to open. Read once, on mount — the editor owns its content
+     * afterwards and reports changes through `onChange`. Passing a new object
+     * on every keystroke would otherwise remount the editor.
+     */
+    initialContent: TemplateContent
+    onChange: (content: TemplateContent) => void
+    onError?: (error: Error) => void
+    theme: "light" | "dark"
+    /** Offered by the tag picker and typing autocomplete. Read once, on mount. */
+    mergeTags: TemplaticalMergeTag[]
+    /** Conditions offered for showing or hiding an individual block. */
+    displayConditions: TemplaticalDisplayCondition[]
+    /** Opens the host's media library; resolves null when dismissed. */
+    onRequestMedia: () => Promise<{ url: string; alt?: string } | null>
+    /**
+     * Called with a handle once the editor is mounted, and with null when it is
+     * torn down. A callback rather than a forwarded ref because the component
+     * sits behind `React.lazy` and mounts asynchronously, so there is no render
+     * at which a ref would be reliably populated.
+     */
+    onReady?: (handle: TemplaticalEditorHandle | null) => void
+}
+
+/**
+ * React wrapper around Templatical, which mounts imperatively into a DOM node
+ * rather than rendering as a component.
+ *
+ * The editor renders into a Shadow DOM by default, so the console's Tailwind
+ * cannot cascade into it and its own classes cannot collide with ours.
+ *
+ * Layout caveat from the library: no ancestor of the container may set
+ * `transform`, `filter`, `perspective` or `will-change`. Each establishes a
+ * containing block for `position: fixed`, which detaches the editor's floating
+ * UI (colour pickers, text toolbars) and drag ghost from their anchors.
+ */
+export function BlockEditor({
+    initialContent,
+    onChange,
+    onError,
+    theme,
+    mergeTags,
+    displayConditions,
+    onRequestMedia,
+    onReady,
+}: BlockEditorProps) {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const editorRef = useRef<TemplaticalEditor | null>(null)
+
+    // Held in refs so a changed callback identity never remounts the editor.
+    const onChangeRef = useRef(onChange)
+    onChangeRef.current = onChange
+    const onErrorRef = useRef(onError)
+    onErrorRef.current = onError
+    const initialContentRef = useRef(initialContent)
+    const themeRef = useRef(theme)
+    themeRef.current = theme
+    const mergeTagsRef = useRef(mergeTags)
+    const displayConditionsRef = useRef(displayConditions)
+    const onRequestMediaRef = useRef(onRequestMedia)
+    onRequestMediaRef.current = onRequestMedia
+    const onReadyRef = useRef(onReady)
+    onReadyRef.current = onReady
+
+    useEffect(() => {
+        const host = containerRef.current
+        if (!host) return
+
+        // Every mount gets its own node rather than sharing the ref'd element.
+        // `init` is async and StrictMode invokes this effect twice, so two
+        // editors can be initialising into the same parent at once; whichever
+        // settles second would have its DOM torn down by the other's unmount,
+        // leaving an empty shadow root and a blank editor.
+        const mountPoint = document.createElement("div")
+        mountPoint.className = "h-full w-full"
+        host.appendChild(mountPoint)
+
+        // Covers the window where cleanup runs before the promise settles —
+        // without it the editor would be orphaned, still mounted and still
+        // emitting changes.
+        let disposed = false
+        let instance: TemplaticalEditor | null = null
+
+        void init({
+            container: mountPoint,
+            content: initialContentRef.current,
+            // Set at init as well as through setTheme below, so the editor's
+            // first paint already matches the console instead of flashing the
+            // library default.
+            uiTheme: themeRef.current,
+            // Liquid matches the platform's own template syntax, so merge tags
+            // authored here resolve in the send pipeline unchanged.
+            mergeTags: { syntax: "liquid", tags: mergeTagsRef.current },
+            // `allowCustom` stays off: a condition is raw markup the renderer
+            // wraps a block in unchecked, so a hand-written guard that does not
+            // close cleanly corrupts every block after it in the email. The
+            // generated pairs are balanced by construction.
+            displayConditions: { conditions: displayConditionsRef.current, allowCustom: false },
+            onRequestMedia: () => onRequestMediaRef.current(),
+            onChange: (content) => onChangeRef.current(content),
+            onError: (error) => onErrorRef.current?.(error),
+        })
+            .then((editor) => {
+                if (disposed) {
+                    editor.unmount()
+                    mountPoint.remove()
+                    return
+                }
+                instance = editor
+                editorRef.current = editor
+                hideDarkModePreview(mountPoint)
+                onReadyRef.current?.({
+                    setContent: (content) => editor.setContent(content),
+                })
+            })
+            .catch((error: unknown) => {
+                onErrorRef.current?.(error instanceof Error ? error : new Error(String(error)))
+            })
+
+        return () => {
+            disposed = true
+            instance?.unmount()
+            mountPoint.remove()
+            // Only clear the shared ref if it still points at this instance —
+            // a concurrent mount may already have replaced it.
+            if (editorRef.current === instance) {
+                editorRef.current = null
+                onReadyRef.current?.(null)
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        editorRef.current?.setTheme(theme)
+    }, [theme])
+
+    return <div ref={containerRef} className="h-full w-full" />
+}
+
+/**
+ * Hide the editor's built-in dark-mode preview control.
+ *
+ * It toggles a preview of how the *email* renders in a dark-mode mail client,
+ * which is a separate concern from the console's own appearance and is not
+ * something this integration supports yet — the backend renders one HTML
+ * variant, so what the toggle previews would not match what is sent.
+ *
+ * The editor has no config option for it, and its UI lives behind a shadow
+ * boundary that host stylesheets cannot cross, so the rule is injected into
+ * the shadow root itself.
+ */
+function hideDarkModePreview(mountPoint: HTMLElement) {
+    const host = mountPoint.shadowRoot
+        ? mountPoint
+        : mountPoint.querySelector<HTMLElement>("*:not(style)")
+    const root = host?.shadowRoot ?? findShadowRoot(mountPoint)
+    if (!root) return
+
+    const style = document.createElement("style")
+    style.textContent = ".tpl-dark-mode-toggle { display: none !important; }"
+    root.appendChild(style)
+}
+
+function findShadowRoot(node: HTMLElement): ShadowRoot | null {
+    if (node.shadowRoot) return node.shadowRoot
+    for (const child of node.querySelectorAll("*")) {
+        const shadow = (child as HTMLElement).shadowRoot
+        if (shadow) return shadow
+    }
+    return null
+}
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/TemplaticalBlockEditor.tsx b/console/src/views/campaign/template/mail/editor/blockEditor/TemplaticalBlockEditor.tsx
new file mode 100644
index 000000000..8cc0e1cf3
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/TemplaticalBlockEditor.tsx
@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { createDefaultTemplateContent } from "@templatical/types"
+import type { TemplateContent } from "@templatical/types"
+import { toast } from "sonner"
+import type { BlockEditorHandle, EmailDocument } from "../codeEditor/hooks/useEditorMode"
+import { BlockEditor, type TemplaticalEditorHandle } from "./BlockEditor"
+import { MediaManager } from "@/components/media-manager"
+import type { Image } from "@/types"
+import { useConsoleTheme } from "./useConsoleTheme"
+import { toMergeTags } from "./mergeTags"
+import { toDisplayConditions } from "./displayConditions"
+import type { VariableGroup } from "@/views/journey/JourneyVariableContext"
+
+interface TemplaticalBlockEditorProps {
+    /** Stored document, absent for a template that has never used this editor. */
+    initialDocument?: EmailDocument
+    onChange: (doc: EmailDocument) => void
+    /** Campaign variables, offered as merge tags in the editor. */
+    variableGroups: VariableGroup[]
+    /** Receives the import handle once mounted; null on teardown. */
+    onReady?: (handle: BlockEditorHandle | null) => void
+}
+
+/**
+ * Adapts Templatical to the block-editor slot in the mail editor.
+ *
+ * The slot's contract is the opaque `EmailDocument`; Templatical's concrete
+ * `TemplateContent` is confined to this file and the wrapper beneath it.
+ */
+export function TemplaticalBlockEditor({
+    initialDocument,
+    onChange,
+    variableGroups,
+    onReady,
+}: TemplaticalBlockEditorProps) {
+    const theme = useConsoleTheme()
+    // Read once on mount, matching how the editor consumes them.
+    const mergeTags = useMemo(() => toMergeTags(variableGroups), [variableGroups])
+    const displayConditions = useMemo(() => toDisplayConditions(variableGroups), [variableGroups])
+
+    // The editor asks for media imperatively and waits on a promise, while the
+    // media manager is a React modal. Park the resolver until the user either
+    // picks an image or dismisses the dialog, so the editor is never left
+    // waiting on a promise that cannot settle.
+    const [mediaOpen, setMediaOpen] = useState(false)
+    const resolveMediaRef = useRef<((result: { url: string; alt?: string } | null) => void) | null>(
+        null,
+    )
+
+    const requestMedia = useCallback(
+        () =>
+            new Promise<{ url: string; alt?: string } | null>((resolve) => {
+                resolveMediaRef.current = resolve
+                setMediaOpen(true)
+            }),
+        [],
+    )
+
+    const settleMedia = useCallback((result: { url: string; alt?: string } | null) => {
+        resolveMediaRef.current?.(result)
+        resolveMediaRef.current = null
+    }, [])
+
+    // Resolve any pending request on unmount for the same reason.
+    useEffect(() => () => settleMedia(null), [settleMedia])
+
+    // A template switched over from the code editor has no document yet, so
+    // start from an empty one rather than mounting the editor with nothing.
+    const seededRef = useRef(initialDocument === undefined)
+    const initialContent = useMemo<TemplateContent>(
+        () => (initialDocument as TemplateContent | undefined) ?? createDefaultTemplateContent(),
+        // Read once: the editor owns the document after mount.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    )
+
+    const onChangeRef = useRef(onChange)
+    onChangeRef.current = onChange
+
+    // Wrap the handle so an import also reports the new document upward.
+    // `setContent` repaints the canvas but does not necessarily emit `onChange`,
+    // and without that the imported document would never reach `blocksData` —
+    // the next save would persist the pre-import template.
+    const onReadyRef = useRef(onReady)
+    onReadyRef.current = onReady
+    const handleReady = useCallback((handle: TemplaticalEditorHandle | null) => {
+        onReadyRef.current?.(
+            handle && {
+                setContent: (doc: EmailDocument) => {
+                    handle.setContent(doc as unknown as TemplateContent)
+                    onChangeRef.current(doc)
+                },
+            },
+        )
+    }, [])
+
+    // Report a freshly seeded document upward immediately. Templatical only
+    // emits onChange once the user edits something, so without this a template
+    // saved straight after switching would store no document at all — and the
+    // backend, told by data.type to compile the document, would have nothing to
+    // compile and the campaign would fail to send.
+    useEffect(() => {
+        if (seededRef.current) {
+            onChangeRef.current(initialContent as unknown as EmailDocument)
+        }
+    }, [initialContent])
+
+    return (
+        <>
+            <BlockEditor
+                initialContent={initialContent}
+                onChange={(content) => onChange(content as unknown as EmailDocument)}
+                onError={(error) => toast.error(error.message)}
+                theme={theme}
+                mergeTags={mergeTags}
+                displayConditions={displayConditions}
+                onRequestMedia={requestMedia}
+                onReady={handleReady}
+            />
+            <MediaManager
+                open={mediaOpen}
+                onOpenChange={(open) => {
+                    if (!open) settleMedia(null)
+                    setMediaOpen(open)
+                }}
+                onSelect={(image: Image) => {
+                    settleMedia({ url: image.url, alt: image.name })
+                    setMediaOpen(false)
+                }}
+            />
+        </>
+    )
+}
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.test.ts b/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.test.ts
new file mode 100644
index 000000000..92363d257
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest"
+import { Liquid } from "liquidjs"
+import { toDisplayConditions } from "./displayConditions"
+
+const liquid = new Liquid({ strictVariables: false, strictFilters: false })
+
+describe("toDisplayConditions", () => {
+    it("offers a true/not-true pair for each boolean variable", () => {
+        const conditions = toDisplayConditions([
+            {
+                label: "User",
+                variables: [{ path: "user.data.isPro", label: "data.isPro", types: ["boolean"] }],
+            },
+        ])
+
+        expect(conditions).toEqual([
+            {
+                label: "data.isPro is true",
+                before: "{% if user.data.isPro %}",
+                after: "{% endif %}",
+                group: "User",
+                description: "Only shown when user.data.isPro is true",
+            },
+            {
+                label: "data.isPro is not true",
+                before: "{% unless user.data.isPro %}",
+                after: "{% endunless %}",
+                group: "User",
+                description: "Only shown when user.data.isPro is false or not set",
+            },
+        ])
+    })
+
+    it("skips variables that are not booleans", () => {
+        const conditions = toDisplayConditions([
+            {
+                label: "User",
+                variables: [
+                    { path: "user.email", label: "Email", types: ["string"] },
+                    { path: "user.data", label: "Data", types: ["object"] },
+                    { path: "user.created_at", label: "Created", types: ["date"] },
+                    { path: "user.untyped", label: "Untyped" },
+                ],
+            },
+        ])
+
+        expect(conditions).toEqual([])
+    })
+
+    it("skips a path the backend has seen hold more than one type", () => {
+        const conditions = toDisplayConditions([
+            {
+                label: "User",
+                variables: [
+                    { path: "user.data.flaky", label: "flaky", types: ["boolean", "string"] },
+                ],
+            },
+        ])
+
+        expect(conditions).toEqual([])
+    })
+
+    it("groups conditions by their variable group", () => {
+        const conditions = toDisplayConditions([
+            {
+                label: "User",
+                variables: [{ path: "user.data.admin", label: "data.admin", types: ["boolean"] }],
+            },
+            {
+                label: "Campaign",
+                variables: [{ path: "campaign.beta", label: "beta", types: ["boolean"] }],
+            },
+        ])
+
+        expect([...new Set(conditions.map((c) => c.group))]).toEqual(["User", "Campaign"])
+        expect(conditions).toHaveLength(4)
+    })
+
+    // The guards are only useful if the engine the send pipeline runs accepts
+    // them, so exercise them as real templates rather than asserting on strings.
+    describe("the emitted Liquid", () => {
+        const [isTrue, isNotTrue] = toDisplayConditions([
+            {
+                label: "User",
+                variables: [{ path: "user.data.isPro", label: "data.isPro", types: ["boolean"] }],
+            },
+        ])
+
+        const render = (condition: { before: string; after: string }, context: object) =>
+            liquid.parseAndRenderSync(`${condition.before}BLOCK${condition.after}`, context)
+
+        it("shows the block to a matching recipient and hides it from the rest", () => {
+            expect(render(isTrue, { user: { data: { isPro: true } } })).toBe("BLOCK")
+            expect(render(isTrue, { user: { data: { isPro: false } } })).toBe("")
+            expect(render(isTrue, { user: { data: {} } })).toBe("")
+        })
+
+        it("treats an absent attribute the same as an explicit false", () => {
+            expect(render(isNotTrue, { user: { data: { isPro: false } } })).toBe("BLOCK")
+            expect(render(isNotTrue, { user: { data: {} } })).toBe("BLOCK")
+            expect(render(isNotTrue, { user: { data: { isPro: true } } })).toBe("")
+        })
+
+        it("is exhaustive — every recipient matches exactly one of the pair", () => {
+            for (const context of [
+                { user: { data: { isPro: true } } },
+                { user: { data: { isPro: false } } },
+                { user: { data: {} } },
+            ]) {
+                const shown = [isTrue, isNotTrue].filter((c) => render(c, context) === "BLOCK")
+                expect(shown).toHaveLength(1)
+            }
+        })
+    })
+})
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.ts b/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.ts
new file mode 100644
index 000000000..b23d5e768
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/displayConditions.ts
@@ -0,0 +1,68 @@
+import type { VariableGroup } from "@/views/journey/JourneyVariableContext"
+
+/** Templatical's display condition shape, kept local so the module owns the mapping. */
+export interface TemplaticalDisplayCondition {
+    label: string
+    before: string
+    after: string
+    group?: string
+    description?: string
+}
+
+/**
+ * Offer each boolean variable as a pair of display conditions for the editor.
+ *
+ * Templatical does not model conditions as field/operator/value — a condition is
+ * an opaque `before`/`after` markup pair the renderer wraps a block in, and the
+ * platform owns whatever is inside it. So the picker's contents are entirely
+ * ours to define, and a boolean attribute maps onto it directly: one condition
+ * to show a block when the flag is set, one to show it when it is not.
+ *
+ * The emitted Liquid is the same dialect the send pipeline runs
+ * (`osteele/liquid` server-side), so a condition authored here needs no
+ * translation on the way out. The renderer wraps the block's markup in
+ * `<mj-raw>` on both sides, which survives MJML compilation intact and leaves
+ * the guards balanced whether the block sits at the top level or inside a
+ * section column.
+ *
+ * Only variables whose sole schema type is boolean are offered. A path that the
+ * backend has seen hold more than one type is not reliably a flag, and while
+ * Liquid truthiness would still evaluate it, "is not true" on a field that is
+ * sometimes a string means something the label does not say.
+ */
+export function toDisplayConditions(groups: VariableGroup[]): TemplaticalDisplayCondition[] {
+    return groups.flatMap((group) =>
+        group.variables
+            .filter((variable) => isBoolean(variable.types))
+            .flatMap((variable) => [
+                {
+                    // "is true" rather than "is set": the block shows only for a
+                    // true value, where "set" would just as readily be read as
+                    // "has a value", which an explicit false also satisfies.
+                    label: `${variable.label} is true`,
+                    before: `{% if ${variable.path} %}`,
+                    after: "{% endif %}",
+                    group: group.label,
+                    description: `Only shown when ${variable.path} is true`,
+                },
+                {
+                    // `unless` rather than `if … == false` so the condition also
+                    // covers recipients the attribute was never set on. Those users
+                    // are indistinguishable from an explicit false to the reader of
+                    // the email, and treating them as such is what makes the pair
+                    // exhaustive — every recipient matches exactly one of the two.
+                    // "is not true" is the label that admits both, where "is false"
+                    // would claim an explicit value the recipient may not have.
+                    label: `${variable.label} is not true`,
+                    before: `{% unless ${variable.path} %}`,
+                    after: "{% endunless %}",
+                    group: group.label,
+                    description: `Only shown when ${variable.path} is false or not set`,
+                },
+            ]),
+    )
+}
+
+function isBoolean(types: string[] | undefined): boolean {
+    return types?.length === 1 && types[0] === "boolean"
+}
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.test.ts b/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.test.ts
new file mode 100644
index 000000000..ef89572b8
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest"
+import {
+    exportFileName,
+    parseTemplaticalDocument,
+    serializeTemplaticalDocument,
+} from "./documentJson"
+
+const doc = { blocks: [{ type: "title", id: "a" }], settings: { backgroundColor: "#fff" } }
+
+describe("parseTemplaticalDocument", () => {
+    it("accepts a document and returns it", () => {
+        const result = parseTemplaticalDocument(JSON.stringify(doc))
+
+        expect(result.ok).toBe(true)
+        expect(result.ok && result.doc).toEqual(doc)
+    })
+
+    it("accepts an empty document", () => {
+        // createDefaultTemplateContent() produces zero blocks, so an empty
+        // template is legitimate and must survive a round trip.
+        const result = parseTemplaticalDocument(JSON.stringify({ blocks: [], settings: {} }))
+
+        expect(result.ok).toBe(true)
+    })
+
+    it("keeps block shapes it does not recognise", () => {
+        // A document written by a newer editor may carry blocks this console
+        // knows nothing about. Rejecting them would make exports one-way.
+        const future = { blocks: [{ type: "custom:qrcode", payload: { v: 1 } }], settings: {} }
+        const result = parseTemplaticalDocument(JSON.stringify(future))
+
+        expect(result.ok).toBe(true)
+        expect(result.ok && result.doc).toEqual(future)
+    })
+
+    it("rejects empty input", () => {
+        expect(parseTemplaticalDocument("   ")).toEqual({ ok: false, error: "Nothing to import." })
+    })
+
+    it("rejects malformed JSON with the parser's reason", () => {
+        const result = parseTemplaticalDocument("{ nope")
+
+        expect(result.ok).toBe(false)
+        expect(result.ok === false && result.error).toMatch(/^Not valid JSON: /)
+    })
+
+    it("rejects JSON that is not a template document", () => {
+        for (const input of [
+            '"a string"',
+            "[]",
+            "null",
+            JSON.stringify({ blocks: [] }),
+            JSON.stringify({ settings: {} }),
+            JSON.stringify({ blocks: {}, settings: {} }),
+            JSON.stringify({ blocks: [], settings: [] }),
+        ]) {
+            const result = parseTemplaticalDocument(input)
+            expect(result.ok, `expected ${input} to be rejected`).toBe(false)
+        }
+    })
+})
+
+describe("serializeTemplaticalDocument", () => {
+    it("round-trips through the parser", () => {
+        const result = parseTemplaticalDocument(serializeTemplaticalDocument(doc))
+
+        expect(result.ok && result.doc).toEqual(doc)
+    })
+})
+
+describe("exportFileName", () => {
+    it("slugifies the campaign and locale", () => {
+        expect(exportFileName("Welcome Email", "de-DE")).toBe("welcome-email-de-de.json")
+    })
+
+    it("collapses punctuation without leaving stray separators", () => {
+        expect(exportFileName("Spring / Summer '26!", "en")).toBe("spring-summer-26-en.json")
+    })
+
+    it("falls back when there is nothing usable to name it after", () => {
+        expect(exportFileName("", "")).toBe("email-template.json")
+        expect(exportFileName("!!!", "")).toBe("email-template.json")
+    })
+})
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.ts b/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.ts
new file mode 100644
index 000000000..d6e17bacc
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/documentJson.ts
@@ -0,0 +1,87 @@
+/**
+ * Reading and writing the visual editor's document as portable JSON.
+ *
+ * Templatical stores a template as `{ blocks, settings }`, which is the whole
+ * point of the format — it moves between templates, campaigns and instances
+ * unchanged. These helpers are the console's import/export ends of that.
+ *
+ * Validation is structural rather than exhaustive: it mirrors the check the
+ * renderer makes (`isTemplaticalDocument` in `renderer/templatical.ts`) so the
+ * console rejects the same documents the backend would fail to compile. It
+ * deliberately does not validate individual blocks — the editor tolerates block
+ * shapes this console does not know about, and rejecting them here would break
+ * documents written by a newer version.
+ */
+
+/** Shape every Templatical document has, whatever its blocks contain. */
+interface TemplaticalDocumentShape {
+    blocks: unknown[]
+    settings: Record<string, unknown>
+}
+
+export type ParseResult = { ok: true; doc: Record<string, unknown> } | { ok: false; error: string }
+
+/**
+ * Parse pasted or uploaded JSON into a document safe to hand to the editor.
+ *
+ * Returns a message rather than throwing, because every failure here is user
+ * input that needs explaining rather than a bug.
+ */
+export function parseTemplaticalDocument(text: string): ParseResult {
+    const trimmed = text.trim()
+    if (!trimmed) return { ok: false, error: "Nothing to import." }
+
+    let parsed: unknown
+    try {
+        parsed = JSON.parse(trimmed)
+    } catch (error) {
+        return {
+            ok: false,
+            error: `Not valid JSON: ${error instanceof Error ? error.message : String(error)}`,
+        }
+    }
+
+    if (!isDocumentShape(parsed)) {
+        return {
+            ok: false,
+            error: 'Not a template document — expected an object with a "blocks" array and a "settings" object.',
+        }
+    }
+
+    return { ok: true, doc: parsed as unknown as Record<string, unknown> }
+}
+
+/** Serialize a document for the clipboard or a downloaded file. */
+export function serializeTemplaticalDocument(doc: unknown): string {
+    return JSON.stringify(doc, null, 2)
+}
+
+/**
+ * Build a filename for an exported document, e.g. `welcome-email-de-DE.json`.
+ *
+ * Falls back to a generic name when the campaign has no usable name, so the
+ * download never lands as `.json` with an empty stem.
+ */
+export function exportFileName(campaignName: string, locale: string): string {
+    // Slugify the joined string rather than each part: slugifying first would
+    // leave a separator behind on a part ending in punctuation, and joining
+    // would then double it up.
+    const stem = [campaignName, locale]
+        .join(" ")
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+
+    return `${stem || "email-template"}.json`
+}
+
+function isDocumentShape(value: unknown): value is TemplaticalDocumentShape {
+    if (typeof value !== "object" || value === null) return false
+    const candidate = value as Partial<TemplaticalDocumentShape>
+    return (
+        Array.isArray(candidate.blocks) &&
+        typeof candidate.settings === "object" &&
+        candidate.settings !== null &&
+        !Array.isArray(candidate.settings)
+    )
+}
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.test.ts b/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.test.ts
new file mode 100644
index 000000000..5ee43399f
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest"
+import { toMergeTags } from "./mergeTags"
+
+describe("toMergeTags", () => {
+    it("maps a variable path to the liquid expression the send pipeline resolves", () => {
+        const tags = toMergeTags([
+            {
+                label: "User",
+                variables: [{ path: "user.first_name", label: "First name", types: ["string"] }],
+            },
+        ])
+
+        expect(tags).toEqual([
+            {
+                label: "First name",
+                value: "{{ user.first_name }}",
+                group: "User",
+                description: undefined,
+            },
+        ])
+    })
+
+    it("groups tags by their variable group and keeps descriptions", () => {
+        const tags = toMergeTags([
+            {
+                label: "User",
+                variables: [{ path: "user.email", label: "Email", description: "Primary" }],
+            },
+            {
+                label: "Links",
+                variables: [{ path: "unsubscribe_url", label: "Unsubscribe" }],
+            },
+        ])
+
+        expect(tags.map((tag) => [tag.group, tag.value])).toEqual([
+            ["User", "{{ user.email }}"],
+            ["Links", "{{ unsubscribe_url }}"],
+        ])
+        expect(tags[0].description).toBe("Primary")
+    })
+
+    it("drops object and array variables, which have no scalar rendering", () => {
+        const tags = toMergeTags([
+            {
+                label: "User",
+                variables: [
+                    { path: "user.data", label: "Data", types: ["object"] },
+                    { path: "user.tags", label: "Tags", types: ["array"] },
+                    { path: "user.id", label: "ID", types: ["string"] },
+                ],
+            },
+        ])
+
+        expect(tags.map((tag) => tag.value)).toEqual(["{{ user.id }}"])
+    })
+
+    it("keeps variables whose type is unknown or partly scalar", () => {
+        const tags = toMergeTags([
+            {
+                label: "Event",
+                variables: [
+                    { path: "event.count", label: "Count" },
+                    { path: "event.mixed", label: "Mixed", types: ["object", "string"] },
+                ],
+            },
+        ])
+
+        expect(tags).toHaveLength(2)
+    })
+})
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.ts b/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.ts
new file mode 100644
index 000000000..c3ded2508
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/mergeTags.ts
@@ -0,0 +1,38 @@
+import type { VariableGroup } from "@/views/journey/JourneyVariableContext"
+
+/** Templatical's merge tag shape, kept local so the module owns the mapping. */
+export interface TemplaticalMergeTag {
+    label: string
+    value: string
+    group?: string
+    description?: string
+}
+
+/**
+ * Map the campaign's variable groups onto Templatical's merge tag picker.
+ *
+ * The editor is configured with the `liquid` syntax preset, so a tag's `value`
+ * is the same `{{ path }}` expression the send pipeline resolves — nothing
+ * translates between the two. `label` is what the editor canvas displays in
+ * place of the raw expression.
+ *
+ * Object and array variables are dropped: they have no scalar rendering, so
+ * inserting one would emit `[object Object]` into the email.
+ */
+export function toMergeTags(groups: VariableGroup[]): TemplaticalMergeTag[] {
+    return groups.flatMap((group) =>
+        group.variables
+            .filter((variable) => !isNonScalar(variable.types))
+            .map((variable) => ({
+                label: variable.label,
+                value: `{{ ${variable.path} }}`,
+                group: group.label,
+                description: variable.description,
+            })),
+    )
+}
+
+function isNonScalar(types: string[] | undefined): boolean {
+    if (!types?.length) return false
+    return types.every((type) => type === "object" || type === "array")
+}
diff --git a/console/src/views/campaign/template/mail/editor/blockEditor/useConsoleTheme.ts b/console/src/views/campaign/template/mail/editor/blockEditor/useConsoleTheme.ts
new file mode 100644
index 000000000..d7d2ffd7a
--- /dev/null
+++ b/console/src/views/campaign/template/mail/editor/blockEditor/useConsoleTheme.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Tracks the console's light/dark appearance.
+ *
+ * The console signals dark mode with a `dark` class on `<html>` (see the
+ * `@custom-variant dark` rule in index.css). Nothing sets that class today —
+ * PreferencesContext pins `mode` to "light" and its theme effect is commented
+ * out — so this currently always reports "light". Reading the class rather
+ * than the preference means the editor follows automatically once dark mode is
+ * wired up, with no further change here.
+ *
+ * The same detect-plus-observe pattern is used by `components/ui/code-editor`
+ * and `components/ui/map`; worth extracting to a shared hook if a fourth
+ * consumer appears.
+ */
+export function useConsoleTheme(): "light" | "dark" {
+    const [theme, setTheme] = useState<"light" | "dark">(() =>
+        document.documentElement.classList.contains("dark") ? "dark" : "light",
+    )
+
+    useEffect(() => {
+        const observer = new MutationObserver(() => {
+            setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light")
+        })
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        })
+        return () => observer.disconnect()
+    }, [])
+
+    return theme
+}
diff --git a/console/src/views/campaign/template/mail/editor/codeEditor/CodeEditor.tsx b/console/src/views/campaign/template/mail/editor/codeEditor/CodeEditor.tsx
index 44db70690..2853d962d 100644
--- a/console/src/views/campaign/template/mail/editor/codeEditor/CodeEditor.tsx
+++ b/console/src/views/campaign/template/mail/editor/codeEditor/CodeEditor.tsx
@@ -1,4 +1,13 @@
-import { useCallback, useContext, useEffect, useRef, useState, lazy, Suspense } from "react"
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    lazy,
+    Suspense,
+} from "react"
 import { Editor } from "@monaco-editor/react"
 import {
     Smartphone,
@@ -13,7 +22,11 @@ import {
     Crosshair,
     LayoutGrid,
     AlertTriangle,
+    Loader2,
+    Upload,
+    Download,
 } from "lucide-react"
+import { toast } from "sonner"
 
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
 import { Button } from "@/components/ui/button"
@@ -42,6 +55,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Badge } from "@/components/ui/badge"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
 import {
     Select,
     SelectTrigger,
@@ -55,6 +69,7 @@ import { TemplateInput } from "@/components/ui/template-input"
 import { cn } from "@/utils"
 
 import { CampaignContext, ProjectContext, TemplateContext } from "@/contexts"
+import { TemplateWorkflowContext } from "../../../contexts"
 import { useCampaignVariableContext } from "@/views/campaign/CampaignVariableContext"
 
 import { PlainTextEditor, type PlainTextEditorRef } from "./PlainTextEditor"
@@ -64,12 +79,23 @@ import { MediaManager } from "@/components/media-manager"
 import { EditorToolbar } from "./EditorToolbar"
 import { TabButton, PreviewTab } from "./TabButton"
 import { DEFAULT_REACT_EMAIL_TEMPLATE } from "./defaultTemplate"
+import {
+    resolveMergeTags,
+    templaticalPlainText,
+    templaticalPreviewHtml,
+} from "@/lib/templatical-preview"
+import Iframe from "@/components/iframe"
 import { UserSelection } from "../../../UserSelection"
 
 import type { Viewport, EditorTab } from "./types"
 import { VIEWPORT_WIDTHS } from "./types"
 import { isEnterprise } from "@/config/enterprise"
-import type { EmailDocument, BlockEditorTab } from "./hooks/useEditorMode"
+import type { EmailDocument, BlockEditorTab, BlockEditorHandle } from "./hooks/useEditorMode"
+import {
+    exportFileName,
+    parseTemplaticalDocument,
+    serializeTemplaticalDocument,
+} from "../blockEditor/documentJson"
 
 import {
     BuilderProvider,
@@ -172,12 +198,21 @@ const LazyBlockEditorWrapped = __ENTERPRISE__
               },
           })),
       )
-    : null
+    : lazy(() =>
+          import("../blockEditor/TemplaticalBlockEditor").then((mod) => ({
+              default: mod.TemplaticalBlockEditor,
+          })),
+      )
 
 // Extracted hooks
 import { useCompilation } from "./hooks/useCompilation"
 import { usePreviewProps } from "../hooks/usePreviewProps"
-import { useEditorMode, getInitialEditorMode, type EditorMode } from "./hooks/useEditorMode"
+import {
+    useEditorMode,
+    getInitialEditorMode,
+    BLOCKS_MODE,
+    type EditorMode,
+} from "./hooks/useEditorMode"
 import { useSendTestEmail } from "../hooks/useSendTestEmail"
 import { useMonacoSetup } from "./hooks/useMonacoSetup"
 import { useInsertActions } from "./hooks/useInsertActions"
@@ -281,21 +316,19 @@ function ModeToggle({
 }) {
     return (
         <div className="flex items-center gap-1">
-            {isEnterprise && (
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <Button
-                            variant={editorMode === "blocks" ? "secondary" : "ghost"}
-                            size="sm"
-                            className="h-8 w-8 p-0"
-                            onClick={() => onModeSwitch("blocks")}
-                        >
-                            <LayoutGrid className="h-4 w-4" />
-                        </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>Block Editor</TooltipContent>
-                </Tooltip>
-            )}
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant={editorMode === BLOCKS_MODE ? "secondary" : "ghost"}
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => onModeSwitch(BLOCKS_MODE)}
+                    >
+                        <LayoutGrid className="h-4 w-4" />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>Visual Editor</TooltipContent>
+            </Tooltip>
             <Tooltip>
                 <TooltipTrigger asChild>
                     <Button
@@ -377,6 +410,90 @@ function ModeSwitchDialog({
     )
 }
 
+/**
+ * Paste or upload a Templatical document to replace the current one.
+ *
+ * Import replaces the whole document rather than merging: the format has no
+ * meaningful merge, and a partial import would leave the template in a state
+ * neither the user nor the renderer could reason about.
+ */
+function ImportDocumentDialog({
+    open,
+    onOpenChange,
+    value,
+    onValueChange,
+    error,
+    fileInputRef,
+    onFileSelected,
+    onApply,
+}: {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    value: string
+    onValueChange: (value: string) => void
+    error: string | null
+    fileInputRef: React.RefObject<HTMLInputElement | null>
+    onFileSelected: (file: File) => void
+    onApply: () => void
+}) {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-xl">
+                <DialogHeader>
+                    <DialogTitle>Import template JSON</DialogTitle>
+                    <DialogDescription>
+                        Paste a document exported from another template, or choose a{" "}
+                        <code>.json</code> file. This replaces the current layout — it is not saved
+                        until you save the template.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Textarea
+                    value={value}
+                    onChange={(e) => onValueChange(e.target.value)}
+                    placeholder='{ "blocks": [ … ], "settings": { … } }'
+                    className="h-56 font-mono text-xs"
+                    aria-label="Template JSON"
+                />
+
+                {error && (
+                    <p className="flex items-start gap-1.5 text-sm text-destructive" role="alert">
+                        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                        {error}
+                    </p>
+                )}
+
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="application/json,.json"
+                    className="hidden"
+                    onChange={(e) => {
+                        const file = e.target.files?.[0]
+                        if (file) onFileSelected(file)
+                        // Clear so picking the same file twice still fires.
+                        e.target.value = ""
+                    }}
+                />
+
+                <DialogFooter className="sm:flex-row sm:justify-between sm:gap-2">
+                    <Button variant="outline" onClick={() => fileInputRef.current?.click()}>
+                        Choose file…
+                    </Button>
+                    <div className="flex gap-2">
+                        <Button variant="outline" onClick={() => onOpenChange(false)}>
+                            Cancel
+                        </Button>
+                        <Button onClick={onApply} disabled={!value.trim()}>
+                            Import
+                        </Button>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
 function PreviewToolbar({
     viewport,
     setViewport,
@@ -478,14 +595,21 @@ function CodeEditorInner() {
     const [project] = useContext(ProjectContext)
     const [campaign] = useContext(CampaignContext)
     const [template] = useContext(TemplateContext)
-    const { variableGroups } = useCampaignVariableContext()
+    const { save } = useContext(TemplateWorkflowContext)
+    const { variableGroups, variablesReady } = useCampaignVariableContext()
     const { selectSection, deselectSection } = useBuilderActionsOptional()
 
     const plainTextEditorRef = useRef<PlainTextEditorRef | null>(null)
 
-    // Editor state — shared between code editor and builder
+    const initialEditorMode = getInitialEditorMode(template?.data)
+
+    // Editor state — shared between code editor and builder. A template
+    // authored visually has no JSX and must not be seeded with the starter
+    // template: persistence would then store it as code.source and the
+    // starter would resurface if the user ever switched to the code editor.
     const [code, setCode] = useState<string>(
-        template?.data?.code?.source ?? DEFAULT_REACT_EMAIL_TEMPLATE,
+        template?.data?.code?.source ??
+            (initialEditorMode === BLOCKS_MODE ? "" : DEFAULT_REACT_EMAIL_TEMPLATE),
     )
 
     // Plain text state
@@ -532,7 +656,7 @@ function CodeEditorInner() {
         cancelModeSwitch,
         handleBlocksChange,
     } = useEditorMode({
-        initialMode: getInitialEditorMode(template?.data),
+        initialMode: initialEditorMode,
         code,
         setCode,
         editorRef,
@@ -541,6 +665,129 @@ function CodeEditorInner() {
 
     const { compiledHtml, compileError, autoPlainText } = useCompilation(code, previewProps)
 
+    // A visually authored template is rendered by the backend, which also
+    // derives its plain text, so the value lands in the bundle at save time.
+    // It therefore reflects the last save rather than unsaved edits.
+    //
+    // Display only — the persisted `plaintext.generated` comes from
+    // `autoPlainText`, so substituting preview values here cannot leak into a
+    // send. Resolved against the same context as the HTML preview below, so the
+    // two tabs agree.
+    const blocksPlainText = useMemo(() => {
+        const text = templaticalPlainText(template?.data?.code?.bundle)
+        if (!text || !selectedUser) return text
+        return resolveMergeTags(text, previewProps)
+        // @ts-expect-error data is a channel union; code exists on the email arm.
+    }, [template?.data?.code?.bundle, selectedUser, previewProps])
+
+    // The rendered email with the selected recipient's data substituted. The
+    // HTML comes from the backend render and carries merge tags literally, so
+    // resolving them here runs the same Liquid pass the send pipeline does.
+    // With no user selected the tags stay visible, which is the honest default.
+    //
+    // The context is the full `previewProps` rather than just the user: the
+    // merge-tag picker also offers campaign variables, `unsubscribe_url`,
+    // `preferences_url` and `now`, none of which resolve under a user-only
+    // scope. `previewProps` already carries sample values for every variable
+    // group with the selected recipient merged in — the same object the code
+    // editor renders with, and the one its props.json panel shows.
+    const blocksPreviewHtml = useMemo(() => {
+        const html = templaticalPreviewHtml(template?.data?.code?.bundle)
+        if (!html || !selectedUser) return html
+        return resolveMergeTags(html, previewProps)
+        // @ts-expect-error data is a channel union; code exists on the email arm.
+    }, [template?.data?.code?.bundle, selectedUser, previewProps])
+
+    // Both preview panels render what the backend produced at save time, so
+    // opening one without saving first shows the previous edit. Persist on the
+    // way in — the same thing "Send test" does before dispatching, and for the
+    // same reason. Saving is idempotent, so an unchanged template just costs a
+    // round trip.
+    const [previewSyncing, setPreviewSyncing] = useState(false)
+    const handleBlockEditorTabChange = useCallback(
+        (tab: BlockEditorTab) => {
+            setBlockEditorTab(tab)
+            if (tab === "editor") return
+
+            setPreviewSyncing(true)
+            void (async () => {
+                try {
+                    if (!(await save())) {
+                        toast.error("Couldn't refresh the preview — saving the template failed")
+                    }
+                } catch {
+                    toast.error("Couldn't refresh the preview — saving the template failed")
+                } finally {
+                    setPreviewSyncing(false)
+                }
+            })()
+        },
+        [setBlockEditorTab, save],
+    )
+
+    // --- Document import/export -------------------------------------------
+    // The document is portable JSON by design, so moving one between templates
+    // needs no server support: export reads the copy already in `blocksData`,
+    // and import pushes one into the mounted editor.
+    const blockEditorHandleRef = useRef<BlockEditorHandle | null>(null)
+    const [importOpen, setImportOpen] = useState(false)
+    const [importText, setImportText] = useState("")
+    const [importError, setImportError] = useState<string | null>(null)
+    const importFileRef = useRef<HTMLInputElement>(null)
+
+    const handleCopyDocument = useCallback(async () => {
+        if (!blocksData) return
+        try {
+            await navigator.clipboard.writeText(serializeTemplaticalDocument(blocksData))
+            toast.success("Template JSON copied to clipboard")
+        } catch {
+            toast.error("Couldn't copy to the clipboard")
+        }
+    }, [blocksData])
+
+    const handleDownloadDocument = useCallback(() => {
+        if (!blocksData) return
+        const blob = new Blob([serializeTemplaticalDocument(blocksData)], {
+            type: "application/json",
+        })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = exportFileName(campaign.name, template.locale)
+        link.click()
+        URL.revokeObjectURL(url)
+    }, [blocksData, campaign.name, template.locale])
+
+    const handleImportFile = useCallback((file: File) => {
+        void file
+            .text()
+            .then((text) => {
+                setImportText(text)
+                setImportError(null)
+            })
+            .catch(() => setImportError("Couldn't read that file."))
+    }, [])
+
+    const handleApplyImport = useCallback(() => {
+        const result = parseTemplaticalDocument(importText)
+        if (!result.ok) {
+            setImportError(result.error)
+            return
+        }
+
+        const handle = blockEditorHandleRef.current
+        if (!handle) {
+            setImportError("The editor is still loading — try again in a moment.")
+            return
+        }
+
+        handle.setContent(result.doc)
+        setImportOpen(false)
+        setImportText("")
+        setImportError(null)
+        toast.success("Template imported. Save to keep it.")
+    }, [importText])
+
     const { sending, handleSendTest } = useSendTestEmail({
         previewProps,
         projectId: project.id,
@@ -596,14 +843,74 @@ function CodeEditorInner() {
                             icon={<LayoutGrid className="h-4 w-4" />}
                             label="Editor"
                         />
+                        {!isEnterprise && (
+                            <TabButton
+                                active={blockEditorTab === "preview"}
+                                onClick={() => handleBlockEditorTabChange("preview")}
+                                icon={<Eye className="h-4 w-4" />}
+                                label="Preview"
+                            />
+                        )}
                         <TabButton
                             active={blockEditorTab === "preview-text"}
-                            onClick={() => setBlockEditorTab("preview-text")}
+                            onClick={() => handleBlockEditorTabChange("preview-text")}
                             icon={<FileText className="h-4 w-4" />}
                             label="Preview Text"
                         />
+                        {previewSyncing && (
+                            <span
+                                className="flex items-center gap-1.5 pl-2 text-xs text-muted-foreground"
+                                role="status"
+                            >
+                                <Loader2 className="h-3 w-3 animate-spin" />
+                                Updating preview…
+                            </span>
+                        )}
                     </div>
                     <div className="flex items-center gap-1 pr-3">
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-8 w-8 p-0"
+                                    onClick={() => {
+                                        setImportText("")
+                                        setImportError(null)
+                                        setImportOpen(true)
+                                    }}
+                                >
+                                    <Upload className="h-4 w-4" />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>Import JSON</TooltipContent>
+                        </Tooltip>
+                        <DropdownMenu>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <DropdownMenuTrigger asChild>
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            className="h-8 w-8 p-0"
+                                            disabled={!blocksData}
+                                        >
+                                            <Download className="h-4 w-4" />
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                </TooltipTrigger>
+                                <TooltipContent>Export JSON</TooltipContent>
+                            </Tooltip>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem onSelect={() => void handleCopyDocument()}>
+                                    Copy to clipboard
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onSelect={handleDownloadDocument}>
+                                    Download .json
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                        <div className="mx-1 h-4 w-px bg-border" />
                         <ModeToggle editorMode={editorMode} onModeSwitch={handleModeSwitch} />
                         <div className="mx-1 h-4 w-px bg-border" />
                         <UserSelection
@@ -628,16 +935,66 @@ function CodeEditorInner() {
                 </div>
 
                 <div className="flex-1 min-h-0">
-                    {LazyBlockEditorWrapped && (
-                        <Suspense fallback={<div className="flex-1" />}>
-                            <LazyBlockEditorWrapped
-                                initialDocument={blocksData ?? undefined}
-                                onChange={handleBlocksChange}
-                                activeTab={blockEditorTab}
-                                onTabChange={setBlockEditorTab}
-                                variableGroups={variableGroups}
-                            />
-                        </Suspense>
+                    {/* The enterprise block editor renders the plain-text tab
+                        itself; Templatical does not, so the host swaps panels.
+                        Keep the editor mounted underneath — remounting it on
+                        every tab change would discard undo history. */}
+                    {/* Wait for the schema fetch before mounting. The editor
+                        reads its merge tags and display conditions once, at
+                        init, and exposes no way to update them afterwards — so
+                        mounting while `variableGroups` still holds only the
+                        hardcoded base variables pins it to those for the rest
+                        of the session. That is invisible for merge tags, which
+                        keep working minus the project's own attributes, but
+                        total for display conditions: none of the base variables
+                        is a boolean, so the editor is handed an empty list and
+                        hides the control entirely. */}
+                    <div className={cn("h-full", blockEditorTab !== "editor" && "hidden")}>
+                        {LazyBlockEditorWrapped && variablesReady && (
+                            <Suspense fallback={<div className="flex-1" />}>
+                                <LazyBlockEditorWrapped
+                                    initialDocument={blocksData ?? undefined}
+                                    onChange={handleBlocksChange}
+                                    activeTab={blockEditorTab}
+                                    onTabChange={handleBlockEditorTabChange}
+                                    variableGroups={variableGroups}
+                                    onReady={(handle: BlockEditorHandle | null) => {
+                                        blockEditorHandleRef.current = handle
+                                    }}
+                                />
+                            </Suspense>
+                        )}
+                    </div>
+                    {!isEnterprise && blockEditorTab === "preview" && (
+                        <div className="h-full w-full overflow-auto bg-muted/20 p-6">
+                            <div className="mx-auto max-w-[700px] bg-white shadow-sm">
+                                {/* An iframe with no width/height falls back to
+                                    the CSS default 300x150, which squeezes the
+                                    email's 600px body and wraps headings
+                                    mid-word. Fill the frame and let it grow to
+                                    the content, so this container does the
+                                    scrolling. */}
+                                <Iframe
+                                    content={blocksPreviewHtml}
+                                    allowScroll={false}
+                                    fullHeight
+                                    width="100%"
+                                />
+                            </div>
+                        </div>
+                    )}
+                    {!isEnterprise && blockEditorTab === "preview-text" && (
+                        <PlainTextEditor
+                            ref={plainTextEditorRef}
+                            autoText={blocksPlainText}
+                            customText={customPlainText}
+                            onCustomTextChange={setCustomPlainText}
+                            useCustom={useCustomPlainText}
+                            onToggleCustom={setUseCustomPlainText}
+                            onImageClick={() => setImageModalOpen(true)}
+                            onInsertVariable={insertVariable}
+                            variableGroups={variableGroups}
+                        />
                     )}
                 </div>
 
@@ -654,6 +1011,19 @@ function CodeEditorInner() {
                     onOpenChange={setImageModalOpen}
                     onSelect={insertImage}
                 />
+                <ImportDocumentDialog
+                    open={importOpen}
+                    onOpenChange={setImportOpen}
+                    value={importText}
+                    onValueChange={(value) => {
+                        setImportText(value)
+                        setImportError(null)
+                    }}
+                    error={importError}
+                    fileInputRef={importFileRef}
+                    onFileSelected={handleImportFile}
+                    onApply={handleApplyImport}
+                />
             </div>
         )
     }
diff --git a/console/src/views/campaign/template/mail/editor/codeEditor/hooks/useEditorMode.ts b/console/src/views/campaign/template/mail/editor/codeEditor/hooks/useEditorMode.ts
index 07ee8c605..e35724067 100644
--- a/console/src/views/campaign/template/mail/editor/codeEditor/hooks/useEditorMode.ts
+++ b/console/src/views/campaign/template/mail/editor/codeEditor/hooks/useEditorMode.ts
@@ -3,15 +3,36 @@ import type { editor } from "monaco-editor"
 import { isEnterprise } from "@/config/enterprise"
 
 /**
- * Minimal local type aliases for the block editor data model.
- * The full types live in @lunogram-enterprise/block-editor (enterprise only).
- * These are kept intentionally opaque — the hooks only pass them around.
+ * The visual editor's document, kept opaque here — these hooks only pass it
+ * around. Its concrete shape is Templatical's `TemplateContent`.
  */
 export type EmailDocument = Record<string, unknown>
-export type BlockEditorTab = "editor" | "preview-text"
+
+/**
+ * Imperative operations the blocks toolbar needs from a mounted block editor.
+ *
+ * Declared against the opaque `EmailDocument` so the host toolbar never has to
+ * name Templatical's concrete types — the implementation adapts at its own
+ * boundary.
+ */
+export interface BlockEditorHandle {
+    setContent: (doc: EmailDocument) => void
+}
+/**
+ * Panels of the visual editor. "preview" is open-source only — the enterprise
+ * block editor renders its own preview and only knows the other two.
+ */
+export type BlockEditorTab = "editor" | "preview" | "preview-text"
+
+/**
+ * Identifier for the visual editing mode, persisted per template in
+ * `data.editorMode`. Declared once so renaming the mode is a single edit plus
+ * a read-side alias in getInitialEditorMode for already-stored templates.
+ */
+export const BLOCKS_MODE = "blocks"
 
 /** The top-level editing mode: code editor, AI builder, or block editor */
-export type EditorMode = "code" | "builder" | "blocks"
+export type EditorMode = "code" | "builder" | typeof BLOCKS_MODE
 
 interface UseEditorModeOptions {
     initialMode: EditorMode
@@ -32,7 +53,7 @@ export interface UseEditorModeResult {
     handleModeSwitch: (mode: EditorMode) => void
     confirmModeSwitch: () => void
     cancelModeSwitch: () => void
-    handleBlocksChange: (doc: EmailDocument, jsxSource: string) => void
+    handleBlocksChange: (doc: EmailDocument, jsxSource?: string) => void
 }
 
 /**
@@ -86,11 +107,11 @@ export function useEditorMode({
     const confirmModeSwitch = useCallback(() => {
         if (!pendingMode) return
 
-        const leavingBlocks = editorMode === "blocks"
-
-        if (leavingBlocks) {
-            setBlocksData(null)
-        }
+        // The document is deliberately kept when leaving the visual editor.
+        // The JSX survives a switch in the other direction (persistence always
+        // writes code.source), so keeping both makes the switch reversible in
+        // both directions and nothing the user authored is destroyed. Only
+        // data.type decides which one the backend compiles.
 
         if (pendingMode === "code" && editorRef.current) {
             const model = editorRef.current.getModel()
@@ -104,16 +125,22 @@ export function useEditorMode({
             setSelectorActive(false)
         }
         setPendingMode(null)
-    }, [pendingMode, editorMode, editorRef])
+    }, [pendingMode, editorRef])
 
     const cancelModeSwitch = useCallback(() => {
         setPendingMode(null)
     }, [])
 
     const handleBlocksChange = useCallback(
-        (doc: EmailDocument, jsxSource: string) => {
+        (doc: EmailDocument, jsxSource?: string) => {
             setBlocksData(doc)
-            setCode(jsxSource)
+            // The enterprise block editor emits a JSX representation of the
+            // document. Templatical has none — the backend renders its document
+            // to HTML directly — so `code` is left untouched, which also
+            // preserves any JSX the template had before switching.
+            if (jsxSource !== undefined) {
+                setCode(jsxSource)
+            }
         },
         [setCode],
     )
@@ -140,8 +167,10 @@ export function getInitialEditorMode(
     templateData: Record<string, unknown> | undefined,
 ): EditorMode {
     const stored = templateData?.editorMode as EditorMode | undefined
-    if (stored === "blocks" && isEnterprise) return "blocks"
+    if (stored === BLOCKS_MODE) return BLOCKS_MODE
     if (stored === "builder" && isEnterprise) return "builder"
     if (stored === "code") return "code"
-    return isEnterprise ? "blocks" : "code"
+    // Templates saved before a mode was recorded are React Email. Anything
+    // created from now on has its mode chosen at creation time.
+    return "code"
 }
diff --git a/console/src/views/campaign/template/mail/editor/hooks/useTemplatePersistence.ts b/console/src/views/campaign/template/mail/editor/hooks/useTemplatePersistence.ts
index 4b928242d..4d01d2628 100644
--- a/console/src/views/campaign/template/mail/editor/hooks/useTemplatePersistence.ts
+++ b/console/src/views/campaign/template/mail/editor/hooks/useTemplatePersistence.ts
@@ -3,6 +3,7 @@ import { TemplateWorkflowContext } from "../../../contexts"
 import { CampaignContext, ProjectContext, TemplateContext } from "@/contexts"
 import type { EmailDocument } from "../codeEditor/hooks/useEditorMode"
 import type { EditorMode } from "../codeEditor/hooks/useEditorMode"
+import { BLOCKS_MODE } from "../codeEditor/hooks/useEditorMode"
 import api from "@/api"
 
 interface UseTemplatePersistenceOptions {
@@ -40,12 +41,18 @@ export function useTemplatePersistence({
                 {
                     data: {
                         ...template.data,
-                        type: "react-email",
+                        // Selects which document the backend compiles. It must
+                        // follow the mode: left pinned to react-email, a
+                        // template switched to the visual editor would save its
+                        // document but keep compiling stale JSX.
+                        type: editorMode === BLOCKS_MODE ? "templatical" : "react-email",
                         editorMode,
                         code: {
                             source: code,
                         },
-                        ...(blocksData ? { blocks: blocksData } : { blocks: undefined }),
+                        // Both representations are kept once they exist, so
+                        // switching modes never destroys the other one.
+                        ...(blocksData ? { blocks: blocksData } : {}),
                         plaintext: {
                             generated: autoPlainText,
                             ...(useCustomPlainText && customPlainText
diff --git a/console/vite.config.ts b/console/vite.config.ts
index 7d275f809..a0ef79fb9 100644
--- a/console/vite.config.ts
+++ b/console/vite.config.ts
@@ -297,6 +297,12 @@ export default defineConfig(({ mode }) => {
         resolve: {
             alias: {
                 "@": path.resolve(__dirname, "./src"),
+                // @templatical/editor's cloud chunk dynamically imports
+                // pusher-js, which is not one of its declared dependencies.
+                // Only initCloud() reaches it and the console uses the
+                // self-hosted init(), so stub it out rather than bundling a
+                // realtime transport we never call. See src/stubs/pusher-js.ts.
+                "pusher-js": path.resolve(__dirname, "./src/stubs/pusher-js.ts"),
             },
             // Deduplicate React across the monorepo so that workspace
             // packages (e.g. block-editor) share the same React instance
diff --git a/internal/http/controllers/v1/management/templates.go b/internal/http/controllers/v1/management/templates.go
index 335e247aa..0b40b83b0 100644
--- a/internal/http/controllers/v1/management/templates.go
+++ b/internal/http/controllers/v1/management/templates.go
@@ -49,6 +49,23 @@ func (t *templateDataEnvelope) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+// compileSource returns the source the renderer should compile. Which field
+// holds it depends on the template's document type: a Templatical template
+// compiles its visual document from "blocks", everything else compiles the
+// React Email JSX in "code.source".
+func (t templateDataEnvelope) compileSource() string {
+	var docType string
+	if raw, ok := t.Remaining["type"]; ok {
+		// A malformed type falls back to the React Email path rather than
+		// failing the save.
+		_ = json.Unmarshal(raw, &docType)
+	}
+	if docType == channels.TemplateTypeTemplatical {
+		return string(t.Remaining["blocks"])
+	}
+	return t.Code.Source
+}
+
 func (t templateDataEnvelope) MarshalJSON() ([]byte, error) {
 	// Start from a copy of the remaining fields so we don't mutate the original.
 	merged := make(map[string]json.RawMessage, len(t.Remaining)+1)
@@ -245,10 +262,11 @@ func (srv *TemplatesController) UpdateTemplate(w http.ResponseWriter, r *http.Re
 		return
 	}
 
-	// If the template data contains React Email source code, compile it via
-	// the Deno renderer service and store the compiled JS alongside the source.
-	// Extra fields stored by the frontend (e.g. blocks, editorMode) are
-	// preserved through the marshal/unmarshal round-trip via templateDataEnvelope.
+	// If the template data carries a compilable source — React Email JSX or a
+	// Templatical document — compile it via the Deno renderer service and store
+	// the resulting bundle alongside it. Extra fields stored by the frontend
+	// (e.g. editorMode) are preserved through the marshal/unmarshal round-trip
+	// via templateDataEnvelope.
 	if body.Data != nil {
 		var envelope templateDataEnvelope
 		if err := json.Unmarshal(*body.Data, &envelope); err != nil {
@@ -257,8 +275,8 @@ func (srv *TemplatesController) UpdateTemplate(w http.ResponseWriter, r *http.Re
 			return
 		}
 
-		if envelope.Code.Source != "" {
-			envelope.Code.Bundle, envelope.Code.BundleHash, err = srv.renderer.Compile(ctx, projectID, envelope.Code.Source)
+		if source := envelope.compileSource(); source != "" {
+			envelope.Code.Bundle, envelope.Code.BundleHash, err = srv.renderer.Compile(ctx, projectID, source)
 			if err != nil {
 				logger.Error("failed to compile template", zap.Error(err))
 				oapi.WriteProblem(w, problem.ErrInternal(problem.Describe("failed to compile email template")))
diff --git a/internal/providers/channels/email.go b/internal/providers/channels/email.go
index d46d33632..bc47d51ae 100644
--- a/internal/providers/channels/email.go
+++ b/internal/providers/channels/email.go
@@ -31,6 +31,16 @@ type EmailPlaintextData struct {
 	Custom string `json:"custom,omitempty"`
 }
 
+// Template document types. The type selects which source the renderer
+// compiles; an empty value means React Email, so templates stored before
+// this field existed keep working unchanged.
+const (
+	// TemplateTypeReactEmail compiles the JSX in Code.Source.
+	TemplateTypeReactEmail = "react-email"
+	// TemplateTypeTemplatical compiles the visual document in Blocks.
+	TemplateTypeTemplatical = "templatical"
+)
+
 // EmailTemplateData represents the structure of email template data.
 type EmailTemplateData struct {
 	From      EmailFromData      `json:"from"`
@@ -41,10 +51,22 @@ type EmailTemplateData struct {
 	ReplyTo   string             `json:"reply_to,omitempty"`
 	Cc        string             `json:"cc,omitempty"`
 	Bcc       string             `json:"bcc,omitempty"`
+	Type      string             `json:"type,omitempty"`
 	Code      EmailCodeData      `json:"code,omitempty"`
+	Blocks    json.RawMessage    `json:"blocks,omitempty"`
 	Plaintext EmailPlaintextData `json:"plaintext,omitempty"`
 }
 
+// CompileSource returns the source the renderer should compile for this
+// template, which differs by document type: a Templatical template compiles
+// its visual document, a React Email one its JSX.
+func (d EmailTemplateData) CompileSource() string {
+	if d.Type == TemplateTypeTemplatical {
+		return string(d.Blocks)
+	}
+	return d.Code.Source
+}
+
 // ComposeEmail creates a SendRequest for email delivery to a user.
 // templateSender and providerDefaultSender should be pre-resolved (or nil).
 func ComposeEmail(ctx context.Context, templateSender, providerDefaultSender *management.SenderIdentity, config map[string]any, template management.Template, user *subjects.User) (providers.SendRequest[map[string]any], error) {
@@ -66,12 +88,13 @@ func ComposeEmailTemplateData(ctx context.Context, renderer *pubsub.EmailRendere
 		return data, nil
 	}
 
-	if email.Code.Source == "" && email.Code.Bundle == "" {
+	source := email.CompileSource()
+	if source == "" && email.Code.Bundle == "" {
 		return data, nil
 	}
 
 	if email.Code.Bundle == "" {
-		email.Code.Bundle, email.Code.BundleHash, err = renderer.Compile(ctx, projectID, email.Code.Source)
+		email.Code.Bundle, email.Code.BundleHash, err = renderer.Compile(ctx, projectID, source)
 		if err != nil {
 			return nil, fmt.Errorf("compile email template: %w", err)
 		}
@@ -91,10 +114,13 @@ func ComposeEmailTemplateData(ctx context.Context, renderer *pubsub.EmailRendere
 		email.Text = email.Plaintext.Custom
 	}
 
-	// Clear Code fields after rendering. The source and bundle contain JSX/JS
-	// which may include {{ }} style objects (e.g. inline styles) that the
-	// downstream Liquid renderer would incorrectly try to evaluate.
+	// Clear the authoring fields after rendering. Both carry {{ }} sequences the
+	// downstream Liquid renderer would incorrectly try to evaluate: JSX/JS
+	// inline style objects in Code, and merge tags plus arbitrary text content
+	// in the Templatical document. Only the rendered HTML and text should reach
+	// it.
 	email.Code = EmailCodeData{}
+	email.Blocks = nil
 
 	out, err := json.Marshal(email)
 	if err != nil {
diff --git a/internal/providers/channels/email_templatical_test.go b/internal/providers/channels/email_templatical_test.go
new file mode 100644
index 000000000..2b011be2d
--- /dev/null
+++ b/internal/providers/channels/email_templatical_test.go
@@ -0,0 +1,171 @@
+package channels
+
+import (
+	"context"
+	"encoding/json"
+	"strings"
+	"testing"
+
+	"github.com/google/uuid"
+	"github.com/lunogram/platform/internal/pubsub"
+	"github.com/lunogram/platform/internal/pubsub/schemas"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// recordingCaller stands in for the Deno renderer, capturing what the backend
+// asked it to compile so tests can assert on the source selection.
+type recordingCaller struct {
+	compiledSource string
+	html           string
+	plainText      string
+}
+
+func (c *recordingCaller) Call(_ context.Context, subject schemas.Subject, v any) ([]byte, error) {
+	switch {
+	case strings.HasPrefix(string(subject), "email.compile."):
+		req, ok := v.(schemas.CompileEmail)
+		if !ok {
+			return nil, assertUnexpected("compile payload")
+		}
+		c.compiledSource = req.Source
+		return json.Marshal(schemas.CompileEmailResponse{CompiledJS: `{"kind":"templatical"}`})
+
+	case strings.HasPrefix(string(subject), "email.render."):
+		return json.Marshal(schemas.RenderEmailResponse{HTML: c.html, PlainText: c.plainText})
+	}
+	return nil, assertUnexpected(string(subject))
+}
+
+type assertUnexpected string
+
+func (e assertUnexpected) Error() string { return "unexpected call: " + string(e) }
+
+func TestComposeEmailTemplateData_Templatical(t *testing.T) {
+	t.Parallel()
+
+	projectID := uuid.New()
+	document := `{"blocks":[{"type":"title","content":"Hi {{ user.first_name }}"}],"settings":{}}`
+
+	data, err := json.Marshal(map[string]any{
+		"subject": "Welcome",
+		"type":    TemplateTypeTemplatical,
+		"blocks":  json.RawMessage(document),
+	})
+	require.NoError(t, err)
+
+	caller := &recordingCaller{
+		html:      "<html>Hi {{ user.first_name }}</html>",
+		plainText: "Hi {{ user.first_name }}",
+	}
+	renderer := pubsub.NewEmailRenderer(caller)
+
+	out, err := ComposeEmailTemplateData(context.Background(), renderer, projectID, data, nil)
+	require.NoError(t, err)
+
+	// The visual document is what gets compiled, not the (absent) JSX source.
+	assert.JSONEq(t, document, caller.compiledSource)
+
+	var result map[string]any
+	require.NoError(t, json.Unmarshal(out, &result))
+
+	assert.Equal(t, caller.html, result["html"])
+	assert.Equal(t, caller.plainText, result["text"])
+
+	// The document must not survive into the payload: the downstream Liquid
+	// pass runs over this JSON and would try to evaluate the {{ }} inside it.
+	// `code` remains as an empty object — encoding/json's omitempty does not
+	// drop zero-valued structs — but carries no source or bundle.
+	assert.NotContains(t, result, "blocks")
+	assert.Empty(t, result["code"])
+	assert.NotContains(t, string(out), document)
+}
+
+func TestComposeEmailTemplateData_ReactEmailUnchanged(t *testing.T) {
+	t.Parallel()
+
+	projectID := uuid.New()
+	source := "export default function Email() { return null }"
+
+	data, err := json.Marshal(map[string]any{
+		"subject": "Welcome",
+		"code":    map[string]any{"source": source},
+	})
+	require.NoError(t, err)
+
+	caller := &recordingCaller{html: "<html></html>", plainText: ""}
+	renderer := pubsub.NewEmailRenderer(caller)
+
+	out, err := ComposeEmailTemplateData(context.Background(), renderer, projectID, data, nil)
+	require.NoError(t, err)
+
+	// A template with no explicit type still compiles its JSX, exactly as
+	// before the type field existed.
+	assert.Equal(t, source, caller.compiledSource)
+
+	var result map[string]any
+	require.NoError(t, json.Unmarshal(out, &result))
+	assert.Equal(t, caller.html, result["html"])
+	assert.Empty(t, result["code"])
+	assert.NotContains(t, string(out), source)
+}
+
+func TestComposeEmailTemplateData_NothingToCompile(t *testing.T) {
+	t.Parallel()
+
+	data := []byte(`{"subject":"Plain","html":"<p>already rendered</p>"}`)
+
+	caller := &recordingCaller{}
+	out, err := ComposeEmailTemplateData(
+		context.Background(), pubsub.NewEmailRenderer(caller), uuid.New(), data, nil,
+	)
+	require.NoError(t, err)
+
+	assert.Empty(t, caller.compiledSource)
+	assert.JSONEq(t, string(data), string(out))
+}
+
+func TestEmailTemplateData_CompileSource(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name string
+		data EmailTemplateData
+		want string
+	}{
+		{
+			name: "templatical uses the document",
+			data: EmailTemplateData{
+				Type:   TemplateTypeTemplatical,
+				Blocks: json.RawMessage(`{"blocks":[]}`),
+				Code:   EmailCodeData{Source: "ignored"},
+			},
+			want: `{"blocks":[]}`,
+		},
+		{
+			name: "explicit react-email uses the JSX",
+			data: EmailTemplateData{
+				Type: TemplateTypeReactEmail,
+				Code: EmailCodeData{Source: "jsx"},
+			},
+			want: "jsx",
+		},
+		{
+			name: "absent type falls back to the JSX",
+			data: EmailTemplateData{Code: EmailCodeData{Source: "jsx"}},
+			want: "jsx",
+		},
+		{
+			name: "templatical without a document compiles nothing",
+			data: EmailTemplateData{Type: TemplateTypeTemplatical},
+			want: "",
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+			assert.Equal(t, tc.want, tc.data.CompileSource())
+		})
+	}
+}
diff --git a/renderer/Dockerfile b/renderer/Dockerfile
index fdf1e387a..ca11eab37 100644
--- a/renderer/Dockerfile
+++ b/renderer/Dockerfile
@@ -19,5 +19,13 @@ COPY --from=build --chown=1993:1993 /deno-dir/ /deno-dir/
 
 USER 1993
 
-# Run with minimal permissions: only network access to NATS and env vars
-CMD ["run", "--allow-net", "--allow-env=NATS_URL", "main.ts"]
+# Run with minimal permissions. Beyond network and env, mjml needs homedir and
+# a readable working directory: it resolves a config path via env-paths on
+# import and stats its `filePath` option before parsing.
+#
+# env-paths also calls node:os tmpdir(), which tries TMPDIR, TMP and TEMP in
+# turn. Deno implements that through Deno.env.get, so an unlisted variable
+# raises NotCapable rather than returning undefined and the fallback chain dies
+# on the first one it touches. All three must be listed even though the image
+# sets none of them and tmpdir() ends up at its /tmp default.
+CMD ["run", "--allow-net", "--allow-env=NATS_URL,TEMPLATICAL_SOCIAL_ICONS_BASE_URL,TMPDIR,TMP,TEMP", "--allow-sys=homedir", "--allow-read=/app", "main.ts"]
diff --git a/renderer/compiler.ts b/renderer/compiler.ts
index a16a5ecb4..f5cf8e05f 100644
--- a/renderer/compiler.ts
+++ b/renderer/compiler.ts
@@ -3,6 +3,28 @@ import React from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { render } from "@react-email/render";
 import * as ReactEmailComponents from "@react-email/components";
+import {
+  isTemplaticalDocument,
+  renderTemplaticalDocument,
+} from "./templatical.ts";
+
+/**
+ * Marks a bundle produced from a Templatical document rather than React Email
+ * JSX. Bundles without a `kind` predate this branch and are React Email, so
+ * existing templates keep working untouched.
+ */
+const TEMPLATICAL_KIND = "templatical";
+
+/** Parse `source` as a Templatical document, or return null if it is JSX. */
+function asTemplaticalDocument(source: string) {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(source);
+  } catch {
+    return null;
+  }
+  return isTemplaticalDocument(parsed) ? parsed : null;
+}
 
 /**
  * The scope available to user templates at runtime.
@@ -17,15 +39,24 @@ const REACT_EMAIL_SCOPE: Record<string, unknown> = {
 };
 
 /**
- * Transpile and compile a React Email JSX source string into executable JS.
+ * Compile a template source into a bundle that render time can reuse.
  *
- * The compiled output is a self-contained function body that:
- * 1. Receives the react-email scope + any tailwind config bindings as arguments
- * 2. Returns the default-exported React component
+ * Two kinds of source are accepted:
  *
- * The compiled string is stored and reused at render time with different props.
+ * - A **Templatical document** (JSON). Rendering it depends only on the
+ *   document — merge tags resolve downstream via Liquid, not from props — so
+ *   the final HTML is produced here, once, and every recipient reuses it.
+ * - **React Email JSX**, which is transpiled to a self-contained function body
+ *   that receives the react-email scope and returns the default export. It is
+ *   executed per render because its output depends on props.
  */
-export function compile(source: string): string {
+export async function compile(source: string): Promise<string> {
+  const doc = asTemplaticalDocument(source);
+  if (doc) {
+    const { html, plainText } = await renderTemplaticalDocument(doc);
+    return JSON.stringify({ kind: TEMPLATICAL_KIND, html, plainText });
+  }
+
   const transformed = transform(source, {
     transforms: ["jsx", "typescript"],
     jsxRuntime: "automatic",
@@ -77,7 +108,15 @@ export async function renderTemplate(
   compiledBundle: string,
   props: Record<string, unknown>
 ): Promise<{ html: string; plainText: string }> {
-  const { code, tailwindConfigBindings } = JSON.parse(compiledBundle);
+  const bundle = JSON.parse(compiledBundle);
+
+  // Templatical bundles were fully rendered at compile time — there is nothing
+  // props could change, so hand back the stored output.
+  if (bundle.kind === TEMPLATICAL_KIND) {
+    return { html: bundle.html, plainText: bundle.plainText };
+  }
+
+  const { code, tailwindConfigBindings } = bundle;
 
   const scope: Record<string, unknown> = {
     ...REACT_EMAIL_SCOPE,
diff --git a/renderer/compiler_test.ts b/renderer/compiler_test.ts
new file mode 100644
index 000000000..c0603790f
--- /dev/null
+++ b/renderer/compiler_test.ts
@@ -0,0 +1,119 @@
+import {
+  assert,
+  assertEquals,
+  assertRejects,
+  assertStringIncludes,
+} from "@std/assert";
+import {
+  createButtonBlock,
+  createDefaultTemplateContent,
+  createImageBlock,
+  createParagraphBlock,
+  createSectionBlock,
+  createTitleBlock,
+} from "@templatical/types";
+import { compile, renderTemplate } from "./compiler.ts";
+
+/** A Templatical document with two columns, an image and merge tags. */
+function templaticalFixture() {
+  const content = createDefaultTemplateContent();
+  content.blocks = [
+    createSectionBlock({
+      columns: "2",
+      children: [
+        [
+          createImageBlock({
+            src: "https://cdn.example.com/hero.png",
+            alt: "Hero",
+            width: "full",
+            align: "center",
+          }),
+        ],
+        [
+          createTitleBlock({
+            content: "Hello {{ user.first_name }}",
+            level: 2,
+          }),
+          createParagraphBlock({ content: "<p>Thanks for joining.</p>" }),
+          createButtonBlock({
+            text: "Open",
+            url: "https://example.com/{{ user.id }}",
+          }),
+        ],
+      ],
+    }),
+  ];
+  return content;
+}
+
+const REACT_EMAIL_FIXTURE = `
+import { Html, Text } from "@react-email/components";
+
+export default function Email(props: { name: string }) {
+  return (
+    <Html>
+      <Text>Hello {props.name}</Text>
+    </Html>
+  );
+}
+`;
+
+Deno.test("templatical: compile produces a kind-tagged bundle", async () => {
+  const bundle = JSON.parse(
+    await compile(JSON.stringify(templaticalFixture())),
+  );
+
+  assertEquals(bundle.kind, "templatical");
+  assert(typeof bundle.html === "string" && bundle.html.length > 0);
+  assert(typeof bundle.plainText === "string");
+  // Rendering happens at compile time, so no document is carried forward.
+  assertEquals(bundle.doc, undefined);
+});
+
+Deno.test("templatical: renders blocks, images and merge tags", async () => {
+  const bundle = await compile(JSON.stringify(templaticalFixture()));
+  const { html, plainText } = await renderTemplate(bundle, {});
+
+  assertStringIncludes(html, "https://cdn.example.com/hero.png");
+  assertStringIncludes(html, "{{ user.first_name }}");
+  assertStringIncludes(html, "{{ user.id }}");
+  // MJML output must carry the responsive and Outlook scaffolding.
+  assertStringIncludes(html, "@media");
+  assertStringIncludes(html, "<!--[if mso");
+  // Plain text keeps merge tags and drops images.
+  assertStringIncludes(plainText, "{{ user.first_name }}");
+  assert(!plainText.includes("hero.png"));
+});
+
+Deno.test("templatical: render ignores props", async () => {
+  const bundle = await compile(JSON.stringify(templaticalFixture()));
+
+  const a = await renderTemplate(bundle, {});
+  const b = await renderTemplate(bundle, { user: { first_name: "Ada" } });
+
+  assertEquals(a.html, b.html);
+});
+
+Deno.test("react-email: bundle stays untagged and transpiles", async () => {
+  const parsed = JSON.parse(await compile(REACT_EMAIL_FIXTURE));
+
+  // No `kind` — its absence is what routes a bundle to the JSX path, and every
+  // bundle stored before this branch existed lacks it.
+  assertEquals(parsed.kind, undefined);
+  assertStringIncludes(parsed.code, "__Component__");
+  // Imports are stripped; the scope is injected at render time instead.
+  assert(!parsed.code.includes("import "));
+
+  // Executing the bundle is deliberately not asserted here. `deno test` pulls
+  // react and react-dom into one module graph, where a pre-existing version
+  // skew in deno.json (react 18.3.1 against react-dom 19.x, via
+  // @react-email/render's caret range) trips React's isomorphic version check.
+  // `deno run` — how the service actually starts — is unaffected.
+});
+
+Deno.test("react-email: JSON that is not a document falls through to JSX", async () => {
+  // Valid JSON, but not a Templatical document. It must not be misrouted into
+  // the MJML path — it goes to Sucrase, which rejects it as JSX. The rejection
+  // is the evidence of correct routing.
+  await assertRejects(() => compile('{"blocks": "not-an-array"}'), SyntaxError);
+});
diff --git a/renderer/deno.json b/renderer/deno.json
index 112e44d26..b2b085605 100644
--- a/renderer/deno.json
+++ b/renderer/deno.json
@@ -1,7 +1,8 @@
 {
   "tasks": {
-    "start": "deno run --allow-net=nats:4222 --allow-env=NATS_URL main.ts",
-    "dev": "deno run --watch --allow-net --allow-env main.ts"
+    "start": "deno run --allow-net=nats:4222 --allow-env=NATS_URL,TEMPLATICAL_SOCIAL_ICONS_BASE_URL,TMPDIR,TMP,TEMP --allow-sys=homedir --allow-read=. main.ts",
+    "dev": "deno run --watch --allow-net --allow-env --allow-sys --allow-read main.ts",
+    "test": "deno test --allow-net --allow-env=NATS_URL,TEMPLATICAL_SOCIAL_ICONS_BASE_URL,TMPDIR,TMP,TEMP --allow-sys=homedir --allow-read=. --no-check"
   },
   "imports": {
     "@nats-io/nats-core": "jsr:@nats-io/nats-core@^3",
@@ -11,7 +12,12 @@
     "react-dom/server": "npm:react-dom@^18.3.1/server",
     "@react-email/components": "npm:@react-email/components@^0.0.31",
     "@react-email/render": "npm:@react-email/render@^1.0.5",
-    "sucrase": "npm:sucrase@^3.35.0"
+    "sucrase": "npm:sucrase@^3.35.0",
+    "@std/assert": "jsr:@std/assert@^1",
+    "@templatical/renderer": "npm:@templatical/renderer@0.19.0",
+    "@templatical/types": "npm:@templatical/types@0.19.0",
+    "mjml": "npm:mjml@^5.4.0",
+    "html-to-text": "npm:html-to-text@^9.0.5"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
diff --git a/renderer/main.ts b/renderer/main.ts
index 927f1990a..9595aca5f 100644
--- a/renderer/main.ts
+++ b/renderer/main.ts
@@ -32,13 +32,13 @@ function encodeJSON(data: unknown): Uint8Array {
   return new TextEncoder().encode(JSON.stringify(data));
 }
 
-function handleCompile(msg: Msg): void {
+async function handleCompile(msg: Msg): Promise<void> {
   try {
     const request: CompileRequest = JSON.parse(
       new TextDecoder().decode(msg.data),
     );
 
-    const compiledJs = compile(request.source);
+    const compiledJs = await compile(request.source);
 
     const response: CompileResponse = { compiled_js: compiledJs };
     msg.respond(encodeJSON(response));
@@ -91,11 +91,9 @@ async function main(): Promise<void> {
   // Process compile requests
   (async () => {
     for await (const msg of compileSub) {
-      try {
-        handleCompile(msg);
-      } catch (err) {
-        console.error("unhandled compile error:", err);
-      }
+      handleCompile(msg).catch((err) =>
+        console.error("unhandled compile error:", err),
+      );
     }
   })();
 
diff --git a/renderer/templatical.ts b/renderer/templatical.ts
new file mode 100644
index 000000000..d1067b8a5
--- /dev/null
+++ b/renderer/templatical.ts
@@ -0,0 +1,95 @@
+import { renderToMjml } from "@templatical/renderer";
+import type { TemplateContent } from "@templatical/types";
+import mjml2html from "mjml";
+import { convert } from "html-to-text";
+
+/**
+ * Base URL for the social icon PNGs embedded in rendered emails.
+ *
+ * Templatical defaults to a jsDelivr URL, which would make every sent email
+ * depend on a third-party CDN. Set TEMPLATICAL_SOCIAL_ICONS_BASE_URL to serve
+ * the assets from the platform instead. When unset, the library default
+ * applies.
+ */
+const SOCIAL_ICONS_BASE_URL = Deno.env.get(
+  "TEMPLATICAL_SOCIAL_ICONS_BASE_URL",
+);
+
+/**
+ * Narrow an arbitrary parsed JSON value to a Templatical document.
+ *
+ * A document is `{ blocks: Block[], settings: TemplateSettings }`. React Email
+ * templates arrive as JSX source, which is not valid JSON at all, so this
+ * check only ever runs against something that already parsed cleanly.
+ */
+export function isTemplaticalDocument(
+  value: unknown,
+): value is TemplateContent {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value as Partial<TemplateContent>;
+  return (
+    Array.isArray(candidate.blocks) &&
+    typeof candidate.settings === "object" &&
+    candidate.settings !== null
+  );
+}
+
+/**
+ * Render a Templatical document to HTML and plain text.
+ *
+ * Unlike the React Email path this takes no props: merge tags survive the
+ * render as literal `{{ … }}` and are substituted downstream by the platform's
+ * Liquid pass. Being prop-independent means the output can be computed once at
+ * compile time and reused for every recipient.
+ */
+export async function renderTemplaticalDocument(
+  doc: TemplateContent,
+): Promise<{ html: string; plainText: string }> {
+  const mjmlSource = await renderToMjml(
+    doc,
+    SOCIAL_ICONS_BASE_URL
+      ? { socialIconsBaseUrl: SOCIAL_ICONS_BASE_URL }
+      : undefined,
+  );
+
+  const { html, errors } = await mjml2html(mjmlSource, {
+    validationLevel: "soft",
+  });
+
+  // Soft validation still produces usable HTML, so these are warnings rather
+  // than failures — log them instead of failing a send.
+  if (errors?.length) {
+    console.warn(
+      `mjml reported ${errors.length} validation issue(s):`,
+      errors.map((e: { formattedMessage?: string }) => e.formattedMessage)
+        .join("; "),
+    );
+  }
+
+  return { html, plainText: toPlainText(html) };
+}
+
+/**
+ * Derive the plain-text alternative from rendered HTML.
+ *
+ * Images are dropped rather than rendered as alt text, and link URLs are kept
+ * inline so the text part stays actionable.
+ *
+ * Headings must opt out of html-to-text's default uppercasing: it would turn a
+ * merge tag inside a heading into `{{ USER.FIRST_NAME }}`, which the platform's
+ * Liquid pass cannot resolve, silently leaving the raw tag in the text part of
+ * every email.
+ */
+function toPlainText(html: string): string {
+  return convert(html, {
+    wordwrap: 80,
+    selectors: [
+      { selector: "img", format: "skip" },
+      { selector: "a", options: { hideLinkHrefIfSameAsText: true } },
+      ...["h1", "h2", "h3", "h4", "h5", "h6"].map((selector) => ({
+        selector,
+        options: { uppercase: false },
+      })),
+    ],
+  });
+}