diff --git a/__mocks__/Examples.tsx b/__mocks__/Examples.tsx
index 23f05f2..1718ac7 100644
--- a/__mocks__/Examples.tsx
+++ b/__mocks__/Examples.tsx
@@ -20,6 +20,25 @@ export const MockNoInlineWithComponent = () => {
   )
 }
 
+export const MockNoInlineWithBackticks = () => {
+  return (
+    <ComponentBox data-test="id">
+      {() => {
+        const DemoComponent = () => {
+          const more = '456'
+          return `123${more}` + `789`
+        }
+
+        return (
+          <div>
+            <DemoComponent />
+          </div>
+        )
+      }}
+    </ComponentBox>
+  )
+}
+
 export const MockNoInlineWithText = () => {
   return (
     <ComponentBox data-test="id">
diff --git a/__tests__/babelPluginReactLive.test.ts b/__tests__/babelPluginReactLive.test.ts
index 15fc432..a76380f 100644
--- a/__tests__/babelPluginReactLive.test.ts
+++ b/__tests__/babelPluginReactLive.test.ts
@@ -16,108 +16,124 @@ const pluginOptions = {
   prettierPath,
 }
 
-it('babelPluginReactLive', async () => {
-  const babelFileResult = await transformFileAsync(targetFile, {
-    code: true,
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          modules: false,
-          targets: { firefox: '100' },
-        },
+describe('transformFileAsync', () => {
+  it('should convert Examples.tsx with all exported examples', async () => {
+    const babelFileResult = await transformFileAsync(targetFile, {
+      code: true,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: { firefox: '100' },
+          },
+        ],
       ],
-    ],
-    plugins: [[babelPluginReactLive, pluginOptions]],
-  })
+      plugins: [[babelPluginReactLive, pluginOptions]],
+    })
 
-  const code = removeConsoleNinja(String(babelFileResult?.code))
+    const code = removeConsoleNinja(String(babelFileResult?.code))
 
-  const formattedCode = prettier.format(code, {
-    filepath: 'file.tsx',
-    semi: false,
-  })
+    const formattedCode = prettier.format(code, {
+      filepath: 'file.tsx',
+      semi: false,
+    })
 
-  expect(formattedCode).toMatchInlineSnapshot(`
-    "const ComponentBox = ({ children }) => children
-    export const MockNoInlineWithComponent = () => {
-      return (
-        <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
-      return <>content</>
-    }
-    render(
-      <div>
-        <DemoComponent />
-      </div>
-    )
-    \`}</ComponentBox>
+    expect(formattedCode).toMatchInlineSnapshot(`
+      "const ComponentBox = ({ children }) => children
+      export const MockNoInlineWithComponent = () => {
+        return (
+          <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
+        return <>content</>
+      }
+      render(
+        <div>
+          <DemoComponent />
+        </div>
       )
-    }
-    export const MockNoInlineWithText = () => {
-      return (
-        <ComponentBox data-test="id" noInline>{\`render(<>content</>)
-    \`}</ComponentBox>
+      \`}</ComponentBox>
+        )
+      }
+      export const MockNoInlineWithBackticks = () => {
+        return (
+          <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
+        const more = '456'
+        return \\\`123\\\${more}\\\` + \\\`789\\\`
+      }
+      render(
+        <div>
+          <DemoComponent />
+        </div>
       )
-    }
-    export const MockOneChilds = () => {
-      return (
-        <ComponentBox data-test="id">{\`<div>content</div>
-    \`}</ComponentBox>
-      )
-    }
-    export const MockManyChilds = () => {
-      return (
-        <ComponentBox data-test="id">{\`
-    <div>content 1</div>
-    <div>content 2</div>
-    <div>content 3</div>
+      \`}</ComponentBox>
+        )
+      }
+      export const MockNoInlineWithText = () => {
+        return (
+          <ComponentBox data-test="id" noInline>{\`render(<>content</>)
+      \`}</ComponentBox>
+        )
+      }
+      export const MockOneChilds = () => {
+        return (
+          <ComponentBox data-test="id">{\`<div>content</div>
+      \`}</ComponentBox>
+        )
+      }
+      export const MockManyChilds = () => {
+        return (
+          <ComponentBox data-test="id">{\`
+      <div>content 1</div>
+      <div>content 2</div>
+      <div>content 3</div>
 
-    \`}</ComponentBox>
-      )
-    }
-    export const MockFragment = () => {
-      return (
-        <ComponentBox data-test="id">{\`<>
-      <span>content 1</span>
-      <span>content 2</span>
-      <span>content 3</span>
-    </>
-    \`}</ComponentBox>
-      )
-    }
-    export const MockText = () => {
-      return (
-        <ComponentBox data-test="id">{\`
-    text
-    {'text'}
-    <span>content</span>
-    text
-    {'text'}
+      \`}</ComponentBox>
+        )
+      }
+      export const MockFragment = () => {
+        return (
+          <ComponentBox data-test="id">{\`<>
+        <span>content 1</span>
+        <span>content 2</span>
+        <span>content 3</span>
+      </>
+      \`}</ComponentBox>
+        )
+      }
+      export const MockText = () => {
+        return (
+          <ComponentBox data-test="id">{\`
+      text
+      {'text'}
+      <span>content</span>
+      text
+      {'text'}
 
-    \`}</ComponentBox>
-      )
-    }
-    export const MockEvents = () => {
-      return (
-        <ComponentBox data-test="id">{\`<DemoComponent
-      onChange={(e) => {
-        // comment
-        console.log(e)
-      }}
-      onOpen={(e) => 'console.log(e)'}
-      onFocus={(e) => {
-        const cleaned = 'console.log(e)'
-      }}
-    />
-    \`}</ComponentBox>
-      )
-    }
-    "
-  `)
+      \`}</ComponentBox>
+        )
+      }
+      export const MockEvents = () => {
+        return (
+          <ComponentBox data-test="id">{\`<DemoComponent
+        onChange={(e) => {
+          // comment
+          console.log(e)
+        }}
+        onOpen={(e) => 'console.log(e)'}
+        onFocus={(e) => {
+          const cleaned = 'console.log(e)'
+        }}
+      />
+      \`}</ComponentBox>
+        )
+      }
+      "
+    `)
 
-  expect(formattedCode.match(/noInline/g)).toHaveLength(2)
-  expect(formattedCode.match(/\{`/g)).toHaveLength(7)
-  expect(formattedCode.match(/`\}/g)).toHaveLength(7)
+    expect(formattedCode.match(/noInline/g)).toHaveLength(3)
+    expect(formattedCode.match(/\{`/g)).toHaveLength(8)
+    expect(formattedCode.match(/`\}/g)).toHaveLength(8)
+  })
 })
 
 function removeConsoleNinja(code) {
diff --git a/babelPluginReactLive.js b/babelPluginReactLive.js
index 4ab0069..d0dd4c1 100644
--- a/babelPluginReactLive.js
+++ b/babelPluginReactLive.js
@@ -24,16 +24,21 @@ function babelPluginReactLive(babel, options) {
     })
 
     // Prettier adds a leading ;
-    // And we also escape `
-    code = code.replace(/^;/, '').replace(/`/g, '\\`')
+    code = code.replace(/^;/, '')
+
+    // Also escape backticks (`)
+    code = code.replace(/`/g, '\\`')
 
     // Remove fragments we added in the first place
     if (children.length > 1) {
       code = code.replace(/^<>|<\/>$|^\s{2}/gm, '')
     }
 
+    const raw = code.replace(/\$\{/g, '\\${')
+    const templateElement = t.templateElement({ raw, cooked: code }, true)
+
     return t.jsxExpressionContainer(
-      t.templateLiteral([t.templateElement({ raw: code })], [])
+      t.templateLiteral([templateElement], [])
     )
   }