diff --git a/website/src/parsers/js/transformers/jscodeshift/codeExample.txt b/website/src/parsers/js/transformers/jscodeshift/codeExample.txt
index 5f4e78f6..ba5e790f 100644
--- a/website/src/parsers/js/transformers/jscodeshift/codeExample.txt
+++ b/website/src/parsers/js/transformers/jscodeshift/codeExample.txt
@@ -1,3 +1,7 @@
+// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
+// Read more: https://github.com/facebook/jscodeshift#parser
+export const parser = '{{parser}}'
+
 // Press ctrl+space for code completion
 export default function transformer(file, api) {
   const j = api.jscodeshift;
diff --git a/website/src/parsers/js/transformers/jscodeshift/index.js b/website/src/parsers/js/transformers/jscodeshift/index.js
index 251f70eb..8e7e28b3 100644
--- a/website/src/parsers/js/transformers/jscodeshift/index.js
+++ b/website/src/parsers/js/transformers/jscodeshift/index.js
@@ -5,6 +5,20 @@ const ID = 'jscodeshift';
 
 const sessionMethods = new Set();
 
+// https://github.com/facebook/jscodeshift#parser
+const getJscodeshiftParser = (parser, parserSettings) => {
+  if (parser === 'typescript') {
+    if (parserSettings.typescript && parserSettings.typescript.jsx === false) {
+      return 'ts'
+    }
+    return 'tsx'
+  }
+  if (parser === 'flow') {
+    return 'flow'
+  }
+  return 'babel'
+}
+
 export default {
   id: ID,
   displayName: ID,
@@ -12,6 +26,14 @@ export default {
   homepage: pkg.homepage || 'https://github.com/facebook/jscodeshift',
 
   defaultParserID: 'recast',
+  compatibleParserIDs: new Set([
+    'typescript',
+    'flow',
+  ]),
+
+  formatCodeExample(codeExample, { parser, parserSettings }) {
+    return codeExample.replace('{{parser}}', `${getJscodeshiftParser(parser, parserSettings)}`)
+  },
 
   loadTransformer(callback) {
     require(['../../../transpilers/babel', 'jscodeshift'], (transpile, jscodeshift) => {
diff --git a/website/src/store/reducers.js b/website/src/store/reducers.js
index d8ce733e..e85f1b1d 100644
--- a/website/src/store/reducers.js
+++ b/website/src/store/reducers.js
@@ -107,6 +107,19 @@ function format(state=initialState.enableFormatting, action) {
   return state;
 }
 
+function getDefaultTransform(transformer, workbenchState) {
+  if (typeof transformer.formatCodeExample === 'function') {
+    return transformer.formatCodeExample(
+      transformer.defaultTransform,
+      {
+        parser: workbenchState.parser,
+        parserSettings: workbenchState.parserSettings || {},
+      },
+    )
+  }
+  return transformer.defaultTransform
+}
+
 function workbench(state=initialState.workbench, action, fullState) {
   function parserFromCategory(category) {
     const parser = fullState.parserPerCategory[category.id] ||
@@ -143,6 +156,15 @@ function workbench(state=initialState.workbench, action, fullState) {
           // Update parser settings
           newState.parserSettings =
             fullState.parserSettings[action.parser.id] || null;
+
+          // Check if we might want to reformat the code example
+          const transformer = getTransformerByID(state.transform.transformer)
+          if (transformer && state.transform.code === getDefaultTransform(transformer, state)) {
+            newState.transform = {
+              ...state.transform,
+              code: getDefaultTransform(transformer, newState),
+            }
+          }
         }
         return newState;
       }
@@ -150,8 +172,10 @@ function workbench(state=initialState.workbench, action, fullState) {
       return {...state, code: action.code};
     case actions.SELECT_TRANSFORMER:
       {
+        const parserIsCompatible =
+          action.transformer.compatibleParserIDs && action.transformer.compatibleParserIDs.has(state.parser)
         const differentParser =
-          action.transformer.defaultParserID !== state.parser;
+          action.transformer.defaultParserID !== state.parser && !parserIsCompatible;
         const differentTransformer =
           action.transformer.id !== state.transform.transformer ;
 
@@ -176,10 +200,10 @@ function workbench(state=initialState.workbench, action, fullState) {
             transformResult: null,
             code: snippetHasDifferentTransform ?
               state.transform.code :
-              action.transformer.defaultTransform,
+              getDefaultTransform(action.transformer, state),
             initialCode: snippetHasDifferentTransform ?
               fullState.activeRevision.getTransformCode() :
-              action.transformer.defaultTransform,
+              getDefaultTransform(action.transformer, state),
           };
         }
 
@@ -237,8 +261,8 @@ function workbench(state=initialState.workbench, action, fullState) {
           const transformer = getTransformerByID(state.transform.transformer);
           newState.transform = {
             ...state.transform,
-            code: transformer.defaultTransform,
-            initialCode: transformer.defaultTransform,
+            code: getDefaultTransform(transformer, state),
+            initialCode: getDefaultTransform(transformer, state),
           };
         }
         return newState;