diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000000..39789b11d5e
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,4 @@
+[*.js]
+indent_style = space
+indent_size = 2
+end_of_line = lf
diff --git a/packages/app/package.json b/packages/app/package.json
index 14d0a6e4a9e..bd9c41e2f0a 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -106,6 +106,7 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-system-import": "^1.1.5",
     "babel-plugin-system-import-transformer": "3.1.0",
+    "babel-plugin-transform-cx-jsx": "^17.12.0",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-strict-mode": "^0.0.2",
diff --git a/packages/app/src/app/components/CodeEditor/Monaco/index.js b/packages/app/src/app/components/CodeEditor/Monaco/index.js
index 320a7a41e3a..1e79db852b9 100644
--- a/packages/app/src/app/components/CodeEditor/Monaco/index.js
+++ b/packages/app/src/app/components/CodeEditor/Monaco/index.js
@@ -4,6 +4,7 @@ import { TextOperation } from 'ot';
 import { debounce } from 'lodash';
 import { getModulePath } from 'common/sandbox/modules';
 import { css } from 'glamor';
+import { listen } from 'codesandbox-api';
 
 import getTemplate from 'common/templates';
 import type {
@@ -134,6 +135,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   editor: any;
   monaco: any;
   receivingCode: ?boolean = false;
+  transpilationListener: ?Function;
 
   constructor(props: Props) {
     super(props);
@@ -158,6 +160,8 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       this.onSelectionChangedDebounced,
       500
     );
+
+    this.transpilationListener = this.setupTranspilationListener();
   }
 
   shouldComponentUpdate(nextProps: Props) {
@@ -191,6 +195,9 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
       if (this.typingsFetcherWorker) {
         this.typingsFetcherWorker.terminate();
       }
+      if (this.transpilationListener) {
+        this.transpilationListener();
+      }
       clearTimeout(this.sizeProbeInterval);
     });
 
@@ -199,6 +206,18 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   }
 
