diff --git a/.eslintrc.json b/.eslintrc.json
index fabe0fbc..5125274f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -49,7 +49,7 @@
         "@typescript-eslint/quotes": "off",
         "@typescript-eslint/type-annotation-spacing": "error",
         "@typescript-eslint/no-explicit-any": "off",
-        "arrow-body-style": "error",
+        "arrow-body-style": "off",
         "brace-style": ["error", "1tbs"],
         "curly": "error",
         "eol-last": "error",
diff --git a/projects/vscode-atl-render/.gitattributes b/projects/vscode-atl-render/.gitattributes
new file mode 100644
index 00000000..70e63fff
--- /dev/null
+++ b/projects/vscode-atl-render/.gitattributes
@@ -0,0 +1,2 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
diff --git a/projects/vscode-atl-render/.gitignore b/projects/vscode-atl-render/.gitignore
new file mode 100644
index 00000000..aeee7322
--- /dev/null
+++ b/projects/vscode-atl-render/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+*.vsix
diff --git a/projects/vscode-atl-render/.vscode/launch.json b/projects/vscode-atl-render/.vscode/launch.json
new file mode 100644
index 00000000..0e191b59
--- /dev/null
+++ b/projects/vscode-atl-render/.vscode/launch.json
@@ -0,0 +1,17 @@
+// A launch configuration that launches the extension inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/projects/vscode-atl-render/.vscodeignore b/projects/vscode-atl-render/.vscodeignore
new file mode 100644
index 00000000..f369b5e5
--- /dev/null
+++ b/projects/vscode-atl-render/.vscodeignore
@@ -0,0 +1,4 @@
+.vscode/**
+.vscode-test/**
+.gitignore
+vsc-extension-quickstart.md
diff --git a/projects/vscode-atl-render/CHANGELOG.md b/projects/vscode-atl-render/CHANGELOG.md
new file mode 100644
index 00000000..90168682
--- /dev/null
+++ b/projects/vscode-atl-render/CHANGELOG.md
@@ -0,0 +1,15 @@
+# Change Log
+
+All notable changes to the "vscode-testing-library-render" extension will be documented in this file.
+
+## 0.0.3
+
+- docs: add logo
+
+## 0.0.2
+
+- fix: highlight on next line
+
+## 0.0.1
+
+- feat: initial release
diff --git a/projects/vscode-atl-render/README.md b/projects/vscode-atl-render/README.md
new file mode 100644
index 00000000..604a6ec9
--- /dev/null
+++ b/projects/vscode-atl-render/README.md
@@ -0,0 +1,3 @@
+# vscode-atl-render
+
+This extension adds HTML highlighting to the render method of the Angular Testing Library.
diff --git a/projects/vscode-atl-render/language-configuration.json b/projects/vscode-atl-render/language-configuration.json
new file mode 100644
index 00000000..20297c33
--- /dev/null
+++ b/projects/vscode-atl-render/language-configuration.json
@@ -0,0 +1,30 @@
+{
+  "comments": {
+    "blockComment": ["<!--", "-->"]
+  },
+  "brackets": [
+    ["<!--", "-->"],
+    ["<", ">"],
+    ["{", "}"],
+    ["(", ")"],
+    ["[", "]"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "(", "close": ")" },
+    { "open": "'", "close": "'" },
+    { "open": "\"", "close": "\"" },
+    { "open": "<!--", "close": "-->", "notIn": ["comment", "string"] },
+    { "open": "/**", "close": "*/", "notIn": ["string"] }
+  ],
+  "surroundingPairs": [
+    { "open": "'", "close": "'" },
+    { "open": "\"", "close": "\"" },
+    { "open": "`", "close": "`" },
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "(", "close": ")" },
+    { "open": "<", "close": ">" }
+  ]
+}
diff --git a/projects/vscode-atl-render/other/hedgehog.png b/projects/vscode-atl-render/other/hedgehog.png
new file mode 100644
index 00000000..ce0a940c
Binary files /dev/null and b/projects/vscode-atl-render/other/hedgehog.png differ
diff --git a/projects/vscode-atl-render/package.json b/projects/vscode-atl-render/package.json
new file mode 100644
index 00000000..a6462d92
--- /dev/null
+++ b/projects/vscode-atl-render/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "vscode-atl-render",
+  "displayName": "Angular Testing Library Render Highlighting",
+  "description": "HTML highlighting in ATL the render method",
+  "version": "0.0.3",
+  "icon": "other/hedgehog.png",
+  "publisher": "timdeschryver",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/testing-library/angular-testing-library.git"
+  },
+  "homepage": "https://github.com/testing-library/angular-testing-library/blob/main/README.md",
+  "engines": {
+    "vscode": "^1.57.0"
+  },
+  "categories": [
+    "Programming Languages"
+  ],
+  "contributes": {
+    "configuration": [
+      {
+        "id": "atl-render",
+        "title": "Angular Testing Library Render",
+        "properties": {
+          "atl-render.format.enabled": {
+            "type": "boolean",
+            "description": "Enable/disable formatting of render template strings.",
+            "default": true
+          }
+        }
+      }
+    ],
+    "grammars": [
+      {
+        "scopeName": "atl.render",
+        "path": "./syntaxes/atl-render.json",
+        "injectTo": [
+          "source.ts"
+        ],
+        "embeddedLanguages": {
+          "text.html": "html"
+        }
+      }
+    ]
+  }
+}
diff --git a/projects/vscode-atl-render/syntaxes/atl-render.json b/projects/vscode-atl-render/syntaxes/atl-render.json
new file mode 100644
index 00000000..a2e20518
--- /dev/null
+++ b/projects/vscode-atl-render/syntaxes/atl-render.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "scopeName": "atl.render",
+  "injectionSelector": "L:source.ts -comment",
+  "name": "atl.render",
+  "patterns": [
+    {
+      "include": "#renderMethod"
+    }
+  ],
+  "repository": {
+    "renderMethod": {
+      "name": "renderMethod",
+      "begin": "(?x)(\\b(?:\\w+\\.)*(?:render)\\s*)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "entity.name.function.ts"
+        },
+        "2": {
+          "name": "meta.brace.round.ts"
+        }
+      },
+      "end": "(\\))",
+      "endCaptures": {
+        "0": {
+          "name": "meta.brace.round.ts"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#renderTemplate"
+        },
+        {
+          "include": "source.ts"
+        }
+      ]
+    },
+    "renderTemplate": {
+      "contentName": "text.html",
+      "begin": "[`|'|\"]",
+      "beginCaptures": {
+        "0": {
+          "name": "string"
+        }
+      },
+      "end": "\\0",
+      "endCaptures": {
+        "0": {
+          "name": "string"
+        }
+      },
+      "patterns": [
+        {
+          "include": "text.html.derivative"
+        },
+        {
+          "include": "template.ng"
+        }
+      ]
+    }
+  }
+}