diff --git a/lua/neolog/actions.lua b/lua/neolog/actions.lua
index 960ccf7..bed68c3 100644
--- a/lua/neolog/actions.lua
+++ b/lua/neolog/actions.lua
@@ -97,7 +97,7 @@ local function query_log_target_container(lang, range)
   local tree = parser:parse()[1]
   local root = tree:root()
 
-  local query = vim.treesitter.query.get(lang, "neolog")
+  local query = vim.treesitter.query.get(lang, "neolog-log-container")
   if not query then
     vim.notify(string.format("logging_framework doesn't support %s language", lang), vim.log.levels.ERROR)
     return {}
@@ -137,15 +137,11 @@ end
 ---@param lang string
 ---@return TSNode[]
 local function find_log_target(container, lang)
-  local query = vim.treesitter.query.parse(
-    lang,
-    [[
-      ([
-        (identifier)
-        (shorthand_property_identifier_pattern)
-      ]) @log_target
-    ]]
-  )
+  local query = vim.treesitter.query.get(lang, "neolog-log-target")
+  if not query then
+    vim.notify(string.format("logging_framework doesn't support %s language 1", lang), vim.log.levels.ERROR)
+    return {}
+  end
 
   local bufnr = vim.api.nvim_get_current_buf()
   local log_targets = {}
@@ -167,12 +163,6 @@ function M.add_log(label_template, position)
     return
   end
 
-  local query = vim.treesitter.query.get(lang, "neolog")
-  if not query then
-    vim.notify(string.format("logging_framework doesn't support %s language", lang), vim.log.levels.ERROR)
-    return
-  end
-
   local template = M.log_templates[lang]
   if not template then
     vim.notify(string.format("Log template for %s language is not found", lang), vim.log.levels.ERROR)
