diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/transformations.js b/bundles/org.openhab.ui/web/src/assets/definitions/transformations.js
new file mode 100644
index 0000000000..d89e305985
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/transformations.js
@@ -0,0 +1,14 @@
+export default {
+  SNIPPETS: {
+    SCRIPT: {
+      'application/vnd.openhab.dsl.rule': 'var returnValue = "String has " + input.length + " characters"\n\nreturnValue',
+      'application/javascript': '(function(data) {\n  var returnValue = "String has " + data.length + " characters"\n  return returnValue\n})(input)',
+      'application/javascript;version=ECMAScript-5.1': '(function(data) {\n  var returnValue = "String has " + data.length + " characters"\n  return returnValue\n})(input)',
+      'application/x-ruby': '"String has #{input.length} characters"'
+    }
+  },
+  EDITOR_MODES: {
+    MAP: 'text/x-properties',
+    SCALE: 'text/x-properties'
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/blockly-editor.vue b/bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue
similarity index 100%
rename from bundles/org.openhab.ui/web/src/pages/settings/rules/script/blockly-editor.vue
rename to bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue b/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue
index d248f17f87..aa30d1ecfd 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/script-editor.vue
@@ -52,6 +52,7 @@ import 'codemirror/mode/groovy/groovy.js'
 import 'codemirror/mode/python/python.js'
 import 'codemirror/mode/ruby/ruby.js'
 import 'codemirror/mode/yaml/yaml.js'
+import 'codemirror/mode/properties/properties.js'
 
 // theme css
 import 'codemirror/theme/gruvbox-dark.css'
@@ -174,6 +175,7 @@ export default {
       if (this.mode && this.mode.indexOf('ruby') >= 0) return 'text/x-ruby'
       if (this.mode && this.mode.indexOf('groovy') >= 0) return 'text/x-groovy'
       if (this.mode && this.mode === 'rb') return 'text/x-ruby'
+      if (this.mode && this.mode === 'properties') return 'text/x-properties'
       return this.mode
     },
     ternComplete (file, query) {
diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 705814125f..6cc46e350b 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -31,6 +31,9 @@ const AddThingPage = () => import(/* webpackChunkName: "admin-config" */ '../pag
 
 const InboxListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/things/inbox/inbox-list.vue')
 
+const TransformationsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/transformations/transformations-list.vue')
+const TransformationsEditPage = () => import(/* webpackChunkName: "admin-rules" */ '../pages/settings/transformations/transformation-edit.vue')
+
 const SemanticModelPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/model/model.vue')
 
 const PagesListPage = () => import(/* webpackChunkName: "admin-pages" */ '../pages/settings/pages/pages-list.vue')
@@ -176,6 +179,17 @@ export default [
           }
         ]
       },
+      {
+        path: 'transformations/',
+        async: loadAsync(TransformationsListPage),
+        routes: [
+          {
+            path: ':transformationId',
+            beforeLeave: checkDirtyBeforeLeave,
+            async: loadAsync(TransformationsEditPage, (routeTo) => (routeTo.params.transformationId === 'add') ? { createMode: true } : {})
+          }
+        ]
+      },
       {
         path: 'things/',
         beforeEnter: [enforceAdminForRoute],
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue b/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue
index 5d3623805f..b31ff45493 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/blocks/blocks-edit.vue
@@ -104,7 +104,7 @@
 import YAML from 'yaml'
 import { strOptions } from 'yaml/types'
 
-import BlocklyEditor from '@/pages/settings/rules/script/blockly-editor.vue'
+import BlocklyEditor from '@/components/config/controls/blockly-editor.vue'
 import BlockPreview from './block-preview.vue'
 import ConfigSheet from '@/components/config/config-sheet.vue'
 import DirtyMixin from '@/pages/settings/dirty-mixin'
@@ -115,7 +115,7 @@ export default {
   mixins: [DirtyMixin],
   components: {
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
-    BlocklyEditor, // 'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/pages/settings/rules/script/blockly-editor.vue'),
+    BlocklyEditor, // 'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/components/config/controls/blockly-editor.vue'),
     BlockPreview // 'block-preview': () => import(/* webpackChunkName: "blockly-editor" */ './block-preview.vue')
   },
   props: ['uid', 'createMode'],
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
index 04e5ee7671..66e5d93326 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -118,7 +118,7 @@ export default {
   components: {
     ScriptGeneralSettings,
     'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
-    'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ './blockly-editor.vue')
+    'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/components/config/controls/blockly-editor.vue')
   },
   props: ['ruleId', 'moduleId', 'createMode'],
   data () {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index af5d5d0ac6..5920d7f837 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -60,6 +60,16 @@
               :footer="objectsSubtitles.pages">
               <f7-icon slot="media" f7="tv" color="gray" />
             </f7-list-item>
+            <f7-list-item
+              v-if="$store.getters.apiEndpoint('transformations')"
+              media-item
+              link="transformations/"
+              title="Transformations"
+              :after="transformationsCount"
+              badge-color="blue"
+              :footer="objectsSubtitles.transform">
+              <f7-icon slot="media" f7="arrow_2_squarepath" color="gray" />
+            </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('rules')">
             Automation
@@ -157,6 +167,7 @@ export default {
         model: 'The semantic model of your home',
         items: 'Manage the functional layer',
         pages: 'Design displays for user control & monitoring',
+        transform: 'Manage transformations',
         rules: 'Automate with triggers and actions',
         scenes: 'Store a set of desired states as a scene',
         scripts: 'Rules dedicated to running code',
@@ -165,6 +176,7 @@ export default {
       inboxCount: '',
       thingsCount: '',
       itemsCount: '',
+      transformationsCount: '',
       sitemapsCount: 0
     }
   },
@@ -199,6 +211,7 @@ export default {
       if (this.$store.getters.apiEndpoint('things')) this.$oh.api.get('/rest/things?summary=true').then((data) => { this.thingsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('items')) this.$oh.api.get('/rest/items').then((data) => { this.itemsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('ui')) this.$oh.api.get('/rest/ui/components/system:sitemap?summary=true').then((data) => { this.sitemapsCount = data.length })
+      if (this.$store.getters.apiEndpoint('transformations')) this.$oh.api.get('/rest/transformations').then((data) => { this.transformationsCount = data.length })
     },
     navigateToStore (tab) {
       this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue
new file mode 100644
index 0000000000..fcaef1e706
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-edit.vue
@@ -0,0 +1,298 @@
+<template>
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
+    <f7-navbar :title="newTransformation ? 'Create Transformation' : 'Edit Transformation'" :subtitle="(!newTransformation && transformation) ? editorMode : ''" back-link="Back">
+      <f7-nav-right v-if="isEditable && !newTransformation">
+        <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
+        <f7-link @click="save()" v-if="!$theme.md">
+          Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span>
+        </f7-link>
+      </f7-nav-right>
+      <f7-nav-right v-else-if="isEditable && newTransformation">
+        <f7-link @click="createTransformation" v-if="$theme.md && newTransformation" icon-md="material:save" icon-only />
+        <f7-link @click="createTransformation" v-if="$theme.ios && newTransformation">
+          Create
+        </f7-link>
+      </f7-nav-right>
+    </f7-navbar>
+    <!-- Create Transformation -->
+    <transformation-general-settings v-if="newTransformation && ready" :createMode="true" :transformation="transformation" :types="types" :languages="languages" :language="language" :scriptLanguages="scriptLanguages" @newLanguage="language = $event" @newType="transformation.type = $event" @newScriptMimeType="transformation.configuration.mode = $event" />
+    <div v-if="ready && newTransformation" class="if-aurora display-flex justify-content-center margin padding">
+      <div class="flex-shrink-0">
+        <f7-button class="padding-left padding-right" style="width: 150px" color="blue" large raised fill @click="createTransformation">
+          Create
+        </f7-button>
+      </div>
+    </div>
+    <!-- Edit Transformation -->
+    <f7-toolbar v-if="!newTransformation && ready" position="bottom">
+      <span class="display-flex flex-direction-row align-items-center" />
+      <span class="display-flex flex-direction-row align-items-center">
+        <f7-segmented v-if="isBlockly" class="margin-right">
+          <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" />
+          <f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" />
+        </f7-segmented>
+        <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
+      </span>
+    </f7-toolbar>
+    <f7-icon v-if="!newTransformation && ready && (!isBlockly && !isEditable) || (blocklyCodePreview && isBlockly)" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray"
+             :tooltip="(isBlockly) ? 'Cannot edit the code generated by Blockly' : 'This transformation is not editable because it has been provisioned from a file'" />
+    <editor v-if="!newTransformation && ready && (!isBlockly || blocklyCodePreview)" class="rule-script-editor" :mode="editorMode" :value="transformation.configuration.function" @input="onEditorInput" :read-only="isBlockly || !isEditable" :tern-autocompletion-hook="true" />
+    <blockly-editor ref="blocklyEditor" v-else-if="isBlockly" :blocks="transformation.configuration.blockSource" @change="dirty = true" />
+    <!-- TODO: Enable Blockly after blocks have been adjusted
+    <f7-fab v-show="transformation.configuration && !transformation.configuration.function && transformation.configuration.mode === 'application/javascript' && !isBlockly" position="center-bottom" slot="fixed" color="blue" @click="convertToBlockly" text="Design with Blockly">
+      <f7-icon f7="ticket_fill" />
+    </f7-fab>
+    -->
+
+    <f7-sheet ref="detailsSheet" class="transformation-details-sheet" :backdrop="false" :close-on-escape="true" :opened="detailsOpened" @sheet:closed="detailsOpened = false">
+      <f7-page>
+        <f7-toolbar tabbar bottom>
+          <span class="margin-left">Transformation details</span>
+          <div class="right">
+            <f7-link sheet-close class="padding-right">
+              <f7-icon f7="chevron_down" />
+            </f7-link>
+          </div>
+        </f7-toolbar>
+        <f7-block class="block-narrow">
+          <transformation-general-settings :createMode="newTransformation" :transformation="transformation" />
+          <f7-col v-if="isEditable">
+            <f7-list>
+              <f7-list-button color="red" @click="deleteTransformation">
+                Remove Transformation
+              </f7-list-button>
+            </f7-list>
+          </f7-col>
+        </f7-block>
+      </f7-page>
+    </f7-sheet>
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.transformation-editor.vue-codemirror
+  display block
+  top calc(var(--f7-navbar-height) + var(--f7-tabbar-height))
+  height calc(100% - 2*var(--f7-navbar-height))
+  width 100%
+</style>
+
+<script>
+import DirtyMixin from '../dirty-mixin'
+import TransformationGeneralSettings from '@/pages/settings/transformations/transformation-general-settings'
+import TransformationDefinitions from '@/assets/definitions/transformations.js'
+
+export default {
+  mixins: [DirtyMixin],
+  components: {
+    TransformationGeneralSettings,
+    'editor': () => import(/* webpackChunkName: "script-editor" */ '@/components/config/controls/script-editor.vue'),
+    'blockly-editor': () => import(/* webpackChunkName: "blockly-editor" */ '@/components/config/controls/blockly-editor.vue')
+  },
+  props: ['transformationId', 'createMode'],
+  data () {
+    return {
+      newTransformation: this.createMode,
+      ready: false,
+      loading: false,
+      transformation: {},
+      types: [],
+      scriptLanguages: [],
+      languages: [],
+      language: '',
+      detailsOpened: false,
+      editorMode: '',
+      blocklyCodePreview: false
+    }
+  },
+  computed: {
+    isEditable () {
+      return this.transformation && this.transformation.editable !== false
+    },
+    isBlockly () {
+      // TODO: Enable Blockly after blocks have been adjusted
+      // return this.transformation.configuration && this.transformation.configuration.blockSource
+      return false
+    }
+  },
+  methods: {
+    onPageAfterIn () {
+      if (this.ready) return
+      if (this.newTransformation) {
+        this.initializeNewTransformation()
+        return
+      }
+      if (window) {
+        window.addEventListener('keydown', this.keyDown)
+      }
+      this.load()
+    },
+    onPageBeforeOut () {
+      if (this.$refs.detailsSheet.f7Sheet) this.$refs.detailsSheet.f7Sheet.close()
+      if (window) {
+        window.removeEventListener('keydown', this.keyDown)
+      }
+    },
+    initializeNewTransformation () {
+      this.transformation = {
+        uid: this.$f7.utils.id(),
+        label: '',
+        type: '',
+        configuration: {
+          function: ''
+        },
+        editable: true
+      }
+      Promise.all([this.$oh.api.get('/rest/transformations/services'), this.$oh.api.get('/rest/module-types/script.ScriptAction'), this.$oh.api.get('/rest/config-descriptions/system:i18n')]).then((data) => {
+        this.$set(this, 'types', data[0])
+
+        this.$set(this, 'scriptLanguages', data[1].configDescriptions
+          .find((c) => c.name === 'type').options
+          .map((l) => {
+            return {
+              contentType: l.value,
+              name: l.label.split(' (')[0],
+              version: l.label.split(' (')[1].replace(')', '')
+            }
+          }))
+
+        this.$set(this, 'languages', data[2].parameters.find(p => p.name === 'language').options)
+      })
+      this.language = ''
+      this.ready = true
+    },
+    createTransformation () {
+      if (!this.transformation.uid) {
+        this.$f7.dialog.alert('Please give an ID to the configuration')
+        return
+      }
+      if (!this.transformation.type) {
+        this.$f7.dialog.alert('Please give the type of the transformation')
+        return
+      }
+      // openHAB core expects lowercase, however the list of available transformation services is uppercase
+      this.transformation.type = this.transformation.type.toLowerCase()
+      if (!this.transformation.label) {
+        this.$f7.dialog.alert('Please give a label for this transformation')
+        return
+      }
+
+      this.transformation.uid = 'config:' + this.transformation.type + ':' + this.transformation.uid
+      if (this.language) {
+        this.transformation.uid += ':' + this.language
+      }
+
+      // Insert code examples for SCRIPT
+      if (this.transformation.type === 'SCRIPT') {
+        this.transformation.configuration.function = TransformationDefinitions.SNIPPETS.SCRIPT[this.transformation.configuration.mode]
+      }
+
+      this.$oh.api.put('/rest/transformations/' + this.transformation.uid, this.transformation).then(() => {
+        this.$f7.toast.create({
+          text: 'Transformation created',
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+        this.$f7router.navigate(this.$f7route.url.replace('/add', '/' + this.transformation.uid), { reloadCurrent: true })
+        this.newTransformation = false
+        this.ready = false
+        if (window) {
+          window.addEventListener('keydown', this.keyDown)
+        }
+        this.load()
+      })
+    },
+    load () {
+      if (this.loading) return
+      this.loading = true
+
+      this.$oh.api.get('/rest/transformations/' + this.transformationId).then((data) => {
+        this.$set(this, 'transformation', data)
+        this.editorMode = (this.transformation.configuration.mode) ? this.transformation.configuration.mode : TransformationDefinitions.EDITOR_MODES[this.transformation.type.toUpperCase()]
+        this.loading = false
+        this.ready = true
+      })
+    },
+    save (noToast) {
+      if (!this.isEditable) return
+      if (this.isBlockly) {
+        try {
+          this.transformation.configuration.blockSource = this.$refs.blocklyEditor.getBlocks()
+          this.transformation.configuration.function = this.$refs.blocklyEditor.getCode()
+        } catch (e) {
+          this.$f7.dialog.alert(e)
+          return Promise.reject(e)
+        }
+      }
+      return this.$oh.api.put('/rest/transformations/' + this.transformation.uid, this.transformation).then((data) => {
+        this.dirty = false
+        if (!noToast) {
+          this.$f7.toast.create({
+            text: 'Transformation updated',
+            destroyOnClose: true,
+            closeTimeout: 2000
+          }).open()
+        }
+      }).catch((err) => {
+        this.$f7.toast.create({
+          text: 'Error while saving transformation configuration: ' + err,
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+      })
+    },
+    deleteTransformation () {
+      this.$f7.dialog.confirm(
+        `Are you sure you want to delete ${this.transformation.uid}?`,
+        'Delete Transformation',
+        () => {
+          this.$oh.api.delete('/rest/transformations/' + this.transformation.uid).then(() => {
+            this.$f7router.back('/settings/transformations/', { force: true })
+          })
+        }
+      )
+    },
+    showBlocklyCode () {
+      try {
+        this.transformation.configuration.blockSource = this.$refs.blocklyEditor.getBlocks()
+        this.transformation.configuration.function = this.$refs.blocklyEditor.getCode()
+        if (this.isBlockly) this.blocklyCodePreview = true
+      } catch (e) {
+        this.$f7.dialog.alert(e)
+      }
+    },
+    convertToBlockly () {
+      if ((this.configuration && this.transformation.configuration.function) || this.isBlockly || this.transformation.configuration.mode !== 'application/javascript') return
+      this.$set(this.transformation.configuration, 'blockSource', '<xml xmlns="https://developers.google.com/blockly/xml"></xml>')
+    },
+    onEditorInput (value) {
+      this.transformation.configuration.function = value
+      this.dirty = true
+    },
+    keyDown (ev) {
+      if ((ev.ctrlKey || ev.metaKey) && !(ev.altKey || ev.shiftKey)) {
+        switch (ev.keyCode) {
+          case 66:
+            if (this.isBlockly) {
+              if (this.blocklyCodePreview) {
+                this.blocklyCodePreview = false
+              } else {
+                this.showBlocklyCode()
+              }
+            } else {
+              this.convertToBlockly()
+            }
+            ev.stopPropagation()
+            ev.preventDefault()
+            break
+          case 83:
+            this.save()
+            ev.stopPropagation()
+            ev.preventDefault()
+            break
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-general-settings.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-general-settings.vue
new file mode 100644
index 0000000000..72232665f3
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformation-general-settings.vue
@@ -0,0 +1,56 @@
+<template>
+  <f7-block class="block-narrow">
+    <f7-col>
+      <f7-list class="no-margin" inline-labels no-hairlines-md>
+        <f7-list-input label="Unique ID" type="text" placeholder="Required" :value="transformation.uid"
+                       required :validate="createMode" pattern="[A-Za-z0-9_]+" error-message="Required. A-Z,a-z,0-9,_ only"
+                       :disabled="!createMode" :info="(createMode) ? 'Note: cannot be changed after the creation' : ''"
+                       @input="transformation.uid = $event.target.value" :clear-button="createMode" />
+        <f7-list-input label="Label" type="text" placeholder="Required" :value="transformation.label" required validate
+                       :disabled="!transformation.editable" @input="transformation.label = $event.target.value" :clear-button="!transformation.editable" />
+        <f7-list-item v-if="createMode && languages" title="Language" smart-select :smart-select-params="smartSelectParams">
+          <select name="language" @change="$emit('newLanguage', $event.target.value)">
+            <option value="" selected />
+            <option v-for="lang in languages" :selected="language" :value="lang.value" :key="lang.value">
+              {{ lang.label }}
+            </option>
+          </select>
+        </f7-list-item>
+      </f7-list>
+    </f7-col>
+    <f7-col v-if="createMode && types">
+      <f7-block-title>Transformation Type</f7-block-title>
+      <f7-list media-list>
+        <f7-list-item media-item radio radio-icon="start"
+                      :value="transformation.type" :checked="transformation.type === type" @change="$emit('newType', type)"
+                      v-for="type in types" :key="type"
+                      :title="type" />
+      </f7-list>
+    </f7-col>
+    <f7-col v-if="createMode && scriptLanguages && transformation.type === 'SCRIPT'">
+      <f7-block-title>Scripting Language</f7-block-title>
+      <f7-list media-list>
+        <f7-list-item media-item radio radio-icon="start"
+                      :value="transformation.configuration.mode" :checked="transformation.configuration.mode === lang.contentType" @change="$emit('newScriptMimeType', lang.contentType)"
+                      v-for="lang in scriptLanguages" :key="lang.contentType"
+                      :title="lang.name" :after="lang.version" :footer="lang.contentType" />
+      </f7-list>
+    </f7-col>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  props: ['transformation', 'createMode', 'types', 'languages', 'language', 'scriptLanguages'],
+  data () {
+    return {
+      smartSelectParams: {
+        openIn: 'popup',
+        searchbar: true,
+        virtualList: true,
+        virtualListHeight: (this.$theme.aurora) ? 32 : undefined
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
new file mode 100644
index 0000000000..65d0471fc6
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@@ -0,0 +1,253 @@
+<template>
+  <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
+    <f7-navbar title="Transformations" back-link="Settings" back-link-url="/settings/" back-link-force>
+      <f7-nav-right>
+        <f7-link icon-md="material:done_all" @click="toggleCheck()"
+                 :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
+      </f7-nav-right>
+      <f7-subnavbar :inner="false" v-show="initSearchbar">
+        <f7-searchbar
+          v-if="initSearchbar"
+          ref="searchbar"
+          class="searchbar-transformations"
+          :init="initSearchbar"
+          search-container=".transformations-list"
+          search-item=".transformationlist-item"
+          search-in=".item-title, .item-subtitle, .item-footer"
+          :disable-button="!$theme.aurora" />
+      </f7-subnavbar>
+    </f7-navbar>
+    <f7-toolbar class="contextual-toolbar" :class="{ 'navbar': $theme.md }" v-if="showCheckboxes" bottom-ios bottom-aurora>
+      <f7-link color="red" v-show="selectedItems.length" v-if="!$theme.md" class="delete" icon-ios="f7:trash" icon-aurora="f7:trash" @click="removeSelected">
+        Remove {{ selectedItems.length }}
+      </f7-link>
+      <f7-link v-if="$theme.md" icon-md="material:close" icon-color="white" @click="showCheckboxes = false" />
+      <div class="title" v-if="$theme.md">
+        {{ selectedItems.length }} selected
+      </div>
+      <div class="right" v-if="$theme.md">
+        <f7-link v-show="selectedItems.length" icon-md="material:delete" icon-color="white" @click="removeSelected" />
+      </div>
+    </f7-toolbar>
+
+    <f7-list-index
+      ref="listIndex"
+      v-if="$refs.transformationsList"
+      v-show="groupBy === 'alphabetical' && !$device.desktop"
+      listEl=".transformations-list"
+      :scroll-list="true"
+      :label="true" />
+
+    <f7-list class="searchbar-not-found">
+      <f7-list-item title="Nothing found" />
+    </f7-list>
+
+    <f7-block class="block-narrow">
+      <!-- skeleton for not ready -->
+      <f7-col v-if="!ready">
+        <f7-block-title>&nbsp;Loading...</f7-block-title>
+        <f7-list contacts-list class="col transformations-list">
+          <f7-list-group>
+            <f7-list-item
+              media-item
+              v-for="n in 20"
+              :key="n"
+              :class="`skeleton-text skeleton-effect-blink`"
+              title="Label of the transformation"
+              subtitle="Transformation type"
+              footer="Transformation UID" />
+          </f7-list-group>
+        </f7-list>
+      </f7-col>
+
+      <f7-col v-else>
+        <f7-block-title class="searchbar-hide-on-search">
+          {{ transformations.length }} transformations
+        </f7-block-title>
+        <div class="padding-left padding-right searchbar-found" v-show="transformations.length > 0">
+          <f7-segmented strong tag="p">
+            <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
+              Alphabetical
+            </f7-button>
+            <f7-button :active="groupBy === 'type'" @click="switchGroupOrder('type')">
+              By type
+            </f7-button>
+          </f7-segmented>
+        </div>
+
+        <f7-list
+          v-show="transformations.length > 0"
+          class="searchbar-found col transformations-list"
+          ref="transformationsList"
+          :contacts-list="groupBy === 'alphabetical'">
+          <f7-list-group v-for="(transformationsWithInitial, initial) in indexedTransformations" :key="initial">
+            <f7-list-item v-if="transformationsWithInitial.length" :title="initial" group-title />
+            <f7-list-item
+              v-for="transformation in transformationsWithInitial"
+              :key="transformation.uid"
+              media-item
+              class="transformationlist-item"
+              :checkbox="showCheckboxes"
+              :checked="isChecked(transformation.uid)"
+              @click.ctrl="(e) => ctrlClick(e, transformation)"
+              @click.meta="(e) => ctrlClick(e, transformation)"
+              @click.exact="(e) => click(e, transformation)"
+              link=""
+              :title="transformation.label"
+              :subtitle="transformation.type"
+              :footer="transformation.uid">
+              <f7-icon v-if="!transformation.editable" slot="after-title" f7="lock_fill" size="1rem" color="gray" />
+            </f7-list-item>
+          </f7-list-group>
+        </f7-list>
+      </f7-col>
+    </f7-block>
+    <f7-block v-if="ready && !transformations.length" class="service-config block-narrow">
+      <empty-state-placeholder icon="arrow_2_squarepath" title="transformations.title" text="transformations.text" />
+    </f7-block>
+    <f7-fab v-show="ready && !showCheckboxes" position="right-bottom" slot="fixed" color="blue" href="add">
+      <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
+    </f7-fab>
+  </f7-page>
+</template>
+
+<script>
+
+export default {
+  components: {
+    'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
+  },
+  data () {
+    return {
+      ready: false,
+      loading: false,
+      transformations: [],
+      initSearchbar: false,
+      selectedItems: [],
+      groupBy: 'alphabetical',
+      showCheckboxes: false
+    }
+  },
+  computed: {
+    indexedTransformations () {
+      if (this.groupBy === 'alphabetical') {
+        return this.transformations.reduce((prev, transformation, i, transformations) => {
+          const label = transformation.label || transformation.uid
+          const initial = label.substring(0, 1).toUpperCase()
+          if (!prev[initial]) {
+            prev[initial] = []
+          }
+          prev[initial].push(transformation)
+
+          return prev
+        }, {})
+      } else {
+        return this.transformations.reduce((prev, transformation, i, transformations) => {
+          const type = transformation.type
+          if (!prev[type]) {
+            prev[type] = []
+          }
+          prev[type].push(transformation)
+
+          return prev
+        }, {})
+      }
+    }
+  },
+  methods: {
+    onPageAfterIn () {
+      this.load()
+    },
+    onPageAfterOut () {
+
+    },
+    load () {
+      if (this.loading) return
+      this.loading = true
+      this.loading = true
+      this.$oh.api.get('/rest/transformations').then((data) => {
+        this.transformations = data.sort((a, b) => (a.label || a.uid).localeCompare(b.label || a.uid))
+        this.loading = false
+        this.ready = true
+        setTimeout(() => {
+          this.initSearchbar = true
+          if (this.$refs.listIndex) this.$refs.listIndex.update()
+          if (this.$device.desktop && this.$refs.searchbar) this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
+        })
+      })
+    },
+    switchGroupOrder (groupBy) {
+      this.groupBy = groupBy
+      const searchbar = this.$refs.searchbar.$el.f7Searchbar
+      const filterQuery = searchbar.query
+      this.$nextTick(() => {
+        if (filterQuery) {
+          searchbar.clear()
+          searchbar.search(filterQuery)
+        }
+        if (groupBy === 'alphabetical') this.$refs.listIndex.update()
+      })
+    },
+    toggleCheck () {
+      this.showCheckboxes = !this.showCheckboxes
+    },
+    isChecked (item) {
+      return this.selectedItems.indexOf(item) >= 0
+    },
+    click (event, item) {
+      if (this.showCheckboxes) {
+        this.toggleItemCheck(event, item.uid, item)
+      } else {
+        this.$f7router.navigate(item.uid)
+      }
+    },
+    ctrlClick (event, item) {
+      this.toggleItemCheck(event, item.uid, item)
+      if (!this.selectedItems.length) this.showCheckboxes = false
+    },
+    toggleItemCheck (event, itemName, item) {
+      if (!this.showCheckboxes) this.showCheckboxes = true
+      if (this.isChecked(itemName)) {
+        this.selectedItems.splice(this.selectedItems.indexOf(itemName), 1)
+      } else {
+        this.selectedItems.push(itemName)
+      }
+    },
+    removeSelected () {
+      const vm = this
+
+      this.$f7.dialog.confirm(
+        `Remove ${this.selectedItems.length} selected transformations?`,
+        'Remove Transformations',
+        () => {
+          vm.doRemoveSelected()
+        }
+      )
+    },
+    doRemoveSelected () {
+      let dialog = this.$f7.dialog.progress('Deleting Transformations...')
+
+      const promises = this.selectedItems.map((p) => {
+        return this.$oh.api.delete('/rest/transformations/' + p)
+      })
+      Promise.all(promises).then((data) => {
+        this.$f7.toast.create({
+          text: 'Transformations removed',
+          destroyOnClose: true,
+          closeTimeout: 2000
+        }).open()
+        this.selectedItems = []
+        dialog.close()
+        this.load()
+        this.$f7.emit('sidebarRefresh', null) // for what?
+      }).catch((err) => {
+        dialog.close()
+        this.load()
+        console.error(err)
+        this.$f7.dialog.alert('An error occurred while deleting: ' + err)
+        this.$f7.emit('sidebarRefresh', null) // for what?
+      })
+    }
+  }
+}
+</script>