+  setupTranspilationListener() {
+    return listen(({ type, code, path }) => {
+      if (type === 'add-extra-lib') {
+        const dtsPath = `${path}.d.ts`;
+        this.monaco.languages.typescript.typescriptDefaults._extraLibs[
+          `file:///${dtsPath}`
+        ] = code;
+        this.commitLibChanges();
+      }
+    });
+  }
+
   configureEditor = async (editor: any, monaco: any) => {
     this.editor = editor;
     this.monaco = monaco;
diff --git a/packages/app/src/app/components/NewSandbox/index.js b/packages/app/src/app/components/NewSandbox/index.js
index 67afb62a3ec..b2439c8c936 100644
--- a/packages/app/src/app/components/NewSandbox/index.js
+++ b/packages/app/src/app/components/NewSandbox/index.js
@@ -10,7 +10,9 @@ import {
   newPreactSandboxUrl,
   newVueSandboxUrl,
   newAngularSandboxUrl,
+  newDojoSandboxUrl,
   newSvelteSandboxUrl,
+  newCxJSSandboxUrl,
   importFromGitHubUrl,
   uploadFromCliUrl,
 } from 'common/utils/url-generator';
@@ -21,6 +23,8 @@ import ParcelIcon from 'common/components/logos/Parcel';
 import VueIcon from 'common/components/logos/Vue';
 import SvelteIcon from 'common/components/logos/Svelte';
 import AngularIcon from 'common/components/logos/Angular';
+import CxJSIcon from 'common/components/logos/CxJS';
+import DojoIcon from 'common/components/logos/Dojo';
 
 import {
   Container,
@@ -53,7 +57,6 @@ function NewSandbox({ signals }) {
           href={parcelSandboxUrl()}
           onClick={() => signals.modalClosed()}
         />
-
         <Logo
           Icon={ReactIcon}
           width={50}
@@ -62,7 +65,6 @@ function NewSandbox({ signals }) {
           href={newSandboxUrl()}
           onClick={() => signals.modalClosed()}
         />
-
         <Logo
           Icon={VueIcon}
           width={50}
@@ -71,7 +73,6 @@ function NewSandbox({ signals }) {
           href={newVueSandboxUrl()}
           onClick={() => signals.modalClosed()}
         />
-
         <Logo
           Icon={AngularIcon}
           width={50}
@@ -104,6 +105,22 @@ function NewSandbox({ signals }) {
           href={newReactTypeScriptSandboxUrl()}
           onClick={() => signals.modalClosed()}
         />
+        <Logo
+          Icon={DojoIcon}
+          width={50}
+          height={50}
+          text="Dojo 2"
+          href={newDojoSandboxUrl()}
+          onClick={() => signals.closeModal()}
+        />
+        <Logo
+          Icon={CxJSIcon}
+          width={50}
+          height={50}
+          text="CxJS"
+          href={newCxJSSandboxUrl()}
+          onClick={() => signals.closeModal()}
+        />
         <Logo
           Icon={GithubIcon}
           width={50}
diff --git a/packages/app/src/sandbox/eval/index.js b/packages/app/src/sandbox/eval/index.js
index 55585724bd8..4ed6ffc0bb3 100644
--- a/packages/app/src/sandbox/eval/index.js
+++ b/packages/app/src/sandbox/eval/index.js
@@ -7,7 +7,9 @@ import {
   preact,
   reactTs,
   angular,
+  cxjs,
   babel,
+  dojo,
 } from 'common/templates';
 
 import reactPreset from './presets/create-react-app';
@@ -18,6 +20,8 @@ import sveltePreset from './presets/svelte';
 import angularPreset from './presets/angular-cli';
 import parcelPreset from './presets/parcel';
 import babelPreset from './presets/babel-repl';
+import cxjsPreset from './presets/cxjs';
+import dojoPreset from './presets/dojo';
 
 export default function getPreset(template: string) {
   switch (template) {
@@ -37,6 +41,10 @@ export default function getPreset(template: string) {
       return parcelPreset();
     case babel.name:
       return babelPreset();
+    case cxjs.name:
+      return cxjsPreset();
+    case dojo.name:
+      return dojoPreset();
     default:
       return reactPreset();
   }
diff --git a/packages/app/src/sandbox/eval/presets/cxjs/index.js b/packages/app/src/sandbox/eval/presets/cxjs/index.js
new file mode 100644
index 00000000000..dfd6e85339f
--- /dev/null
+++ b/packages/app/src/sandbox/eval/presets/cxjs/index.js
@@ -0,0 +1,82 @@
+import babelTranspiler from '../../transpilers/babel';
+import jsonTranspiler from '../../transpilers/json';
+import stylesTranspiler from '../../transpilers/style';
+import sassTranspiler from '../../transpilers/sass';
+import rawTranspiler from '../../transpilers/raw';
+import stylusTranspiler from '../../transpilers/stylus';
+import lessTranspiler from '../../transpilers/less';
+import tsTranspiler from '../../transpilers/typescript';
+
+import Preset from '../';
+
+export default function initialize() {
+  const cxjsPreset = new Preset(
+    'cxjs',
+    ['js', 'jsx', 'ts', 'tsx', 'json', 'less', 'scss', 'sass', 'styl', 'css'],
+    {},
+    {}
+  );
+
+  cxjsPreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
+    {
+      transpiler: babelTranspiler,
+      options: {
+        dynamicCSSModules: true,
+      },
+    },
+  ]);
+
+  cxjsPreset.registerTranspiler(module => /\.tsx?$/.test(module.path), [
+    { transpiler: tsTranspiler },
+  ]);
+
+  cxjsPreset.registerTranspiler(module => /\.css$/.test(module.path), [
+    { transpiler: stylesTranspiler },
+  ]);
+
+  cxjsPreset.registerTranspiler(module => /\.json$/.test(module.path), [
+    { transpiler: jsonTranspiler },
+  ]);
+
+  const sassWithConfig = {
+    transpiler: sassTranspiler,
+    options: {},
+  };
+
+  const lessWithConfig = {
+    transpiler: lessTranspiler,
+    options: {},
+  };
+
+  const stylusWithConfig = {
+    transpiler: stylusTranspiler,
+    options: {},
+  };
+  const styles = {
+    css: [],
+    scss: [sassWithConfig],
+    sass: [sassWithConfig],
+    less: [lessWithConfig],
+    styl: [stylusWithConfig],
+  };
+
+  /**
+   * Registers transpilers for all different combinations
+   *
+   * @returns
+   */
+  function registerStyleTranspilers() {
+    return Object.keys(styles).forEach(type => {
+      cxjsPreset.registerTranspiler(
+        module => new RegExp(`\\.${type}`).test(module.path),
+        [...styles[type], { transpiler: stylesTranspiler }]
+      );
+    });
+  }
+
+  registerStyleTranspilers();
+
+  cxjsPreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
+
+  return cxjsPreset;
+}
diff --git a/packages/app/src/sandbox/eval/presets/dojo/index.js b/packages/app/src/sandbox/eval/presets/dojo/index.js
new file mode 100644
index 00000000000..d382099e453
--- /dev/null
+++ b/packages/app/src/sandbox/eval/presets/dojo/index.js
@@ -0,0 +1,60 @@
+import { join, absolute } from 'common/utils/path';
+import Preset from '../';
+
+import typescriptTranspiler from '../../transpilers/typescript';
+import rawTranspiler from '../../transpilers/raw';
+import jsonTranspiler from '../../transpilers/json';
+import stylesTranspiler from '../../transpilers/style';
+import babelTranspiler from '../../transpilers/babel';
+
+export default function initialize() {
+  const preset = new Preset(
+    '@dojo/cli-create-app',
+    ['ts', 'tsx', 'js', 'json'],
+    {},
+    {
+      setup: async manager => {
+        const stylesPath = absolute(join('src', 'main.css'));
+        try {
+          const tModule = await manager.resolveTranspiledModuleAsync(
+            stylesPath,
+            '/'
+          );
+          await tModule.transpile(manager);
+          tModule.setIsEntry(true);
+          tModule.evaluate(manager);
+        } catch (e) {
+          if (e.type === 'module-not-found') {
+            // Do nothing
+          } else {
+            throw e;
+          }
+        }
+      },
+    }
+  );
+
+  preset.registerTranspiler(module => /\.tsx?$/.test(module.path), [
+    { transpiler: typescriptTranspiler },
+  ]);
+
+  preset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
+    { transpiler: babelTranspiler },
+  ]);
+
+  preset.registerTranspiler(module => /\.json$/.test(module.path), [
+    { transpiler: jsonTranspiler },
+  ]);
+
+  preset.registerTranspiler(module => /\.m\.css$/.test(module.path), [
+    { transpiler: stylesTranspiler, options: { module: true } },
+  ]);
+
+  preset.registerTranspiler(module => /\.css$/.test(module.path), [
+    { transpiler: stylesTranspiler },
+  ]);
+
+  preset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
+
+  return preset;
+}
diff --git a/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js b/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js
index 73f154263c7..911c816186a 100644
--- a/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js
+++ b/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js
@@ -269,6 +269,14 @@ self.addEventListener('message', async event => {
     ) {
       const pragmaticPlugin = await import(/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic');
       Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
+    }
+	
+	if (
+      flattenedPlugins.indexOf('transform-cx-jsx') > -1 &&
+      Object.keys(Babel.availablePlugins).indexOf('transform-cx-jsx') === -1
+    ) {
+      const cxJsxPlugin = await import(/* webpackChunkName: 'transform-cx-jsx' */ 'babel-plugin-transform-cx-jsx');
+      Babel.registerPlugin('transform-cx-jsx', cxJsxPlugin);
     }
   }
 
diff --git a/packages/app/src/sandbox/eval/transpilers/style/index.js b/packages/app/src/sandbox/eval/transpilers/style/index.js
index ec2a999d69f..75bbf255177 100644
--- a/packages/app/src/sandbox/eval/transpilers/style/index.js
+++ b/packages/app/src/sandbox/eval/transpilers/style/index.js
@@ -1,4 +1,5 @@
 // @flow
+import { dispatch } from 'codesandbox-api';
 import Transpiler from '../';
 import { type LoaderContext } from '../../transpiled-module';
 
@@ -7,6 +8,13 @@ import getModules from './get-modules';
 
 const getStyleId = id => id + '-css'; // eslint-disable-line
 
+function classesToDefinition(classes): string {
+  return Object.keys(classes).reduce(
+    (previous, className) => previous + `export const ${className}: string;\n`,
+    ''
+  );
+}
+
 class StyleTranspiler extends Transpiler {
   constructor() {
     super('style-loader');
@@ -24,12 +32,18 @@ class StyleTranspiler extends Transpiler {
 
   doTranspilation(code: string, loaderContext: LoaderContext) {
     const id = getStyleId(loaderContext._module.getId());
+    const { path } = loaderContext;
 
     if (loaderContext.options.module) {
       return getModules(code, loaderContext).then(({ css, exportTokens }) => {
         let result = insertCss(id, css);
         result += `\nmodule.exports=${JSON.stringify(exportTokens)};`;
 
+        dispatch({
+          type: 'add-extra-lib',
+          path,
+          code: classesToDefinition(exportTokens),
+        });
         return Promise.resolve({ transpiledCode: result });
       });
     }
diff --git a/packages/common/components/logos/CxJS.js b/packages/common/components/logos/CxJS.js
new file mode 100644
index 00000000000..2ee2f131736
--- /dev/null
+++ b/packages/common/components/logos/CxJS.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import cxjs from './cxjs.svg';
+
+export default props => <img alt="cxjs" src={cxjs} {...props} />;
diff --git a/packages/common/components/logos/Dojo.js b/packages/common/components/logos/Dojo.js
new file mode 100644
index 00000000000..e11b82d9f50
--- /dev/null
+++ b/packages/common/components/logos/Dojo.js
@@ -0,0 +1,267 @@
+import React from 'react';
+
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: {
+  width: number,
+  height: number,
+  className: ?string,
+}) => (
+  <svg
+    className={className}
+    width={`${width}px`}
+    height={`${height}px`}
+    viewBox="0 0 292.24 208.8"
+  >
+    <defs>
+      <style>{'.cls-4{fill:#f15a24}.cls-6{fill:#c1272d}'}</style>
+      <linearGradient
+        id="linear-gradient"
+        x1="69.16"
+        y1="140.13"
+        x2="68.94"
+        y2="141.08"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#ff1d25" stopOpacity=".5" />
+        <stop offset=".06" stopColor="#ff1d25" stopOpacity=".54" />
+        <stop offset=".37" stopColor="#ff1d25" stopOpacity=".74" />
+        <stop offset=".64" stopColor="#ff1d25" stopOpacity=".88" />
+        <stop offset=".86" stopColor="#ff1d25" stopOpacity=".97" />
+        <stop offset="1" stopColor="#ff1d25" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-2"
+        x1="76.7"
+        y1="161.55"
+        x2="76.7"
+        y2="138.5"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#fffa8f" />
+        <stop offset="1" stopColor="#fb784b" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-3"
+        x1="248.45"
+        y1="60.44"
+        x2="256.95"
+        y2="53.44"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#5bcb99" />
+        <stop offset="1" stopColor="#85a8e8" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-4"
+        x1="87.5"
+        y1="144.92"
+        x2="352.5"
+        y2="7.42"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#34e28b" />
+        <stop offset="1" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-5"
+        x1="136.18"
+        y1="171.56"
+        x2="157.02"
+        y2="171.56"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#c297ff" />
+        <stop offset="1" stopColor="#ae31bb" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-6"
+        x1="51.23"
+        y1="271.95"
+        x2="314.73"
+        y2="66.45"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" />
+        <stop offset="1" stopColor="#d23de2" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-7"
+        x1="246.16"
+        y1="48.83"
+        x2="235.49"
+        y2="84.83"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" />
+        <stop offset="1" stopOpacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-8"
+        x1="148.62"
+        y1="188.16"
+        x2="223.55"
+        y2="206.3"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" stopColor="#2db5f9" />
+        <stop offset="1" />
+      </linearGradient>
+      <linearGradient
+        id="linear-gradient-9"
+        x1="90.05"
+        y1="-.52"
+        x2="40.55"
+        y2="135.48"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" />
+        <stop offset=".21" stopColor="#48080a" />
+        <stop offset=".42" stopColor="#891014" />
+        <stop offset=".61" stopColor="#bc151b" />
+        <stop offset=".78" stopColor="#e01a21" />
+        <stop offset=".91" stopColor="#f71c24" />
+        <stop offset="1" stopColor="#ff1d25" />
+      </linearGradient>
+    </defs>
+    <g style={{ isolation: 'isolate' }}>
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            d="M35.5 134.36c.23.37.46.73.7 1.09a77.28 77.28 0 0 0 12.36 13.73A60.52 60.52 0 0 0 87 162.89c.86 0 1.75 0 2.64-.07a90 90 0 0 0 28.26-7 89.8 89.8 0 0 1-12.15 1.11 49.36 49.36 0 0 1-36.69-16.28 89.37 89.37 0 0 1-33.56-6.29z"
+            fill="url(#linear-gradient-2)"
+          />
+          <path
+            className="cls-4"
+            d="M87 41.39a60.71 60.71 0 0 1 52 29.33 49.52 49.52 0 0 0-47.13-10.85c11.08 5.37 26.3 9.47 47.19 10.9 0 0-1-19.89-26.48-30.28C77.05 26 72 28.88 63 13.88c0 0-2.93 15 8.07 29.62A60.88 60.88 0 0 1 87 41.39z"
+          />
+          <path
+            d="M112.58 40.49c-12.16-5-20.75-7.89-27.15-10.2A44.61 44.61 0 0 0 92 41.6a60.72 60.72 0 0 1 47 29.12 49.36 49.36 0 0 0-27.46-12.49 145 145 0 0 0 26.73 12.47l.79.07S138 50.88 112.58 40.49z"
+            fill="#ed1c24"
+          />
+          <path
+            className="cls-6"
+            d="M139 70.76h.12c.39-2.17 2.78-19.34-16.58-34.38C93.67 14 88 11.88 86.65 0a37.16 37.16 0 0 0-1.22 30.29c6.4 2.31 15 5.23 27.15 10.2 25.42 10.39 26.48 30.28 26.48 30.28z"
+          />
+          <path
+            d="M226.74 51.2a45 45 0 0 1 29.52 11c10.4.62 19.41 4.74 25.44 10.63 0 0-24.29-35.29-67.13-20.62a55.76 55.76 0 0 0-11 5.36 45 45 0 0 1 23.17-6.37z"
+            fill="url(#linear-gradient-3)"
+          />
+          <path
+            d="M226.74 51.2a44.93 44.93 0 0 0-23.12 6.37c.41-.26.83-.5 1.24-.75-34.61 20.39-77 83-135.81 83.79a49.36 49.36 0 0 0 36.69 16.28 89.8 89.8 0 0 0 12.15-1.11c38.26-15.76 75-53.46 91.68-71.73C225 67.1 242 61.34 256.26 62.21a45 45 0 0 0-29.52-11.01z"
+            fill="url(#linear-gradient-4)"
+          />
+          <path
+            d="M137.4 172.57a28.13 28.13 0 0 0-1.22 7.83 29.91 29.91 0 0 0 1.37 9 22.14 22.14 0 0 1 7.36-19.71c.06-.23.12-.45.19-.68a27.24 27.24 0 0 1 11.9-15.32h-.12a52.24 52.24 0 0 0-5.33 2.05 27.93 27.93 0 0 0-14.15 16.83z"
+            fill="url(#linear-gradient-5)"
+          />
+          <path
+            d="M292.24 105.89a56.71 56.71 0 0 0-10.62-33.12c-6-5.85-15-9.94-25.36-10.56a45 45 0 0 1 15.65 34.17c0 15.17-5.5 32.51-23.34 41.84-26 13.59-65.81 7.12-91.66 15.51h.11A27.21 27.21 0 0 0 145.1 169c-.07.23-.13.45-.19.68 7.58-6.64 22.52-11.42 51.66-7.67 20.82 2.68 37.35 3.41 51.55-.66a55.09 55.09 0 0 0 33.74-22.73 56.74 56.74 0 0 0 10.38-32.73z"
+            fill="url(#linear-gradient-6)"
+          />
+          <path
+            d="M292.24 105.89a56.71 56.71 0 0 0-10.62-33.12c-6-5.85-15-9.94-25.36-10.56a45 45 0 0 1 15.65 34.17c0 15.17-5.5 32.51-23.34 41.84-26 13.59-65.81 7.12-91.66 15.51h.11A27.21 27.21 0 0 0 145.1 169c-.07.23-.13.45-.19.68 7.58-6.64 22.52-11.42 51.66-7.67 20.82 2.68 37.35 3.41 51.55-.66a55.09 55.09 0 0 0 33.74-22.73 56.74 56.74 0 0 0 10.38-32.73z"
+            opacity=".49"
+            fill="url(#linear-gradient-7)"
+          />
+          <path
+            d="M163.24 203.2a27.35 27.35 0 0 1-18.3-33.6v.11a22.14 22.14 0 0 0-7.36 19.7 28 28 0 0 0 45 12.54 27.27 27.27 0 0 1-19.34 1.25z"
+            fill="url(#linear-gradient-8)"
+          />
+          <path
+            d="M172.74 201.22c2.84-8.26 12-21 21.83-15.17 0 0 8 4.5 9.67-8.16 0 0 6 29.79-22.87 28.79 0 0 6.5-4.75 6.43-9.63 0-.05-6.87 4.19-15.06 4.17z"
+            style={{ mixBlendMode: 'screen' }}
+            fill="#2db5f9"
+          />
+          <path
+            d="M184.27 183c2.85-1.45 5.55-2.92 10.8-.58 4.08 1.81 9.21-5.27 4.77-11.59 0 0 .29 6.53-5 6.47s-8.22 2.24-10.57 5.7z"
+            style={{ mixBlendMode: 'screen' }}
+            fill="#5fd2ff"
+          />
+          <path
+            d="M213.27 88.19c-6.91 9.42-17.05 17.31-18.24 19.24s2 8.18 6.75 8.63 1.1-1.81.7-4 1.41 1.4 7.05.55-2-2.93-1.52-5.79 6.34-8.26 8.66-13.7 6.29 0 4.26 4.25c-.81 1.68 6.44-4.74 2.78-9.64s-6.41-5.04-10.44.46zm-19.72 20.6c-1 1-4 3.17-4 3.17s2.94 4.08 6.72 4c0 0 .81-.39-.36-1.59s-2.63-4.86-2.36-5.58z"
+            fill="#219058"
+          />
+          <path
+            d="M91.87 59.87C82 55.1 75.46 49.33 71.09 43.5a60.74 60.74 0 0 0-35.59 90.86 89.37 89.37 0 0 0 33.55 6.25 49.5 49.5 0 0 1 22.82-80.74z"
+            fill="url(#linear-gradient-9)"
+          />
+          <path
+            d="M92 41.6c2.7 3.89 10.44 10.61 19.56 16.64A49.25 49.25 0 0 1 139 70.72 60.7 60.7 0 0 0 92 41.6z"
+            fill="#f7b852"
+          />
+          <path
+            d="M92 41.6c-1.65-.14-3.32-.21-5-.21a60.88 60.88 0 0 0-15.9 2.11c4.37 5.83 11 11.6 20.78 16.37a49.57 49.57 0 0 1 13.87-2 48.34 48.34 0 0 1 5.81.35C102.43 52.21 94.69 45.49 92 41.6z"
+            fill="#ff8431"
+          />
+          <path
+            d="M125.7 55.43c.32 0-7.42-7-16.33-9.75 3.94 7.45 7.31 9.75 16.33 9.75z"
+            fill="#fffb69"
+          />
+          <path
+            className="cls-6"
+            d="M108.52 23.7a83.68 83.68 0 0 1 8.75 6.12c.7.53-1.25-4.75-3.5-5.75a10 10 0 0 0-5.25-.37zm10.79 7.64a97.41 97.41 0 0 1 8.69 6.21c.71.51-1.2-4.76-3.44-5.78a10.08 10.08 0 0 0-5.25-.43zm10.17 7.48a25.66 25.66 0 0 1 4.7 5.87c.35.51.09-3.46-1.23-4.58a7 7 0 0 0-3.47-1.29z"
+          />
+          <path
+            d="M82.66 135.09c-.28-.87 3.13-2 4-2a16 16 0 0 1 4.77 1.58 21.71 21.71 0 0 1-6.5 1.33 5.8 5.8 0 0 1-2.27-.91zm12.28-2.9c-.3-.67 2.34-1.84 3.06-1.95a12.73 12.73 0 0 1 4 .87 18 18 0 0 1-5.12 1.65 4.82 4.82 0 0 1-1.94-.57zm10.27-3.77c-.3-.53 1.77-1.72 2.35-1.88a10.55 10.55 0 0 1 3.32.36 14.3 14.3 0 0 1-4.06 1.81 3.93 3.93 0 0 1-1.61-.29zm8.17-3.71c-.31-.46 1.49-1.7 2-1.89a9.94 9.94 0 0 1 3.06.1 13.21 13.21 0 0 1-3.58 1.94 3.68 3.68 0 0 1-1.48-.15zm7.62-4.17c-.3-.39 1.2-1.55 1.65-1.74a8.58 8.58 0 0 1 2.66-.07 11.78 11.78 0 0 1-3 1.87 3.29 3.29 0 0 1-1.31-.06zm-50.65 15.54c-.14-1 3.66-1.56 4.63-1.46a17.05 17.05 0 0 1 4.77 2.49 23.44 23.44 0 0 1-7.15.34 6.34 6.34 0 0 1-2.25-1.37z"
+            fill="#44c688"
+          />
+          <path
+            className="cls-6"
+            d="M72.68 21.24c2.65 3 8.94 5 8.94 5s-1.5-3.49-1.25-10.13c0-.23-7.69-.12-9-6.43-.27-1.26-1.37 8.53 1.31 11.56z"
+          />
+          <path
+            className="cls-4"
+            d="M46.54 166.82a7.35 7.35 0 0 1 3-5.19c.08-.06.16-.09.24-.14a16.17 16.17 0 0 0-1.91-.33c-9.16-1.37-11.48 4.09-12 10.21a9.21 9.21 0 0 0 0 1 11.11 11.11 0 0 1 10.54-5.61z"
+          />
+          <path
+            className="cls-4"
+            d="M57.7 164.83c-9.1-5.53-14.22-5.93-16.25 9.55 0 0 9.58-7.58 14.11-2.57 4.91 5.45 11.61.43 8.09-2.75a25.19 25.19 0 0 0-5.95-4.23z"
+          />
+          <path
+            className="cls-4"
+            d="M53.92 166.62c-5.16 3.44-5.15 11.53-5.15 11.53s9.42-5.1 8.68-8.27a3.92 3.92 0 0 0-3.53-3.26zM11 103a7.33 7.33 0 0 1 6-.9 2.18 2.18 0 0 1 .27.11 17.74 17.74 0 0 0-.94-1.7c-4.66-8-10.37-6.4-15.45-3-.3.2-.57.41-.84.63a11.11 11.11 0 0 1 11 4.72.53.53 0 0 1-.04.14z"
+          />
+          <path
+            className="cls-4"
+            d="M20.8 112.52c-3.31-13.13-6-18.21-18.68-9.13 0 0 10.87-3.13 12.11 12.33.59 7.32 7.61 8.78 7.53 4a24.9 24.9 0 0 0-.96-7.2z"
+          />
+          <path
+            className="cls-4"
+            d="M16.17 105.49c-6-1.43-12 4.09-12 4.09s9.28-.32 10.41 5.31c.67 3.19 1.59-9.4 1.59-9.4z"
+          />
+          <path
+            d="M209.57 84.05a74 74 0 0 1 20.71-16.71c7.55-4 18.27-6.48 24.74-6.16l2.48 2.13-1.3-.11a50.57 50.57 0 0 0-25.47 5 73.67 73.67 0 0 0-21.16 15.85z"
+            fill="#29b36e"
+          />
+          <path
+            d="M255.94 61.25a45.88 45.88 0 0 1 14 3.59 36.75 36.75 0 0 1 11.79 8 36.45 36.45 0 0 0-12.15-7.08 58.3 58.3 0 0 0-12.06-2.45L255 61.18z"
+            fill="#6fd191"
+          />
+          <path
+            d="M145.48 167.88a36.33 36.33 0 0 1 4.16-2.55c1-.5 2-1 3.09-1.39s2.12-.77 3.18-1.13a61.33 61.33 0 0 1 13.17-2.42 127.82 127.82 0 0 1 26.53 1.05 260.84 260.84 0 0 0 26.3 2.52c8.79.28 17.68-.24 26.21-2.57-8.49 2.49-17.4 3.19-26.22 3.08a261.92 261.92 0 0 1-26.41-2 126.86 126.86 0 0 0-26.27-.54 59.18 59.18 0 0 0-12.77 2.59c-1 .36-2 .69-3 1.14a30.87 30.87 0 0 0-2.91 1.37 29 29 0 0 0-5.26 3.61l-.71.62a24.83 24.83 0 0 1 .91-3.38z"
+            fill="#c83ad7"
+          />
+          <path
+            className="cls-6"
+            d="M93.51 63.8c-8.5 1.88-7.19 8.63-7.19 8.63s2.69-3.25 17.5-5a70.07 70.07 0 0 1-10.31-3.63z"
+          />
+          <path
+            d="M137.55 189.42a22.32 22.32 0 0 1-.11-5.66 24.87 24.87 0 0 1 3.72-10.82 26.7 26.7 0 0 1 3.72-4.52l.61-.56s-.84 2.7-.94 3.36a24.54 24.54 0 0 0-2.16 2.58 23.79 23.79 0 0 0-4.45 10 21.38 21.38 0 0 0-.39 5.62z"
+            fill="#fba9ff"
+          />
+          <path
+            d="M67.07 140.61c-4.83-5.31-8.9-13.76-10.62-21.67a48.81 48.81 0 0 1-1.1-12.69l.18-3.18.47-3.15a30.19 30.19 0 0 1 .62-3.12 27.19 27.19 0 0 1 .81-3.07 47.28 47.28 0 0 1 5.12-11.56A52.69 52.69 0 0 1 66.11 77l2-2.4c.67-.81 1.46-1.51 2.19-2.27a49.79 49.79 0 0 1 10-7.59 53.25 53.25 0 0 1 11.53-4.84 53 53 0 0 0-11.3 5.1 49.38 49.38 0 0 0-9.65 7.8c-.69.77-1.45 1.48-2.09 2.29l-1.94 2.42a52.85 52.85 0 0 0-3.35 5.2 46.33 46.33 0 0 0-4.65 11.4 25.56 25.56 0 0 0-.69 3 28.17 28.17 0 0 0-.51 3l-.34 3-.09 3.07a47.22 47.22 0 0 0 1.42 12.14 48.39 48.39 0 0 0 11.52 21.28l.89 1s-3.24.06-3.98.01z"
+            fill="#ff737d"
+          />
+          <path
+            d="M117.89 155.78a63.46 63.46 0 0 1-13.28 1.51 49.93 49.93 0 0 1-13.28-2.19 62.42 62.42 0 0 1-12.47-5.24A46.43 46.43 0 0 1 68 141.62l-.93-1s3.19 0 4-.08a44.77 44.77 0 0 0 9 7.35 60.26 60.26 0 0 0 11.79 5.71 48.25 48.25 0 0 0 12.82 2.83 64 64 0 0 0 13.21-.65z"
+            fill="#fff4c0"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/common/components/logos/cxjs.svg b/packages/common/components/logos/cxjs.svg
new file mode 100644
index 00000000000..df3e67bd064
--- /dev/null
+++ b/packages/common/components/logos/cxjs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" viewBox="0 0 90 90"><defs id="defs220"><linearGradient y2="40.68" x2="55.64" y1="40.68" x1="38.1" gradientUnits="userSpaceOnUse" id="XMLID_3_"><stop id="stop7" offset="0" stop-color="#8ab1d5"/><stop id="stop9" offset=".5" stop-color="#70a3cd"/><stop id="stop11" offset=".69" stop-color="#5798c6"/><stop id="stop13" offset=".87" stop-color="#3f90c1"/><stop id="stop15" offset="1" stop-color="#358dbf"/></linearGradient><linearGradient y2="40.68" x2="90.72" y1="40.68" x1="73.18" gradientUnits="userSpaceOnUse" id="XMLID_4_"><stop id="stop19" offset="0" stop-color="#d171ad"/><stop id="stop21" offset=".42" stop-color="#ce60a1"/><stop id="stop23" offset=".51" stop-color="#cd5b9f"/><stop id="stop25" offset="1" stop-color="#b83d8a"/></linearGradient><linearGradient y2="40.68" x2="46.87" y1="40.68" x1="29.33" gradientUnits="userSpaceOnUse" id="XMLID_5_"><stop id="stop29" offset="0" stop-color="#84a4c2"/><stop id="stop31" offset=".5" stop-color="#6892b6"/><stop id="stop33" offset="1" stop-color="#2f75a0"/></linearGradient><linearGradient y2="41.75" x2="79.57" y1="40.52" x1="97.46" gradientUnits="userSpaceOnUse" id="XMLID_6_"><stop id="stop37" offset="0" stop-color="#d171ad"/><stop id="stop39" offset=".42" stop-color="#ce60a1"/><stop id="stop41" offset=".51" stop-color="#cd5b9f"/><stop id="stop43" offset="1" stop-color="#b83d8a"/></linearGradient><linearGradient y2="25.49" x2="64.41" y1="25.49" x1="46.87" gradientUnits="userSpaceOnUse" id="XMLID_7_"><stop id="stop47" offset="0" stop-color="#8fccd5"/><stop id="stop49" offset=".5" stop-color="#5bbac7"/><stop id="stop51" offset="1" stop-color="#00aab9"/></linearGradient><linearGradient y2="25.49" x2="117.03" y1="25.49" x1="99.49" gradientUnits="userSpaceOnUse" id="XMLID_8_"><stop id="stop55" offset="0" stop-color="#832f75"/><stop id="stop57" offset=".99" stop-color="#bb87bc"/></linearGradient><linearGradient y2="25.49" x2="81.95" y1="25.49" x1="64.41" gradientUnits="userSpaceOnUse" id="XMLID_9_"><stop id="stop61" offset="0" stop-color="#27aae1"/><stop id="stop63" offset=".2" stop-color="#759dd2"/><stop id="stop65" offset=".45" stop-color="#a28cc2"/><stop id="stop67" offset=".68" stop-color="#bd7fb7"/><stop id="stop69" offset=".87" stop-color="#cc75b0"/><stop id="stop71" offset="1" stop-color="#d171ad"/></linearGradient><linearGradient y2="25.49" x2="55.64" y1="25.49" x1="38.1" gradientUnits="userSpaceOnUse" id="XMLID_10_"><stop id="stop75" offset="0" stop-color="#77b2c6"/><stop id="stop77" offset=".5" stop-color="#349ab4"/><stop id="stop79" offset="1" stop-color="#0089a6"/></linearGradient><linearGradient y2="25.49" x2="73.18" y1="25.49" x1="55.64" gradientUnits="userSpaceOnUse" id="XMLID_11_"><stop id="stop83" offset="0" stop-color="#b1dae0"/><stop id="stop85" offset=".5" stop-color="#82c7d1"/><stop id="stop87" offset=".58" stop-color="#7ac4cf"/><stop id="stop89" offset=".83" stop-color="#64bcc9"/><stop id="stop91" offset="1" stop-color="#5bbac7"/></linearGradient><linearGradient y2="25.49" x2="90.72" y1="25.49" x1="73.18" gradientUnits="userSpaceOnUse" id="XMLID_12_"><stop id="stop95" offset="0" stop-color="#ac2f92"/><stop id="stop97" offset=".99" stop-color="#d970ac"/></linearGradient><linearGradient y2="33.79" x2="99.49" y1="45.81" x1="99.49" gradientUnits="userSpaceOnUse" id="XMLID_15_"><stop id="stop101" offset=".01" stop-color="#bb6cac"/><stop id="stop103" offset="1" stop-color="#973a87"/></linearGradient><linearGradient y2="25.49" x2="108.26" y1="25.49" x1="90.72" gradientUnits="userSpaceOnUse" id="XMLID_19_"><stop id="stop107" offset="0" stop-color="#973a87"/><stop id="stop109" offset=".99" stop-color="#bb6cac"/></linearGradient><linearGradient y2="55.87" x2="90.72" y1="55.87" x1="73.18" gradientUnits="userSpaceOnUse" id="XMLID_20_"><stop id="stop113" offset="0" stop-color="#d171ad"/><stop id="stop115" offset=".42" stop-color="#ce60a1"/><stop id="stop117" offset=".51" stop-color="#cd5b9f"/><stop id="stop119" offset="1" stop-color="#b83d8a"/></linearGradient><linearGradient y2="55.87" x2="94.29" y1="55.87" x1="83.15" gradientUnits="userSpaceOnUse" id="XMLID_21_"><stop id="stop123" offset="0" stop-color="#d171ad"/><stop id="stop125" offset=".42" stop-color="#ce60a1"/><stop id="stop127" offset=".51" stop-color="#cd5b9f"/><stop id="stop129" offset="1" stop-color="#b83d8a"/></linearGradient><linearGradient y2="71.06" x2="90.72" y1="71.06" x1="73.18" gradientUnits="userSpaceOnUse" id="XMLID_23_"><stop id="stop133" offset="0" stop-color="#ac2f92"/><stop id="stop135" offset=".99" stop-color="#d970ac"/></linearGradient><linearGradient y2="55.87" x2="108.26" y1="55.87" x1="90.72" gradientUnits="userSpaceOnUse" id="XMLID_24_"><stop id="stop139" offset="0" stop-color="#973a87"/><stop id="stop141" offset=".99" stop-color="#bb6cac"/></linearGradient><linearGradient y2="71.06" x2="108.26" y1="71.06" x1="90.72" gradientUnits="userSpaceOnUse" id="XMLID_25_"><stop id="stop145" offset="0" stop-color="#973a87"/><stop id="stop147" offset=".99" stop-color="#bb6cac"/></linearGradient><linearGradient y2="55.87" x2="46.87" y1="55.87" x1="29.33" gradientUnits="userSpaceOnUse" id="XMLID_26_"><stop id="stop151" offset="0" stop-color="#5080b1"/><stop id="stop153" offset=".14" stop-color="#477bae"/><stop id="stop155" offset=".38" stop-color="#2a6fa5"/><stop id="stop157" offset=".58" stop-color="#00639b"/><stop id="stop159" offset="1" stop-color="#004e8c"/></linearGradient><linearGradient y2="55.87" x2="55.64" y1="55.87" x1="38.1" gradientUnits="userSpaceOnUse" id="XMLID_27_"><stop id="stop163" offset="0" stop-color="#84a4c2"/><stop id="stop165" offset=".5" stop-color="#6892b6"/><stop id="stop167" offset="1" stop-color="#2f75a0"/></linearGradient><linearGradient y2="71.06" x2="55.64" y1="71.06" x1="38.1" gradientUnits="userSpaceOnUse" id="XMLID_28_"><stop id="stop171" offset="0" stop-color="#77b2c6"/><stop id="stop173" offset=".5" stop-color="#349ab4"/><stop id="stop175" offset="1" stop-color="#0089a6"/></linearGradient><linearGradient y2="71.06" x2="73.18" y1="71.06" x1="55.64" gradientUnits="userSpaceOnUse" id="XMLID_29_"><stop id="stop179" offset="0" stop-color="#b1dae0"/><stop id="stop181" offset=".5" stop-color="#82c7d1"/><stop id="stop183" offset=".58" stop-color="#7ac4cf"/><stop id="stop185" offset=".83" stop-color="#64bcc9"/><stop id="stop187" offset="1" stop-color="#5bbac7"/></linearGradient><linearGradient y2="71.06" x2="64.41" y1="71.06" x1="46.87" gradientUnits="userSpaceOnUse" id="XMLID_30_"><stop id="stop191" offset="0" stop-color="#8fccd5"/><stop id="stop193" offset=".5" stop-color="#5bbac7"/><stop id="stop195" offset="1" stop-color="#00aab9"/></linearGradient><linearGradient y2="71.06" x2="81.95" y1="71.06" x1="64.41" gradientUnits="userSpaceOnUse" id="XMLID_31_"><stop id="stop199" offset="0" stop-color="#27aae1"/><stop id="stop201" offset=".14" stop-color="#64a2d7"/><stop id="stop203" offset=".42" stop-color="#9b8fc5"/><stop id="stop205" offset=".67" stop-color="#ba81b8"/><stop id="stop207" offset=".87" stop-color="#cb76b0"/><stop id="stop209" offset="1" stop-color="#d171ad"/></linearGradient><linearGradient y2="71.06" x2="117.03" y1="71.06" x1="99.49" gradientUnits="userSpaceOnUse" id="XMLID_32_"><stop id="stop213" offset="0" stop-color="#832f75"/><stop id="stop215" offset=".99" stop-color="#bb87bc"/></linearGradient><linearGradient xlink:href="#XMLID_12_" id="linearGradient3245" gradientUnits="userSpaceOnUse" x1="73.18" y1="25.49" x2="90.72" y2="25.49"/><linearGradient xlink:href="#XMLID_23_" id="linearGradient3249" gradientUnits="userSpaceOnUse" x1="73.18" y1="71.06" x2="90.72" y2="71.06"/><linearGradient xlink:href="#XMLID_9_" id="linearGradient3251" gradientUnits="userSpaceOnUse" x1="64.41" y1="25.49" x2="81.95" y2="25.49"/></defs><style id="style3">.st9{fill:url(#XMLID_12_)}.st14{fill:url(#XMLID_23_)}</style><path id="XMLID_325_" transform="translate(-28 -2.6)" fill="url(#XMLID_3_)" d="M55.6 33.1H38.1l8.8 15.2z"/><path id="XMLID_314_" transform="translate(-28 -2.6)" fill="url(#XMLID_4_)" d="M90.7 33.1H73.2l8.7 15.2z"/><path id="XMLID_309_" transform="translate(-28 -2.6)" fill="url(#XMLID_5_)" d="M38.1 33.1l-8.8 15.2h17.6z"/><path id="XMLID_307_" transform="translate(-28 -2.6)" fill="url(#XMLID_6_)" d="M90.7 33.1l-8.8 15.2h17.6z"/><path id="XMLID_304_" transform="translate(-28 -2.6)" fill="url(#XMLID_7_)" d="M64.4 17.9H46.9l8.7 15.2z"/><path id="XMLID_257_" transform="translate(-28 -2.6)" fill="url(#XMLID_8_)" d="M117 17.9H99.5l8.8 15.2z"/><path id="XMLID_249_" transform="translate(-28 -2.6)" fill="url(#XMLID_10_)" d="M46.9 17.9l-8.8 15.2h17.5z"/><path id="XMLID_248_" transform="translate(-28 -2.6)" fill="url(#XMLID_11_)" d="M64.4 17.9l-8.8 15.2h17.6z"/><path class="st9" id="XMLID_148_" transform="translate(-28 -2.6)" fill="url(#XMLID_12_)" d="M81.9 17.9l-8.7 15.2h17.5z"/><path id="XMLID_90_" transform="translate(-28 -2.6)" fill="url(#XMLID_15_)" d="M90.7 33.1h17.6l-8.8 15.2z"/><path id="XMLID_88_" transform="translate(-28 -2.6)" fill="url(#XMLID_19_)" d="M99.5 17.9l8.8 15.2H90.7z"/><path id="XMLID_87_" transform="translate(-28 -2.6)" fill="url(#XMLID_20_)" d="M90.7 63.5H73.2l8.7-15.2z"/><path id="XMLID_86_" transform="translate(-28 -2.6)" fill="url(#XMLID_21_)" d="M90.7 63.5l-8.8-15.2h17.6z"/><path class="st14" id="XMLID_85_" transform="translate(-28 -2.6)" fill="url(#XMLID_23_)" d="M81.9 78.7l-8.7-15.2h17.5z"/><path id="XMLID_82_" transform="translate(-28 -2.6)" fill="url(#XMLID_24_)" d="M90.7 63.5h17.6l-8.8-15.2z"/><path id="XMLID_80_" transform="translate(-28 -2.6)" fill="url(#XMLID_25_)" d="M99.5 78.7l8.8-15.2H90.7z"/><path id="XMLID_71_" transform="translate(-28 -2.6)" fill="url(#XMLID_26_)" d="M29.3 48.3l8.8 15.2 8.8-15.2z"/><path id="XMLID_70_" transform="translate(-28 -2.6)" fill="url(#XMLID_27_)" d="M38.1 63.5h17.5l-8.7-15.2z"/><path id="XMLID_69_" transform="translate(-28 -2.6)" fill="url(#XMLID_28_)" d="M38.1 63.5l8.8 15.2 8.7-15.2z"/><path id="XMLID_68_" transform="translate(-28 -2.6)" fill="url(#XMLID_29_)" d="M55.6 63.5l8.8 15.2 8.8-15.2z"/><path id="XMLID_67_" transform="translate(-28 -2.6)" fill="url(#XMLID_30_)" d="M46.9 78.7h17.5l-8.8-15.2z"/><path id="XMLID_65_" transform="translate(-28 -2.6)" fill="url(#XMLID_32_)" d="M99.5 78.7H117l-8.7-15.2z"/><path transform="rotate(180 63.54 24.2)" id="polygon3243" class="st9" fill="url(#linearGradient3245)" d="M90.7 33.1l-8.8-15.2-8.7 15.2z"/><path transform="rotate(180 63.54 69.79)" id="polygon3247" class="st14" fill="url(#linearGradient3249)" d="M90.7 63.5l-8.8 15.2-8.7-15.2z"/></svg>
\ No newline at end of file
diff --git a/packages/common/templates/configuration/babelrc/index.js b/packages/common/templates/configuration/babelrc/index.js
index 1ef07c2f012..7bb48634121 100644
--- a/packages/common/templates/configuration/babelrc/index.js
+++ b/packages/common/templates/configuration/babelrc/index.js
@@ -102,6 +102,36 @@ const config: ConfigurationFile = {
       return JSON.stringify({ presets, plugins }, null, 2);
     }
 
+    if (template === 'cxjs') {
+      return JSON.stringify(
+        {
+          presets: [
+            [
+              'env',
+              {
+                targets: {
+                  chrome: 50,
+                  ie: 11,
+                  ff: 30,
+                  edge: 12,
+                  safari: 9,
+                },
+                modules: false,
+                loose: true,
+                useBuiltIns: true,
+              },
+            ],
+          ],
+          plugins: [
+            ['transform-cx-jsx'],
+            ['transform-react-jsx', { pragma: 'VDOM.createElement' }],
+          ],
+        },
+        null,
+        2
+      );
+    }
+
     return JSON.stringify({ presets: [], plugins: [] }, null, 2);
   },
 
diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js
new file mode 100644
index 00000000000..07ee5352163
--- /dev/null
+++ b/packages/common/templates/cxjs.js
@@ -0,0 +1,32 @@
+// @flow
+
+import Template from './template';
+import { decorateSelector } from '../theme';
+import configurations from './configuration';
+
+class CxJSTemplate extends Template {
+  getEntries() {
+    return ['/app/index.js', '/src/index.js', '/index.html'];
+  }
+
+  getHTMLEntries() {
+    return ['/app/index.html', '/src/index.html', '/index.html'];
+  }
+}
+
+export default new CxJSTemplate(
+  'cxjs',
+  'CxJS',
+  'https://cxjs.io/',
+  'github/codaxy/cxjs-codesandbox-template',
+  decorateSelector(() => '#11689f'),
+  {
+    showOnHomePage: true,
+    extraConfigurations: {
+      '/.babelrc': configurations.babelrc,
+      '/tsconfig.json': configurations.tsconfig,
+    },
+    externalResourcesEnabled: false,
+    distDir: 'dist',
+  }
+);
diff --git a/packages/common/templates/dojo.js b/packages/common/templates/dojo.js
new file mode 100644
index 00000000000..56eaae35656
--- /dev/null
+++ b/packages/common/templates/dojo.js
@@ -0,0 +1,28 @@
+// @flow
+
+import Template from './template';
+import { decorateSelector } from '../theme';
+
+export class DojoTemplate extends Template {
+  // eslint-disable-next-line no-unused-vars
+  getHTMLEntries(configurationFiles: {
+    [type: string]: Object,
+  }): Array<string> {
+    return ['/src/index.html'];
+  }
+
+  getEntries(configurationFiles: { [type: string]: Object }) {
+    const entries = super.getEntries(configurationFiles);
+    entries.push('/src/main.ts');
+    return entries;
+  }
+}
+
+export default new DojoTemplate(
+  '@dojo/cli-create-app',
+  'Dojo 2',
+  'https://github.com/dojo/cli-create-app',
+  'github/dojo/dojo-codesandbox-template',
+  decorateSelector(() => '#D3471C'),
+  { showOnHomePage: true, isTypeScript: true }
+);
diff --git a/packages/common/templates/icons.js b/packages/common/templates/icons.js
index e69fe31e75c..f2298c4f03a 100644
--- a/packages/common/templates/icons.js
+++ b/packages/common/templates/icons.js
@@ -6,8 +6,20 @@ import Parcel from 'common/components/logos/Parcel';
 import Preact from 'common/components/logos/Preact';
 import Vue from 'common/components/logos/Vue';
 import Svelte from 'common/components/logos/Svelte';
+import Dojo from 'common/components/logos/Dojo';
+import CxJS from 'common/components/logos/CxJS';
 
-import { react, vue, preact, reactTs, svelte, angular, parcel } from './';
+import {
+  react,
+  vue,
+  preact,
+  reactTs,
+  svelte,
+  angular,
+  parcel,
+  dojo,
+  cxjs,
+} from './';
 
 export default function getIcon(
   theme:
@@ -18,6 +30,8 @@ export default function getIcon(
     | 'create-react-app-typescript'
     | 'angular-cli'
     | 'parcel'
+    | 'dojo'
+    | 'cxjs'
 ) {
   switch (theme) {
     case react.name:
@@ -34,6 +48,10 @@ export default function getIcon(
       return Angular;
     case parcel.name:
       return Parcel;
+    case dojo.name:
+      return Dojo;
+    case cxjs.name:
+      return CxJS;
     default:
       return React;
   }
diff --git a/packages/common/templates/index.js b/packages/common/templates/index.js
index fc0d7dc18ad..12e3e136931 100644
--- a/packages/common/templates/index.js
+++ b/packages/common/templates/index.js
@@ -7,8 +7,21 @@ import react from './react';
 import reactTs from './react-ts';
 import svelte from './svelte';
 import vue from './vue';
+import cxjs from './cxjs';
+import dojo from './dojo';
 
-export { angular, babel, vue, react, reactTs, preact, svelte, parcel };
+export {
+  angular,
+  babel,
+  vue,
+  react,
+  reactTs,
+  preact,
+  svelte,
+  parcel,
+  dojo,
+  cxjs,
+};
 
 export default function getDefinition(
   theme:
@@ -19,6 +32,8 @@ export default function getDefinition(
     | 'create-react-app-typescript'
     | 'angular-cli'
     | 'parcel'
+    | 'cxjs'
+    | '@dojo/cli-create-app'
 ) {
   switch (theme) {
     case react.name:
@@ -37,6 +52,10 @@ export default function getDefinition(
       return parcel;
     case babel.name:
       return babel;
+    case cxjs.name:
+      return cxjs;
+    case dojo.name:
+      return dojo;
     default:
       return react;
   }
diff --git a/packages/common/types.js b/packages/common/types.js
index f3aef22f36b..887d787f50c 100644
--- a/packages/common/types.js
+++ b/packages/common/types.js
@@ -140,6 +140,7 @@ export type Sandbox = {
     | 'create-react-app'
     | 'create-react-app-typescript'
     | 'angular-cli'
+    | '@dojo/cli-create-app'
     | 'vue-cli'
     | 'preact-cli'
     | 'svelte',
diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js
index f2254b6c09f..61cf8b5c938 100644
--- a/packages/common/utils/url-generator.js
+++ b/packages/common/utils/url-generator.js
@@ -27,11 +27,15 @@ export const newSandboxWizard = () => `/s`;
 export const newSandboxUrl = () => `/s/new`;
 export const parcelSandboxUrl = () => `/s/vanilla`;
 export const newReactTypeScriptSandboxUrl = () => `/s/react-ts`;
+export const newDojoSandboxUrl = () =>
+  `/s/github/dojo/dojo-codesandbox-template`;
 export const newPreactSandboxUrl = () => `/s/preact`;
 export const newVueSandboxUrl = () => `/s/vue`;
 export const importFromGitHubUrl = () => `/s/github`;
 export const newSvelteSandboxUrl = () => `/s/svelte`;
 export const newAngularSandboxUrl = () => `/s/angular`;
+export const newCxJSSandboxUrl = () =>
+  `/s/github/codaxy/cxjs-codesandbox-template`;
 export const uploadFromCliUrl = () => `/s/cli`;
 
 const sandboxGitUrl = (git: {
diff --git a/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md b/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md
new file mode 100644
index 00000000000..755868db215
--- /dev/null
+++ b/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md
@@ -0,0 +1,6 @@
+---
+title: "Dojo 2 and CxJS templates"
+authors: ["nicknisi", "mstijak"]
+---
+
+Not one, but two new templates have been added to CodeSandbox! The templates are [Dojo](https://dojo.io/) and [CxJS](https://cxjs.io/). These implementations are completely built by @nicknisi and @mstijak. A huge thanks for their effort!
diff --git a/packages/homepage/src/screens/home/Animation/Background.js b/packages/homepage/src/screens/home/Animation/Background.js
index f470db888f0..1c63056afc5 100644
--- a/packages/homepage/src/screens/home/Animation/Background.js
+++ b/packages/homepage/src/screens/home/Animation/Background.js
@@ -28,6 +28,7 @@ export default class Background extends React.PureComponent {
   // Use solid colors for perf
   colors = {
     'create-react-app': '#1E2428',
+    '@dojo/cli-create-app': '#211D1C',
     'vue-cli': '#1D2525',
     'preact-cli': '#202328',
     svelte: '#202022',
diff --git a/packages/homepage/src/screens/home/Animation/index.js b/packages/homepage/src/screens/home/Animation/index.js
index 820b716d68e..c267b6ccec1 100644
--- a/packages/homepage/src/screens/home/Animation/index.js
+++ b/packages/homepage/src/screens/home/Animation/index.js
@@ -14,6 +14,8 @@ import {
   preact,
   svelte,
   parcel,
+  cxjs,
+  dojo,
 } from 'common/templates';
 
 import Background from './Background';
@@ -64,7 +66,17 @@ const Message = styled.div`
 `};
 `;
 
-const TEMPLATES = [parcel, react, vue, angular, preact, reactTs, svelte];
+const TEMPLATES = [
+  parcel,
+  react,
+  vue,
+  angular,
+  preact,
+  reactTs,
+  svelte,
+  cxjs,
+  dojo,
+];
 
 export default class Animation extends React.PureComponent {
   state = {
diff --git a/packages/homepage/src/screens/home/Frameworks/index.js b/packages/homepage/src/screens/home/Frameworks/index.js
index c3ac2d569b9..5c84e842cb5 100644
--- a/packages/homepage/src/screens/home/Frameworks/index.js
+++ b/packages/homepage/src/screens/home/Frameworks/index.js
@@ -207,6 +207,16 @@ const TEMPLATE_SUPPORT = {
     css: ['Global'],
     description: 'Used for React projects, based on: ',
   },
+  '@dojo/cli-create-app': {
+    loaders: [ts, html, cssGlobal, image],
+    css: ['Global', 'Scoped', 'Modules'],
+    description: 'Used for Dojo 2 projects, based on: ',
+  },
+  cxjs: {
+    loaders: [ts, html, cssGlobal, scss, sass, less, stylus, image],
+    css: ['Global', 'Scoped', 'Modules'],
+    description: 'Used for CxJS projects, based on: ',
+  },
   'vue-cli': {
     loaders: [
       js,
diff --git a/yarn.lock b/yarn.lock
index e4040698d26..aaa4123def7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2121,6 +2121,12 @@ babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-pro
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-plugin-transform-cx-jsx@^17.12.0:
+  version "17.12.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-cx-jsx/-/babel-plugin-transform-cx-jsx-17.12.0.tgz#a023e1c40e54f5cd8da5efc5cfeab3caa9e27695"
+  dependencies:
+    babel-plugin-syntax-jsx "^6.18.0"
+
 babel-plugin-transform-decorators-legacy@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925"