diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3284e8d..e51a050 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Next
 - Fix [#1862](https://github.com/Glavin001/atom-beautify/issues/1862) Add support for ocp-indent as an executable
+- See [#601](https://github.com/Glavin001/atom-beautify/issues/1862) Add support for tsx files
 
 # v0.30.9 (2017-11-22)
 - Fix [#1949](https://github.com/Glavin001/atom-beautify/issues/1949): Fix beautify on save when text has not changed.
diff --git a/README-template.md b/README-template.md
index ac4abb3..2d743ef 100644
--- a/README-template.md
+++ b/README-template.md
@@ -8,7 +8,7 @@
 [![Paypal Donations](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X2RK5DKN6YXPJ&lc=CA&item_name=Atom%2dBeautify&item_number=atom%2dbeautify&currency_code=CAD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)
 [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/unibeautify)
 
-**Sign up for Unibeautify Bot: [https://goo.gl/jmM4QN](https://goo.gl/jmM4QN)**
+**Sign up for Unibeautify CI: [https://goo.gl/jmM4QN](https://goo.gl/jmM4QN)**
 
 **Help improve Atom-Beautify by completing the quick questionnaire: [https://goo.gl/iEHBNr](https://goo.gl/iEHBNr)**
 
diff --git a/README.md b/README.md
index 2dde5f0..7720f42 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 [![Paypal Donations](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X2RK5DKN6YXPJ&lc=CA&item_name=Atom%2dBeautify&item_number=atom%2dbeautify&currency_code=CAD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)
 [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/unibeautify)
 
-**Sign up for Unibeautify Bot: [https://goo.gl/jmM4QN](https://goo.gl/jmM4QN)**
+**Sign up for Unibeautify CI: [https://goo.gl/jmM4QN](https://goo.gl/jmM4QN)**
 
 **Help improve Atom-Beautify by completing the quick questionnaire: [https://goo.gl/iEHBNr](https://goo.gl/iEHBNr)**
 
@@ -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 42f9559..bdb74b1 100644
--- a/package.json
+++ b/package.json
@@ -194,7 +194,7 @@
     "temp": "^0.8.3",
     "tidy-markdown": "2.0.4",
     "typescript": "^2.6.2",
-    "typescript-formatter": "5.2.0",
+    "typescript-formatter": "^7.0.0",
     "underscore-plus": "^1.6.6",
     "universal-analytics": "^0.4.16",
     "which": "^1.3.0",
@@ -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 1a0f204..a5081ea 100644
--- a/src/beautifiers/typescript-formatter.coffee
+++ b/src/beautifiers/typescript-formatter.coffee
@@ -6,13 +6,14 @@ module.exports = class TypeScriptFormatter extends Beautifier
   link: "https://github.com/vvakame/typescript-formatter"
   options: {
     TypeScript: true
+    TSX: true
   }
 
   beautify: (text, language, options) ->
     return new @Promise((resolve, reject) =>
 
       try
-        format = require("typescript-formatter/lib/formatter").default
+        format = require("typescript-formatter/lib/formatter").format
         formatterUtils = require("typescript-formatter/lib/utils")
         # @verbose('format', format, formatterUtils)
 
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",