diff --git a/web/src/components/EnvironmentForm.vue b/web/src/components/EnvironmentForm.vue
index 6befbd386..d64d351e1 100644
--- a/web/src/components/EnvironmentForm.vue
+++ b/web/src/components/EnvironmentForm.vue
@@ -14,46 +14,103 @@
     <v-text-field
       v-model="item.name"
       :label="$t('environmentName')"
-      :rules="[v => !!v || $t('name_required')]"
+      :rules="[(v) => !!v || $t('name_required')]"
       required
       :disabled="formSaving"
       class="mb-4"
     ></v-text-field>
 
-    <v-subheader>
-      {{ $t('extraVariables') }}
-    </v-subheader>
+    <v-header>
+      {{ $t("extraVariables") }}
+    </v-header>
+
+    <v-select
+      v-model="extraVarsFormat"
+      label="format"
+      :items="formats"
+      required
+      :disabled="formSaving || formatSelectExtraVarsDisabled"
+      @change="setExtraVarsWindow"
+    ></v-select>
 
     <codemirror
-        :style="{ border: '1px solid lightgray' }"
-        v-model="item.json"
-        :options="cmOptions"
-        :placeholder="$t('enterExtraVariablesJson')"
+      v-if="extraVarsFormat === 'yaml'"
+      :style="{ border: '1px solid lightgray' }"
+      :value="codeWindows.json"
+      :options="cmOptions.json"
+      @input="updateYamlInputExtraVars"
+      :placeholder="$t('enterExtraVariablesYaml')"
     />
 
-    <v-subheader>
-      {{ $t('environmentVariables') }}
-    </v-subheader>
+    <codemirror
+      v-if="extraVarsFormat === 'json'"
+      :style="{ border: '1px solid lightgray' }"
+      :value="codeWindows.json"
+      :options="cmOptions.json"
+      @input="updateJsonInputExtraVars"
+      :placeholder="$t('enterExtraVariablesJson')"
+    />
+
+    <v-spacer></v-spacer>
+
+    <v-header>
+      {{ $t("environmentVariables") }}
+    </v-header>
+
+    <v-select
+      v-model="envFormat"
+      label="format"
+      :items="formats"
+      required
+      :disabled="formSaving || formatSelectEnvDisabled"
+      @change="setEnvironmentWindow"
+    ></v-select>
+
+    <codemirror
+      v-if="envFormat === 'yaml'"
+      :style="{ border: '1px solid lightgray' }"
+      :value="codeWindows.env"
+      :options="cmOptions.env"
+      @input="updateYamlInputEnv"
+      :placeholder="$t('enterEnvYaml')"
+    />
 
     <codemirror
-        :style="{ border: '1px solid lightgray' }"
-        v-model="item.env"
-        :options="cmOptions"
-        :placeholder="$t('enterEnvJson')"
+      v-if="envFormat === 'json'"
+      :style="{ border: '1px solid lightgray' }"
+      :value="codeWindows.env"
+      :options="cmOptions.env"
+      @input="updateJsonInputEnv"
+      :placeholder="$t('enterEnvJson')"
     />
 
     <v-alert
+        v-if="envFormat == 'json' || extraVarsFormat == 'json'"
         dense
         text
         type="info"
         class="mt-4"
     >
