diff --git a/packages/docz-utils/package.json b/packages/docz-utils/package.json
index 5b8a90b6d..4f7bfdd31 100644
--- a/packages/docz-utils/package.json
+++ b/packages/docz-utils/package.json
@@ -36,6 +36,7 @@
     "codesandboxer-fs": "^0.4.7",
     "fs-extra": "^7.0.1",
     "humanize-string": "^1.0.2",
+    "js-string-escape": "^1.0.1",
     "jsx-ast-utils": "^2.0.1",
     "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
diff --git a/packages/docz-utils/src/jsx.ts b/packages/docz-utils/src/jsx.ts
index 1d7553a93..d1dd9372c 100644
--- a/packages/docz-utils/src/jsx.ts
+++ b/packages/docz-utils/src/jsx.ts
@@ -1,5 +1,6 @@
 import * as jsxUtils from 'jsx-ast-utils'
 import strip from 'strip-indent'
+import escapeJS from 'js-string-escape'
 
 import { valueFromTraverse, codeFromNode } from './ast'
 
@@ -23,11 +24,7 @@ export const sanitizeCode = (code: string) => {
       ? trimmed.substr(1, trimmed.length - 2)
       : trimmed
 
-  return strip(newCode)
-    .trim()
-    .replace(/'/g, `\\'`)
-    .replace(/`/g, '\\`')
-    .replace(/\${.*}/g, (match: string) => `\\${match}`)
+  return escapeJS(strip(newCode))
 }
 
 export const componentName = (value: any) => {
diff --git a/packages/docz-utils/src/types.d.ts b/packages/docz-utils/src/types.d.ts
index f7718947d..58d5a6cf1 100644
--- a/packages/docz-utils/src/types.d.ts
+++ b/packages/docz-utils/src/types.d.ts
@@ -17,3 +17,4 @@ declare module 'unist-util-is'
 declare module 'unist-util-find'
 declare module 'unescape-js'
 declare module 'codesandboxer-fs'
+declare module 'js-string-escape'
diff --git a/packages/rehype-docz/src/index.ts b/packages/rehype-docz/src/index.ts
index 516b213f2..a1ecf7652 100644
--- a/packages/rehype-docz/src/index.ts
+++ b/packages/rehype-docz/src/index.ts
@@ -27,7 +27,7 @@ const addPropsOnPlayground = async (
 
     node.value = node.value.replace(
       tagOpen,
-      `<${name} __position={${idx}} __code={\`${child}\`} __scope={${scope}}`
+      `<${name} __position={${idx}} __code={'${child}'} __scope={${scope}}`
     )
 
     if (useCodeSandbox) {
diff --git a/yarn.lock b/yarn.lock
index c83820160..e97733977 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7531,6 +7531,11 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
   integrity sha512-PxfGzSs0ztShKrUYPIn5r0MtyAhYcCwmndozzpz8YObbPnD1jFxzlBGbRnX2mIu6Z13xN6+PTu05TQFnZFlzow==
 
+js-string-escape@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
+  integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"