diff --git a/README.md b/README.md
index 2dde5f0..4d6f0ae 100644
--- a/README.md
+++ b/README.md
@@ -199,6 +199,7 @@ See [all supported options in the documentation at  `docs/options.md`](docs/opti
 | Swig | `HTML (Swig)`, `SWIG` |`.swig` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
 | Terraform | `Terraform` |`.tf` | **[`terraformfmt`](https://www.terraform.io/docs/commands/fmt.html)** |
 | TSS | `TSS` |`.tss` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
+| TSX | `TypeScriptReact` |`.tsx` | **[`TypeScript Formatter`](https://github.com/vvakame/typescript-formatter)** |
 | Twig | `HTML (Twig)` |`.twig` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
 | TypeScript | `TypeScript` |`.ts` | **[`TypeScript Formatter`](https://github.com/vvakame/typescript-formatter)** |
 | UX Markup | `UX` |`.ux` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
diff --git a/docs/options.md b/docs/options.md
index 0ae2840..6047ede 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -12622,6 +12622,75 @@ Maximum amount of characters per line (0 = disable) (Supported by Pretty Diff)
 }
 ```
 
+####  [TSX](#tsx) 
+
+**Supported Beautifiers**:  [`TypeScript Formatter`](#typescript-formatter) 
+
+| Option | TypeScript Formatter |
+| --- | --- |
+| `disabled` | :white_check_mark: |
+| `default_beautifier` | :white_check_mark: |
+| `beautify_on_save` | :white_check_mark: |
+
+**Description**:
+
+Options for language TSX
+
+#####  [Disable Beautifying Language](#disable-beautifying-language) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Type**: `boolean`
+
+**Description**:
+
+Disable TSX Beautification
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Disable Beautifying Language*" and change it to your desired configuration.
+
+#####  [Default Beautifier](#default-beautifier) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Default**: `TypeScript Formatter`
+
+**Type**: `string`
+
+**Enum**:  `TypeScript Formatter` 
+
+**Description**:
+
+Default Beautifier to be used for TSX
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Default Beautifier*" and change it to your desired configuration.
+
+#####  [Beautify On Save](#beautify-on-save) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Type**: `boolean`
+
+**Description**:
+
+Automatically beautify TSX files on save
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Beautify On Save*" and change it to your desired configuration.
+
 ####  [Twig](#twig) 
 
 **Supported Beautifiers**:  [`Pretty Diff`](#pretty-diff) 
diff --git a/examples/simple-jsbeautifyrc/tsx/expected/test.tsx b/examples/simple-jsbeautifyrc/tsx/expected/test.tsx
new file mode 100644
index 0000000..273dd06
--- /dev/null
+++ b/examples/simple-jsbeautifyrc/tsx/expected/test.tsx
@@ -0,0 +1,12 @@
+class Test extends React.Component<Foo> {
+  render() {
+    return (
+      <div className="class" >
+      <h2 className="anotherClass" >
+        { this.foo.bar }
+        < /h2>
+    { this.foo.bar.children }
+    </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/examples/simple-jsbeautifyrc/tsx/original/test.tsx b/examples/simple-jsbeautifyrc/tsx/original/test.tsx
new file mode 100644
index 0000000..a974f18
--- /dev/null
+++ b/examples/simple-jsbeautifyrc/tsx/original/test.tsx
@@ -0,0 +1,12 @@
+class Test extends React.Component<Foo> {
+  render() {
+    return (
+      <div className="class">
+    <h2 className="anotherClass">
+          {this.foo.bar}
+        </h2>
+        {this.foo.bar.children}
+                </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 5a1734f..af5e4da 100644
--- a/package.json
+++ b/package.json
@@ -277,7 +277,8 @@
       "atom-beautify:beautify-language-xml",
       "atom-beautify:beautify-language-xtemplate",
       "atom-beautify:beautify-language-yaml",
-      "atom-beautify:beautify-language-terraform"
+      "atom-beautify:beautify-language-terraform",
+      "atom-beautify:beautify-language-tsx"
     ],
     ".tree-view .file .name": [
       "atom-beautify:beautify-file"
@@ -412,7 +413,8 @@
     "align-yaml",
     "goimports",
     "terraform",
-    "terraformfmt"
+    "terraformfmt",
+    "tsx"
   ],
   "devDependencies": {
     "coffeelint": "1.16.0"
@@ -449,4 +451,4 @@
       "prettydiff2"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/beautifiers/typescript-formatter.coffee b/src/beautifiers/typescript-formatter.coffee
index 1cbfd8c..a5081ea 100644
--- a/src/beautifiers/typescript-formatter.coffee
+++ b/src/beautifiers/typescript-formatter.coffee
@@ -6,6 +6,7 @@ module.exports = class TypeScriptFormatter extends Beautifier
   link: "https://github.com/vvakame/typescript-formatter"
   options: {
     TypeScript: true
+    TSX: true
   }
 
   beautify: (text, language, options) ->
diff --git a/src/languages/index.coffee b/src/languages/index.coffee
index 7cc1e5c..69c14a8 100644
--- a/src/languages/index.coffee
+++ b/src/languages/index.coffee
@@ -68,6 +68,7 @@ module.exports = class Languages
     "svg"
     "swig"
     "tss"
+    "tsx"
     "twig"
     "typescript"
     "ux_markup"
diff --git a/src/languages/tsx.coffee b/src/languages/tsx.coffee
new file mode 100644
index 0000000..7625b88
--- /dev/null
+++ b/src/languages/tsx.coffee
@@ -0,0 +1,21 @@
+module.exports = {
+
+  name: "TSX"
+  namespace: "tsx"
+  fallback: ['ts']
+
+  ###
+  Supported Grammars
+  ###
+  grammars: [
+    "TypeScriptReact"
+  ]
+
+  ###
+  Supported extensions
+  ###
+  extensions: [
+    "tsx"
+  ]
+
+}
diff --git a/src/options.json b/src/options.json
index 35bda1b..d545bd3 100644
--- a/src/options.json
+++ b/src/options.json
@@ -7365,6 +7365,47 @@
       }
     }
   },
+  "tsx": {
+    "title": "TSX",
+    "type": "object",
+    "description": "Options for language TSX",
+    "collapsed": true,
+    "beautifiers": [
+      "TypeScript Formatter"
+    ],
+    "grammars": [
+      "TypeScriptReact"
+    ],
+    "extensions": [
+      "tsx"
+    ],
+    "properties": {
+      "disabled": {
+        "title": "Disable Beautifying Language",
+        "order": -3,
+        "type": "boolean",
+        "default": false,
+        "description": "Disable TSX Beautification"
+      },
+      "default_beautifier": {
+        "title": "Default Beautifier",
+        "order": -2,
+        "type": "string",
+        "default": "TypeScript Formatter",
+        "description": "Default Beautifier to be used for TSX",
+        "enum": [
+          "TypeScript Formatter"
+        ]
+      },
+      "beautify_on_save": {
+        "title": "Beautify On Save",
+        "order": -1,
+        "type": "boolean",
+        "default": false,
+        "description": "Automatically beautify TSX files on save"
+      }
+    }
+  },
   "twig": {
     "title": "Twig",
     "type": "object",