diff --git a/README.md b/README.md
index e69aa79..b392d20 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,6 @@ For example, to create a new React class, type `rcc` and press `Tab` or press `C
 
 ```js
 import React, {
-  Component,
   PropTypes,
 } from 'react';
 
@@ -59,7 +58,7 @@ export default $class$;
 'use strict';
 
 var React = require('react');
-var PropTypes = PropTypes;
+var PropTypes = React.PropTypes;
 
 var $class$ = React.createClass({
  render: function() {
@@ -230,6 +229,18 @@ componentWillUnmount: function() {
 
 ```
 
+### `dn`
+
+```js
+displayName: '$END$',
+```
+
+### `dnp`
+
+```js
+$START$.displayName = '$END$';
+```
+
 ### `fdn`
 
 ```js
@@ -315,7 +326,7 @@ dangerouslySetInnerHTML={__html: '$END$'}
 ```js
 propTypes: {
   $START$: PropTypes.$END$
-}
+},
 
 ```
 
@@ -391,7 +402,7 @@ this.state.$END$
 ```js
 contextTypes: {
   $START$: PropTypes.$END$
-}
+},
 
 ```
 
@@ -400,7 +411,7 @@ contextTypes: {
 ```js
 childContextTypes: {
   $START$: PropTypes.$END$
-}
+},
 
 ```
 
@@ -432,6 +443,12 @@ getChildContext: function() {
 
 ```
 
+### `sdn`
+
+```js
+static displayName = '$END$';
+```
+
 ### `spt`
 
 ```js
@@ -468,7 +485,7 @@ static childContextTypes = {
 
 ```
 
-### `csttr`
+### `cstt`
 
 ```js
 constructor(props, context$START$) {
@@ -477,6 +494,48 @@ constructor(props, context$START$) {
 
 ```
 
+### `tsn`
+
+```js
+transitionName="$END$"
+```
+
+### `tsa`
+
+```js
+transitionAppear={$END$}
+```
+
+### `tse`
+
+```js
+transitionEnter={$END$}
+```
+
+### `tsl`
+
+```js
+transitionLeave={$END$}
+```
+
+### `tset`
+
+```js
+transitionEnterTimeout={$END$}
+```
+
+### `tslt`
+
+```js
+transitionLeaveTimeout={$END$}
+```
+
+### `tsat`
+
+```js
+transitionAppearTimeout={$END$}
+```
+
 ### `oncp`
 
 ```js
diff --git a/gulpfile.js b/gulpfile.js
index 40a1ad7..3c7fe87 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,30 +9,36 @@ var Handlebars = require('handlebars');
 var template = Handlebars.compile(fs.readFileSync('src/ReactJS.hbs', 'utf8'));
 var docTpl = Handlebars.compile(fs.readFileSync('src/doc.hbs', 'utf8'));
 var readme = fs.readFileSync('README.md', 'utf8');
-
 var templates = yaml.safeLoad(fs.readFileSync('src/template.yaml', 'utf8'));
 var eventsTpl = yaml.safeLoad(fs.readFileSync('src/envents.yaml', 'utf8'));
 
-var processTpl = function(tpl) {
-  tpl = JSON.stringify(tpl);
-  return tpl.replace(/\\n/g, '
')
+var escapeTpl = function(tpl) {
+  tpl = tpl.replace(/\n/g, '
')
     .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+    // .replace(/&/g, '&amp;')
+  
+  return JSON.stringify(tpl);
 };
 
 var data = [];
-var docData = [];
 
 for (var k in templates) {
   if (templates.hasOwnProperty(k)) {
     var t = templates[k];
+    console.log(typeof t.tpl);
+    var isMethod = (typeof t.tpl === 'string' && t.tpl.indexOf(': function') > -1);
     var tpl = t.tpl.next || t.tpl;
-    tpl = tpl.replace(/: function/g, '').replace(/},/g, '}');
-
+    tpl = tpl.replace(/: function/g, '');
+    
+    isMethod && (tpl = tpl.replace(/},/g, '}'));
+    
     var snippet = {
       name: k,
       description: t.description || t.tpl,
-      tpl: processTpl(tpl),
+      tpl: escapeTpl(tpl),
       variables: t.variables || [],
       tplRaw: tpl
     };
@@ -40,13 +46,13 @@ for (var k in templates) {
     data.push(snippet);
 
     if (t.tpl.next ||
-      (typeof t.tpl === 'string' && t.tpl.indexOf(': function') > -1)) {
+      (typeof t.tpl === 'string' && isMethod)) {
 
       var tpl5 = t.tpl.es5 || t.tpl;
       var snippet5 = {
         name: k + '5',
         description: t.description || t.tpl,
-        tpl: processTpl(tpl5),
+        tpl: escapeTpl(tpl5),
         variables: t.variables || [],
         tplRaw: tpl5
       };
@@ -56,7 +62,7 @@ for (var k in templates) {
   }
 }
 
-function processEnventsTpl(eventsMap) {
+function processEventsTpl(eventsMap) {
   for (var key in eventsMap) {
     if (eventsMap.hasOwnProperty(key)) {
       var tplName = eventsMap[key];
@@ -64,7 +70,7 @@ function processEnventsTpl(eventsMap) {
       data.push({
         name: tplName,
         description: key,
-        tpl: JSON.stringify(tpl),
+        tpl: escapeTpl(tpl),
         tplRaw: tpl
       });
       
@@ -72,7 +78,7 @@ function processEnventsTpl(eventsMap) {
   }
 }
 
-processEnventsTpl(eventsTpl);
+processEventsTpl(eventsTpl);
 
 fs.writeFileSync('jetbrains/templates/ReactJS.xml', template(data));
 fs.writeFileSync('README.md', readme.replace(
diff --git a/jetbrains-react.jar b/jetbrains-react.jar
index f95c619..d429cc0 100644
Binary files a/jetbrains-react.jar and b/jetbrains-react.jar differ
diff --git a/jetbrains/templates/ReactJS.xml b/jetbrains/templates/ReactJS.xml
index ceba734..6996642 100644
--- a/jetbrains/templates/ReactJS.xml
+++ b/jetbrains/templates/ReactJS.xml
@@ -1,7 +1,7 @@
 <templateSet group="ReactJS">
   <template
       name="rcc"
-      value="import React, {&#10;  Component,&#10;  PropTypes,&#10;} from 'react';&#10;&#10;const $class$ = React.createClass({&#10;  render() {&#10;    return (&#10;      &lt;div&gt;$END$&lt;/div&gt;&#10;    );&#10;  }&#10;});&#10;&#10;export default $class$;&#10;"
+      value="import React, {&#10;  PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;const $class$ = React.createClass({&#10;  render() {&#10;    return (&#10;      &lt;div&gt;$END$&lt;/div&gt;&#10;    );&#10;  }&#10;});&#10;&#10;export default $class$;&#10;"
       description="Create a React.js component"
       toReformat="false"
       toShortenFQNames="true">
@@ -15,7 +15,7 @@
   </template>
   <template
       name="rcc5"
-      value="'use strict';&#10;&#10;var React = require('react');&#10;var PropTypes = PropTypes;&#10;&#10;var $class$ = React.createClass({&#10; render: function() {&#10;   return (&#10;     &lt;div&gt;$END$&lt;/div&gt;&#10;   );&#10; }&#10;});&#10;&#10;module.exports = $class$;&#10;"
+      value="&apos;use strict&apos;;&#10;&#10;var React = require(&apos;react&apos;);&#10;var PropTypes = React.PropTypes;&#10;&#10;var $class$ = React.createClass({&#10; render: function() {&#10;   return (&#10;     &lt;div&gt;$END$&lt;/div&gt;&#10;   );&#10; }&#10;});&#10;&#10;module.exports = $class$;&#10;"
       description="Create a React.js component"
       toReformat="false"
       toShortenFQNames="true">
@@ -29,7 +29,7 @@
   </template>
   <template
       name="rcls"
-      value="import React, {&#10;  Component,&#10;  PropTypes,&#10;} from 'react';&#10;&#10;class $class$ extends Component {&#10;  render() {&#10;    return (&#10;      &lt;div&gt;$END$&lt;/div&gt;&#10;    );&#10;  }&#10;}&#10;&#10;$class$.propTypes = {};&#10;$class$.defaultProps = {};&#10;&#10;export default $class$;&#10;"
+      value="import React, {&#10;  Component,&#10;  PropTypes,&#10;} from &apos;react&apos;;&#10;&#10;class $class$ extends Component {&#10;  render() {&#10;    return (&#10;      &lt;div&gt;$END$&lt;/div&gt;&#10;    );&#10;  }&#10;}&#10;&#10;$class$.propTypes = {};&#10;$class$.defaultProps = {};&#10;&#10;export default $class$;&#10;"
       description="Create a ES2015 class"
       toReformat="false"
       toShortenFQNames="true">
@@ -225,6 +225,33 @@
       <option name="JS_STATEMENT" value="true" />
     </context>
   </template>
+  <template
+      name="dn"
+      value="displayName: &apos;$END$&apos;,"
+      description="displayName"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="dnp"
+      value="$START$.displayName = &apos;$END$&apos;;"
+      description="displayName as a property"
+      toReformat="false"
+      toShortenFQNames="true">
+    <variable name="START" expression="" defaultValue="" alwaysStopAt="true" />
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
   <template
       name="fdn"
       value="findDOMNode($END$);"
@@ -346,7 +373,7 @@
   </template>
   <template
       name="dsih"
-      value="dangerouslySetInnerHTML={__html: '$END$'}"
+      value="dangerouslySetInnerHTML={__html: &apos;$END$&apos;}"
       description="dangerouslySetInnerHTML"
       toReformat="false"
       toShortenFQNames="true">
@@ -359,7 +386,7 @@
   </template>
   <template
       name="pts"
-      value="propTypes: {&#10;  $START$: PropTypes.$END$&#10;}&#10;"
+      value="propTypes: {&#10;  $START$: PropTypes.$END$&#10;},&#10;"
       description="propTypes"
       toReformat="false"
       toShortenFQNames="true">
@@ -479,7 +506,7 @@
   </template>
   <template
       name="ct"
-      value="contextTypes: {&#10;  $START$: PropTypes.$END$&#10;}&#10;"
+      value="contextTypes: {&#10;  $START$: PropTypes.$END$&#10;},&#10;"
       description="contextTypes"
       toReformat="false"
       toShortenFQNames="true">
@@ -493,7 +520,7 @@
   </template>
   <template
       name="cct"
-      value="childContextTypes: {&#10;  $START$: PropTypes.$END$&#10;}&#10;"
+      value="childContextTypes: {&#10;  $START$: PropTypes.$END$&#10;},&#10;"
       description="childContextTypes"
       toReformat="false"
       toShortenFQNames="true">
@@ -546,6 +573,19 @@
       <option name="JS_STATEMENT" value="true" />
     </context>
   </template>
+  <template
+      name="sdn"
+      value="static displayName = &apos;$END$&apos;;"
+      description="static displayName"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
   <template
       name="spt"
       value="static propTypes = {&#10;  $START$: PropTypes.$END$&#10;};&#10;"
@@ -603,7 +643,7 @@
     </context>
   </template>
   <template
-      name="csttr"
+      name="cstt"
       value="constructor(props, context$START$) {&#10;  super(props, context$END$);&#10;}&#10;"
       description="constructor(props, context)"
       toReformat="false"
@@ -616,6 +656,97 @@
       <option name="JS_STATEMENT" value="true" />
     </context>
   </template>
+  <template
+      name="tsn"
+      value="transitionName=&quot;$END$&quot;"
+      description="transitionName"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tsa"
+      value="transitionAppear={$END$}"
+      description="transitionAppear"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tse"
+      value="transitionEnter={$END$}"
+      description="transitionEnter"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tsl"
+      value="transitionLeave={$END$}"
+      description="transitionLeave"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tset"
+      value="transitionEnterTimeout={$END$}"
+      description="transitionEnterTimeout"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tslt"
+      value="transitionLeaveTimeout={$END$}"
+      description="transitionLeaveTimeout"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
+  <template
+      name="tsat"
+      value="transitionAppearTimeout={$END$}"
+      description="transitionAppearTimeout"
+      toReformat="false"
+      toShortenFQNames="true">
+    <context>
+      <option name="JAVA_SCRIPT" value="true" />
+      <option name="JS_EXPRESSION" value="true" />
+      <option name="JSX_HTML" value="true" />
+      <option name="JS_STATEMENT" value="true" />
+    </context>
+  </template>
   <template
       name="oncp"
       value="onCopy={$END$}"
diff --git a/package.json b/package.json
index a2b605e..9cf70c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jetbrains-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React snippets(live templates) for JetBrains series editors.",
   "main": "index.js",
   "scripts": {
diff --git a/src/template.yaml b/src/template.yaml
index 1ca6885..f782a4b 100644
--- a/src/template.yaml
+++ b/src/template.yaml
@@ -4,7 +4,6 @@ rcc:
   tpl:
     next: |
       import React, {
-        Component,
         PropTypes,
       } from 'react';
 
@@ -22,7 +21,7 @@ rcc:
       'use strict';
 
       var React = require('react');
-      var PropTypes = PropTypes;
+      var PropTypes = React.PropTypes;
 
       var $class$ = React.createClass({
        render: function() {
@@ -125,6 +124,17 @@ cwum:
       $END$
     },
 
+# displayName
+dn:
+  description: displayName
+  tpl: "displayName: '$END$',"
+
+dnp:
+  description: displayName as a property
+  tpl: "$START$.displayName = '$END$';"
+  variables:
+    - {name: 'START'}
+
 # ReactDOM.findDOMNode
 fdn:
   description: findDOMNode
@@ -271,6 +281,10 @@ gcc:
 # static
 
 # static propTypes
+sdn:
+  description: static displayName
+  tpl: static displayName = '$END$';
+
 spt:
   description: static propTypes
   tpl: |
@@ -315,7 +329,7 @@ scct:
     - {name: 'START'}
 
 # constructor
-csttr:
+cstt:
   description: constructor(props, context)
   tpl: |
     constructor(props, context$START$) {
@@ -324,3 +338,32 @@ csttr:
 
   variables:
     - {name: 'START'}
+
+# transition add-on
+tsn:
+  description: transitionName
+  tpl: transitionName="$END$"
+
+tsa:
+  description: transitionAppear
+  tpl: transitionAppear={$END$}
+
+tse:
+  description: transitionEnter
+  tpl: transitionEnter={$END$}
+
+tsl:
+  description: transitionLeave
+  tpl: transitionLeave={$END$}
+
+tset:
+  description: transitionEnterTimeout
+  tpl: transitionEnterTimeout={$END$}
+
+tslt:
+  description: transitionLeaveTimeout
+  tpl: transitionLeaveTimeout={$END$}
+
+tsat:
+  description: transitionAppearTimeout
+  tpl: transitionAppearTimeout={$END$}