diff --git a/queries/tsx/neolog.scm b/queries/tsx/neolog-log-container.scm
similarity index 100%
rename from queries/tsx/neolog.scm
rename to queries/tsx/neolog-log-container.scm
diff --git a/queries/tsx/neolog-log-target.scm b/queries/tsx/neolog-log-target.scm
new file mode 100644
index 0000000..f510202
--- /dev/null
+++ b/queries/tsx/neolog-log-target.scm
@@ -0,0 +1,21 @@
+; Outside of jsx element
+(
+  ([
+    (identifier)
+    (shorthand_property_identifier_pattern)
+  ]) @log_target
+  (#not-has-ancestor? @log_target jsx_element)
+  (#not-has-ancestor? @log_target jsx_self_closing_element)
+)
+
+; Inside of jsx expression but ignore opening and closing tags
+(
+  ([
+    (identifier)
+    (shorthand_property_identifier_pattern)
+  ]) @log_target
+  (#has-ancestor? @log_target jsx_expression)
+  (#not-has-parent? @log_target jsx_opening_element)
+  (#not-has-parent? @log_target jsx_closing_element)
+  (#not-has-parent? @log_target jsx_self_closing_element)
+)
diff --git a/queries/typescript/neolog.scm b/queries/typescript/neolog-log-container.scm
similarity index 100%
rename from queries/typescript/neolog.scm
rename to queries/typescript/neolog-log-container.scm
diff --git a/queries/typescript/neolog-log-target.scm b/queries/typescript/neolog-log-target.scm
new file mode 100644
index 0000000..bc11ca3
--- /dev/null
+++ b/queries/typescript/neolog-log-target.scm
@@ -0,0 +1,4 @@
+([
+  (identifier)
+  (shorthand_property_identifier_pattern)
+]) @log_target
diff --git a/tests/neolog/actions/lang/tsx_spec.lua b/tests/neolog/actions/lang/tsx_spec.lua
new file mode 100644
index 0000000..f8b2fb4
--- /dev/null
+++ b/tests/neolog/actions/lang/tsx_spec.lua
@@ -0,0 +1,195 @@
+local neolog = require("neolog")
+local helper = require("tests.neolog.helper")
+
+describe("typescript", function()
+  before_each(function()
+    neolog.setup()
+  end)
+
+  it("supports jsx expression", function()
+    local actions = require("neolog.actions")
+
+    local input = [[
+      function foo() {
+        const a = 1
+
+        return (
+          <div>
+            <div>{a| + 1}</div>
+          </div>
+        )
+      }
+    ]]
+
+    local expected = [[
+      function foo() {
+        const a = 1
+
+        console.log("a", a)
+        return (
+          <div>
+            <div>{a + 1}</div>
+          </div>
+        )
+      }
+    ]]
+
+    helper.assert_scenario({
+      input = input,
+      filetype = "typescriptreact",
+      action = function()
+        actions.add_log("%identifier", "above")
+      end,
+      expected = expected,
+    })
+
+    input = [[
+      function foo() {
+        const a = 1
+        const el = (
+          <div>
+            <div>{a| + 1}</div>
+          </div>
+        )
+      }
+    ]]
+
+    expected = [[
+      function foo() {
+        const a = 1
+        const el = (
+          <div>
+            <div>{a + 1}</div>
+          </div>
+        )
+        console.log("a", a)
+      }
+    ]]
+
+    helper.assert_scenario({
+      input = input,
+      filetype = "typescriptreact",
+      action = function()
+        actions.add_log("%identifier", "below")
+      end,
+      expected = expected,
+    })
+  end)
+
+  it("supports jsx attribute", function()
+    local actions = require("neolog.actions")
+
+    local input = [[
+      function foo() {
+        return (
+          <div className={a|}>
+            <div>{b + 1}</div>
+          </div>
+        )
+      }
+    ]]
+
+    local expected = [[
+      function foo() {
+        console.log("a", a)
+        return (
+          <div className={a|}>
+            <div>{b + 1}</div>
+          </div>
+        )
+      }
+    ]]
+
+
+    helper.assert_scenario({
+      input = input,
+      filetype = "typescriptreact",
+      action = function()
+        actions.add_log("%identifier", "above")
+      end,
+      expected = expected,
+    })
+  end)
+
+  it("supports visual selection log", function()
+    local actions = require("neolog.actions")
+
+    local input = [[
+      function foo() {
+        const a = 1
+        const b = 1
+
+        return (
+          <div>
+            <div>{a| + b}</div>
+          </div>
+        )
+      }
+    ]]
+
+    local expected = [[
+      function foo() {
+        const a = 1
+        const b = 1
+
+        console.log("a", a)
+        console.log("b", b)
+        return (
+          <div>
+            <div>{a + b}</div>
+          </div>
+        )
+      }
+    ]]
+
+    helper.assert_scenario({
+      input = input,
+      filetype = "typescriptreact",
+      action = function()
+        vim.cmd("normal! vi{")
+        actions.add_log("%identifier", "above")
+      end,
+      expected = expected,
+    })
+
+    input = [[
+      function foo() {
+        const a = 1
+        const b = true
+        const el = (
+          <div>
+            {b && <div>{|a + 1}</div>}
+            <input className={c} />
+          </div>
+        )
+      }
+    ]]
+
+    -- TODO: figure out why indentation is off with inner jsx element
+    expected = [[
+      function foo() {
+        const a = 1
+        const b = true
+        const el = (
+          <div>
+          {b && <div>{|a + 1}</div>}
+          <input className={c} />
+          </div>
+        )
+        console.log("b", b)
+        console.log("a", a)
+        console.log("c", c)
+      }
+    ]]
+
+    helper.assert_scenario({
+      input = input,
+      filetype = "typescriptreact",
+      action = function()
+        vim.cmd("normal! Vj")
+        actions.add_log("%identifier", "below")
+      end,
+      expected = expected,
+    })
+  end)
+end)
diff --git a/tests/neolog/helper.lua b/tests/neolog/helper.lua
index 565b357..738d864 100644
--- a/tests/neolog/helper.lua
+++ b/tests/neolog/helper.lua
@@ -33,8 +33,11 @@ local function parse_input(input)
 
   for _, line in ipairs(lines) do
     -- Count the number of leading whitespaces
+    -- Don't consider indent of empty lines
     local leading_whitespaces = line:match("^%s*")
-    smallest_indent = smallest_indent and math.min(smallest_indent, #leading_whitespaces) or #leading_whitespaces
+    if #leading_whitespaces ~= line:len() then
+      smallest_indent = smallest_indent and math.min(smallest_indent, #leading_whitespaces) or #leading_whitespaces
+    end
   end
 
   local cursor