-      {{ $t('environmentAndExtraVariablesMustBeValidJsonExample') }}
-      <pre style="font-size: 14px;">{
+      {{ $t("environmentAndExtraVariablesMustBeValidJsonExample") }}
+      <pre style="font-size: 14px">{
   "var_available_in_playbook_1": 1245,
   "var_available_in_playbook_2": "test"
 }</pre>
     </v-alert>
+
+    <v-alert
+        v-if="envFormat == 'yaml' || extraVarsFormat == 'yaml'"
+        dense
+        text
+        type="info"
+        class="mt-4"
+    >
+      {{ $t("environmentAndExtraVariablesMustBeValidYamlExample") }}
+      <pre style="font-size: 14px">
+var_available_in_playbook_1: 1245
+var_available_in_playbook_2: "test"
+</pre >
+    </v-alert>
   </v-form>
 </template>
 <script>
@@ -62,8 +119,10 @@
 import ItemFormBase from '@/components/ItemFormBase';
 
 import { codemirror } from 'vue-codemirror';
+import { safeLoad, safeDump } from 'js-yaml';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/vue/vue.js';
+import 'codemirror/mode/yaml/yaml.js';
 import 'codemirror/addon/display/placeholder.js';
 
 export default {
@@ -73,19 +132,176 @@ export default {
   },
 
   data() {
+    const jsonFormat = 'json';
+    const yamlFormat = 'yaml';
+    const formats = [jsonFormat, yamlFormat];
+    const modes = {
+      json: 'application/json',
+      yaml: 'text/x-yaml',
+    };
     return {
+      codeWindows: {
+        env: '',
+        json: '',
+      },
+      extraVarsFormat: jsonFormat,
+      envFormat: jsonFormat,
+      formats,
+      modes,
+      formatSelectEnvDisabled: false,
+      formatSelectExtraVarsDisabled: false,
       cmOptions: {
-        tabSize: 2,
-        mode: 'application/json',
-        lineNumbers: true,
-        line: true,
-        lint: true,
-        indentWithTabs: false,
+        json: {
+          tabSize: 2,
+          mode: modes.json,
+          lineNumbers: true,
+          line: true,
+          lint: true,
+          indentWithTabs: false,
+        },
+        env: {
+          tabSize: 2,
+          mode: modes.json,
+          lineNumbers: true,
+          line: true,
+          lint: true,
+          indentWithTabs: false,
+        },
       },
     };
   },
 
+  watch: {
+    formSaving(formSaving) {
+      if (formSaving) {
+        this.yamlToJson('env');
+        this.yamlToJson('json');
+        this.item.json = this.codeWindows.json;
+        this.item.env = this.codeWindows.env;
+      } else if (this.formError != null) {
+        this.formError = this.parseErrorString(this.formError);
+        if (this.envFormat === 'yaml') {
+          this.jsonToYaml('env');
+        }
+        if (this.extraVarsFormat === 'yaml') {
+          this.jsonToYaml('json');
+        }
+      }
+    },
+  },
+
   methods: {
+    setFormat(format, windowName) {
+      switch (format) {
+        case 'json':
+          this.cmOptions[windowName].mode = this.modes.json;
+          this.yamlToJson(windowName);
+          break;
+        case 'yaml':
+          this.cmOptions[windowName].mode = this.modes.yaml;
+          this.jsonToYaml(windowName);
+          break;
+        default:
+          this.cmOptions[windowName].mode = this.modes.json;
+          this.yamlToJson(windowName);
+          break;
+      }
+    },
+
+    setEnvironmentWindow() {
+      this.setFormat(this.envFormat, 'env');
+    },
+
+    setExtraVarsWindow() {
+      this.setFormat(this.extraVarsFormat, 'json');
+    },
+
+    updateJsonInputExtraVars(updatedString) {
+      this.formatSelectExtraVarsDisabled = !this.isJson(updatedString);
+      this.codeWindows.json = updatedString;
+    },
+
+    updateYamlInputExtraVars(updatedString) {
+      this.formatSelectExtraVarsDisabled = !this.isYaml(updatedString);
+      this.codeWindows.json = updatedString;
+    },
+
+    updateJsonInputEnv(updatedString) {
+      this.formatSelectEnvDisabled = !this.isJson(updatedString);
+      this.codeWindows.env = updatedString;
+    },
+
+    updateYamlInputEnv(updatedString) {
+      this.formatSelectEnvDisabled = !this.isYaml(updatedString);
+      this.codeWindows.env = updatedString;
+    },
+
+    yamlToJson(windowName) {
+      const yamlValue = this.codeWindows[windowName];
+      console.log(yamlValue);
+      if (this.isYaml(yamlValue)) {
+        // yamlValue = yamlValue === '\n' ? '{}' : yamlValue;
+        let jsonObject = safeLoad(yamlValue);
+        console.log(jsonObject);
+        jsonObject = !jsonObject ? {} : jsonObject;
+        const jsonString = JSON.stringify(jsonObject, null, 2);
+        this.codeWindows[windowName] = jsonString;
+      }
+    },
+
+    jsonToYaml(windowName) {
+      const jsonString = this.codeWindows[windowName];
+      console.log(jsonString);
+      if (this.isJson(jsonString)) {
+        const jsonObject = JSON.parse(jsonString);
+        let yamlValue = safeDump(jsonObject);
+        console.log(yamlValue);
+        yamlValue = yamlValue === '{}\n' ? '' : yamlValue;
+        console.log(yamlValue);
+        this.codeWindows[windowName] = yamlValue;
+      }
+    },
+
+    isJson(str) {
+      try {
+        JSON.parse(str);
+      } catch (e) {
+        return false;
+      }
+      return true;
+    },
+
+    isYaml(str) {
+      try {
+        safeLoad(str);
+      } catch (e) {
+        return false;
+      }
+      return true;
+    },
+
+    parseErrorString(errorString) {
+      if (errorString == null) {
+        return errorString;
+      }
+      if (errorString.includes('Environment')) {
+        if (this.envFormat === 'yaml') {
+          return errorString.replace('JSON', 'YAML');
+        }
+      }
+      if (this.extraVarsFormat === 'yaml') {
+        return errorString.replace('JSON', 'YAML');
+      }
+      return errorString;
+    },
+
+    async afterLoadData() {
+      this.codeWindows.json = this.item.json === undefined ? '{}' : this.item.json;
+      this.codeWindows.env = this.item.env === undefined ? '{}' : this.item.env;
+      this.setEnvironmentWindow();
+      this.setExtraVarsWindow();
+    },
+
     getItemsUrl() {
       return `/api/project/${this.projectId}/environment`;
     },
diff --git a/web/src/lang/de.js b/web/src/lang/de.js
index 0e576e527..df0cb7ff3 100644
--- a/web/src/lang/de.js
+++ b/web/src/lang/de.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Name der Umgebung',
   extraVariables: 'Zusätzliche Variablen',
   enterExtraVariablesJson: 'Geben Sie zusätzliche Variablen im JSON-Format ein...',
+  enterExtraVariablesYaml: 'Geben Sie zusätzliche Variablen im YAML-Format ein...',
   environmentVariables: 'Umgebungsvariablen',
   enterEnvJson: 'Geben Sie Umgebungsvariablen im JSON-Format ein...',
+  enterEnvYaml: 'Geben Sie Umgebungsvariablen im YAML-Format ein...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'Zusätzliche Variablen und Umgebungsvariablen müssen gültiges JSON sein. Beispiel:',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'Zusätzliche Variablen und Umgebungsvariablen müssen gültiges YAML sein. Beispiel:',
   dashboard2: 'Obefläche',
   ansibleSemaphore: 'Ansible Semaphore',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig ohne JavaScript. Bitte aktivieren Sie es, um fortzufahren.',
diff --git a/web/src/lang/en.js b/web/src/lang/en.js
index 51d39c2a6..37e7a602c 100644
--- a/web/src/lang/en.js
+++ b/web/src/lang/en.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Environment Name',
   extraVariables: 'Extra variables',
   enterExtraVariablesJson: 'Enter extra variables JSON...',
+  enterExtraVariablesYaml: 'Enter extra variables YAML...',
   environmentVariables: 'Environment variables',
   enterEnvJson: 'Enter env JSON...',
+  enterEnvYaml: 'Enter env YAML...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'Environment and extra variables must be valid JSON. Example:',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'Environment and extra variables must be valid YAML. Example:',
   dashboard2: 'Dashboard',
   ansibleSemaphore: 'Ansible Semaphore',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'We\'re sorry but <%= htmlWebpackPlugin.options.title %> doesn\'t work properly without JavaScript enabled. Please enable it to continue.',
diff --git a/web/src/lang/fr.js b/web/src/lang/fr.js
index 197aef9fe..d1b1c55d5 100644
--- a/web/src/lang/fr.js
+++ b/web/src/lang/fr.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Nom de l\'environnement',
   extraVariables: 'Variables supplémentaires',
   enterExtraVariablesJson: 'Saisissez JSON pour les variables supplémentaires...',
+  enterExtraVariablesYaml: 'Saisissez YAML pour les variables supplémentaires...',
   environmentVariables: 'Variables d\'environnement',
   enterEnvJson: 'Saisissez JSON pour l\'environnement...',
+  enterEnvYaml: 'Saisissez YAML pour l\'environnement...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'L\'environnement et les variables supplémentaires doivent être un JSON valide. Exemple :',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'L\'environnement et les variables supplémentaires doivent être un YAML valide. Exemple :',
   dashboard2: 'Tableau de bord',
   ansibleSemaphore: 'Semaphore Ansible',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Nous sommes désolés, mais <%= htmlWebpackPlugin.options.title %> ne fonctionne pas correctement sans JavaScript. Veuillez l\'activer pour continuer.',
diff --git a/web/src/lang/pt.js b/web/src/lang/pt.js
index 7769cb0f5..14f7041df 100644
--- a/web/src/lang/pt.js
+++ b/web/src/lang/pt.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Nome do Ambiente',
   extraVariables: 'Variáveis Extra',
   enterExtraVariablesJson: 'Introduza JSON de variáveis extra...',
+  enterExtraVariablesYaml: 'Introduza YAML de variáveis extra...',
   environmentVariables: 'Variáveis de Ambiente',
   enterEnvJson: 'Introduza JSON de ambiente...',
+  enterEnvYaml: 'Introduza YAML de ambiente...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'O ambiente e as variáveis extra devem ser JSON válidos. Exemplo:',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'O ambiente e as variáveis extra devem ser YAML válidos. Exemplo:',
   dashboard2: 'Painel de Controlo',
   ansibleSemaphore: 'Semaphore Ansible',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Lamentamos, mas <%= htmlWebpackPlugin.options.title %> não funciona corretamente sem JavaScript ativado. Por favor, ative-o para continuar.',
diff --git a/web/src/lang/pt_br.js b/web/src/lang/pt_br.js
index 6bdd6d5d9..924de02f0 100644
--- a/web/src/lang/pt_br.js
+++ b/web/src/lang/pt_br.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Nome do Ambiente',
   extraVariables: 'Variáveis Extras',
   enterExtraVariablesJson: 'Insira JSON de variáveis extras...',
+  enterExtraVariablesYaml: 'Insira YAML de variáveis extras...',
   environmentVariables: 'Variáveis de Ambiente',
   enterEnvJson: 'Insira JSON de ambiente...',
+  enterEnvYaml: 'Insira YAML de ambiente...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'O ambiente e as variáveis extras devem ser JSON válidos. Exemplo:',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'O ambiente e as variáveis extras devem ser YAML válidos. Exemplo:',
   dashboard2: 'Painel',
   ansibleSemaphore: 'Ansible Semaphore',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Pedimos desculpas, mas <%= htmlWebpackPlugin.options.title %> não funciona corretamente sem JavaScript habilitado. Por favor, habilite-o para continuar.',
diff --git a/web/src/lang/ru.js b/web/src/lang/ru.js
index 32b67eb2e..2a793106a 100644
--- a/web/src/lang/ru.js
+++ b/web/src/lang/ru.js
@@ -65,9 +65,12 @@ export default {
   environmentName: 'Имя окружения',
   extraVariables: 'Дополнительные переменные',
   enterExtraVariablesJson: 'Ввести дополнительные переменные в формате JSON...',
+  enterExtraVariablesYaml: 'Ввести дополнительные переменные в формате YAML...',
   environmentVariables: 'Переменные окружения',
   enterEnvJson: 'Введите переменную окружения в формате JSON...',
+  enterEnvYaml: 'Введите переменную окружения в формате YAML...',
   environmentAndExtraVariablesMustBeValidJsonExample: 'Окружениеи дополнительные переменные должны быть корректным JSON. Например:',
+  environmentAndExtraVariablesMustBeValidYamlExample: 'Окружениеи дополнительные переменные должны быть корректным YAML. Например:',
   dashboard2: 'Панель',
   ansibleSemaphore: 'Ансибл Семафор',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Извините, но <%= htmlWebpackPlugin.options.title %> не работает без включенного JavaScript. Пожалуйста включите, чтобы продолжить',
diff --git a/web/src/lang/zh.js b/web/src/lang/zh.js
index c7c06d983..2ae52e17e 100644
--- a/web/src/lang/zh.js
+++ b/web/src/lang/zh.js
@@ -65,9 +65,12 @@ export default {
   environmentName: '环境名称',
   extraVariables: '扩展变量',
   enterExtraVariablesJson: '添加额外的Json格式变量...',
+  enterExtraVariableYaml: '添加额外的Yaml格式变量...',
   environmentVariables: '环境变量',
   enterEnvJson: '添加额外的Json格式环境变量...',
+  enterEnvYaml: '添加额外的Yaml格式环境变量...',
   environmentAndExtraVariablesMustBeValidJsonExample: '环境变量和额外变量必须是有效的 JSON。例如：',
+  environmentAndExtraVariablesMustBeValidYamlExample: '环境变量和额外变量必须是有效的 YAML。例如：',
   dashboard2: '控制台',
   ansibleSemaphore: 'Ansible Semaphore',
   wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: '抱歉，如果未启用 JavaScript，<%= htmlWebpackPlugin.options.title %> 将无法正常工作。请启用它以继续。',