diff --git a/tools/cldr-apps/js/package-lock.json b/tools/cldr-apps/js/package-lock.json
index f8e7dccfe69..0779af0dfd6 100644
--- a/tools/cldr-apps/js/package-lock.json
+++ b/tools/cldr-apps/js/package-lock.json
@@ -17,6 +17,7 @@
         "glyphicons-only-bootstrap": "^1.0.1",
         "marked": "^4.3.0",
         "swagger-client": "^3.26.7",
+        "unicode-name": "^1.1.0",
         "vue": "^3.2.47",
         "vue-virtual-scroller": "^2.0.0-beta.8",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
@@ -111,6 +112,7 @@
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@datadog/browser-logs/-/browser-logs-5.4.0.tgz",
       "integrity": "sha512-0eLkUHUTnch8cpJMqV421XpUaEs0yS/4xriWz+GsAs+2uFQGio26fDmdRGOvK+8JowDBSv9VY+YzRi8iXlhJOA==",
+      "peer": true,
       "dependencies": {
         "@datadog/browser-core": "5.4.0"
       },
@@ -127,6 +129,7 @@
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@datadog/browser-rum/-/browser-rum-5.4.0.tgz",
       "integrity": "sha512-gOYQE6RxM8wSYBekWnvNqb8ZEwjtDc9gNsb5xeGxsv40CHVSN5ccvilaRjGPqBO6z21eRqqBnbYjWHrYWnovCg==",
+      "peer": true,
       "dependencies": {
         "@datadog/browser-core": "5.4.0",
         "@datadog/browser-rum-core": "5.4.0"
@@ -1115,6 +1118,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -1388,6 +1392,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -3371,6 +3376,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -3597,6 +3603,7 @@
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.30.0.tgz",
       "integrity": "sha512-13Y0iMhIQuAm/wNGBL/9HEqIfRGmNmjKnTPlKWfA9f7dnDkr8d45wQ+S7+ZLh/Pq9PdcGxkqKUEA7ySu1QSd9Q==",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/ramda"
@@ -4267,6 +4274,14 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/unicode-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-name/-/unicode-name-1.1.0.tgz",
+      "integrity": "sha512-2XBI32vZP6a1tJmMDSUBabiIZuY+1udwZUoS7i5BTSU2c4ELMy6YJrTPF9uvYOVMU4vTMlHH6HG/TsHjCEsazA==",
+      "engines": {
+        "node": ">=18.20"
+      }
+    },
     "node_modules/uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
@@ -4319,6 +4334,7 @@
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
       "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.2.47",
         "@vue/compiler-sfc": "3.2.47",
@@ -4497,6 +4513,7 @@
       "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
@@ -4543,6 +4560,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.2.tgz",
       "integrity": "sha512-4y3W5Dawri5+8dXm3+diW6Mn1Ya+Dei6eEVAdIduAmYNLzv1koKVAqsfgrrc9P2mhrYHQphx5htnGkcNwtubyQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^2.0.1",
diff --git a/tools/cldr-apps/js/package.json b/tools/cldr-apps/js/package.json
index 2654afe424c..cd5c21eef6a 100644
--- a/tools/cldr-apps/js/package.json
+++ b/tools/cldr-apps/js/package.json
@@ -50,6 +50,7 @@
     "glyphicons-only-bootstrap": "^1.0.1",
     "marked": "^4.3.0",
     "swagger-client": "^3.26.7",
+    "unicode-name": "^1.1.0",
     "vue": "^3.2.47",
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
diff --git a/tools/cldr-apps/js/src/views/AddValue.vue b/tools/cldr-apps/js/src/views/AddValue.vue
index 7ac54f17986..57a8284bf18 100644
--- a/tools/cldr-apps/js/src/views/AddValue.vue
+++ b/tools/cldr-apps/js/src/views/AddValue.vue
@@ -1,16 +1,100 @@
+<template>
+  <!-- If use a-button instead of button, form positioning fails -->
+  <button class="plus" type="button" @click="showModal">
+    ✚
+    <!-- U+271A HEAVY GREEK CROSS -->
+  </button>
+  <a-modal
+    v-model:visible="formIsVisible"
+    :closable="false"
+    :footer="null"
+    class="dialog"
+    :style="{
+      position: 'sticky',
+      left: formLeft + 'px',
+      top: formTop + 'px',
+    }"
+    @ok="onSubmit"
+  >
+    <p>
+      <a-config-provider :direction="dir">
+        <template v-if="inputModeIsTags">
+          <component
+            :is="AddValueTags"
+            :key="componentKey"
+            v-model="newValue"
+            ref="tagsRef"
+            @change="handleTagsChange"
+          />
+        </template>
+        <template v-else>
+          <!-- input mode is Text -->
+          <a-input
+            v-model:value="newValue"
+            placeholder="Add a translation"
+            ref="inputToFocus"
+            @keydown.enter="onSubmit"
+          />
+        </template>
+      </a-config-provider>
+    </p>
+
+    <p>
+      <label for="radio_mode">Input mode:&nbsp;&nbsp;</label>
+      <a-radio-group id="radio_mode" v-model:value="inputModeIsTags">
+        <a-tooltip placement="bottom">
+          <template #title>{{ textHelp }}</template>
+          <a-radio :value="false">Text</a-radio>
+        </a-tooltip>
+        <a-tooltip placement="bottom">
+          <template #title>{{ tagHelp }}</template>
+          <a-radio :value="true">Tags</a-radio>
+        </a-tooltip>
+      </a-radio-group>
+    </p>
+
+    <div class="button-container">
+      <a-button @click="onEnglish">→English</a-button>
+      <a-button @click="onWinning">→Winning</a-button>
+      <button
+        class="plus"
+        type="button"
+        @click="voteForMissing"
+        v-if="showVoteForMissing"
+      >
+        {{ cldrConstants.VOTE_FOR_MISSING }} - vote for missing
+      </button>
+      <a-button type="cancel" @click="onCancel">Cancel</a-button>
+      <a-button type="primary" @click="onSubmit">Submit</a-button>
+    </div>
+  </a-modal>
+</template>
+
 <script setup>
 import { nextTick, ref } from "vue";
 
+import AddValueTags from "./AddValueTags.vue";
+
 import * as cldrAddValue from "../esm/cldrAddValue.mjs";
 import * as cldrConstants from "../esm/cldrConstants.mjs";
 import * as cldrStatus from "../esm/cldrStatus.mjs";
 
+const textHelp =
+  "Show the value as a text string, which can be edited using the ordinary editing features of the web browser";
+
+const tagHelp =
+  "Show the value as a sequence of tags, each tag representing a character, with special features for viewing/editing tags";
+
 const xpstrid = ref(""); // xpath string id
 const newValue = ref("");
 const formLeft = ref(0);
 const formTop = ref(0);
 const formIsVisible = ref(false);
 const inputToFocus = ref(null);
+const inputModeIsTags = ref(false);
+const componentKey = ref(0);
+const tagsRef = ref();
+
 const showVoteForMissing = ref(
   cldrStatus.getPermissions()?.userCanVoteForMissing
 );
@@ -25,12 +109,16 @@ function showModal(event) {
   // Use the coordinates of the button's top-left corner
   formLeft.value = event.clientX - event.offsetX;
   formTop.value = event.clientY - event.offsetY;
-  newValue.value = "";
+  setValue("");
   formIsVisible.value = true;
   cldrAddValue.setFormIsVisible(true, xpstrid.value);
   nextTick(focusInput);
 }
 
+function setValue(s) {
+  newValue.value = s;
+}
+
 function focusInput() {
   if (inputToFocus.value) {
     inputToFocus.value.focus();
@@ -38,11 +126,11 @@ function focusInput() {
 }
 
 function onEnglish() {
-  newValue.value = cldrAddValue.getEnglish(xpstrid.value);
+  setValue(cldrAddValue.getEnglish(xpstrid.value));
 }
 
 function onWinning() {
-  newValue.value = cldrAddValue.getWinning(xpstrid.value);
+  setValue(cldrAddValue.getWinning(xpstrid.value));
 }
 
 function onCancel() {
@@ -59,7 +147,16 @@ function onSubmit() {
 }
 
 function voteForMissing() {
-  newValue.value = cldrConstants.VOTE_FOR_MISSING;
+  setValue(cldrConstants.VOTE_FOR_MISSING);
+}
+
+function handleTagsChange() {
+  // Incrementing the componentKey forces re-rendering. Otherwise reactive update
+  // fails for unknown reasons under some circumstances. For example, when a tag is
+  // deleted, if re-rendering is not forced, sometimes two adjacent [+] controls are
+  // displayed, which should not be the case. Reference:
+  // https://michaelnthiessen.com/force-re-render/#better-way-you-can-use-forceupdate
+  componentKey.value++;
 }
 
 defineExpose({
@@ -67,48 +164,6 @@ defineExpose({
 });
 </script>
 
-<template>
-  <!-- If use a-button instead of button, form positioning fails -->
-  <button class="plus" type="button" @click="showModal">
-    ✚
-    <!-- U+271A HEAVY GREEK CROSS -->
-  </button>
-  <a-modal
-    v-model:visible="formIsVisible"
-    :closable="false"
-    :footer="null"
-    :style="{
-      position: 'sticky',
-      left: formLeft + 'px',
-      top: formTop + 'px',
-    }"
-    @ok="onSubmit"
-  >
-    <a-config-provider :direction="dir">
-      <a-input
-        v-model:value="newValue"
-        placeholder="Add a translation"
-        ref="inputToFocus"
-        @keydown.enter="onSubmit"
-      />
-    </a-config-provider>
-    <div class="button-container">
-      <a-button @click="onEnglish">→English</a-button>
-      <a-button @click="onWinning">→Winning</a-button>
-      <button
-        class="plus"
-        type="button"
-        @click="voteForMissing"
-        v-if="showVoteForMissing"
-      >
-        {{ cldrConstants.VOTE_FOR_MISSING }} - vote for missing
-      </button>
-      <a-button type="cancel" @click="onCancel">Cancel</a-button>
-      <a-button type="primary" @click="onSubmit">Submit</a-button>
-    </div>
-  </a-modal>
-</template>
-
 <style scoped>
 .button-container {
   display: flex;
diff --git a/tools/cldr-apps/js/src/views/AddValueTags.vue b/tools/cldr-apps/js/src/views/AddValueTags.vue
new file mode 100644
index 00000000000..a5168c7562c
--- /dev/null
+++ b/tools/cldr-apps/js/src/views/AddValueTags.vue
@@ -0,0 +1,150 @@
+<template>
+  <template v-for="(tag, index) in tagArray" :key="index">
+    <a-input
+      v-if="visibleInputIndex === index"
+      ref="tagInputRef"
+      v-model:value="newTagText"
+      type="text"
+      size="small"
+      class="new-tag-input"
+      v-focus
+      @blur="handleInputConfirm(index)"
+      @keyup.enter="handleInputConfirm(index)"
+    />
+    <a-tag v-else class="new-tag-plus" @click="visibleInputIndex = index">
+      +
+    </a-tag>
+    <template v-if="index + 1 < tagArray.length">
+      <a-tag :closable="true" @close="deleteTag(index)">
+        <a-tooltip>
+          <template #title> {{ tagTooltip(tag) }} </template>
+          {{ tag }}
+        </a-tooltip>
+      </a-tag>
+    </template>
+  </template>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { unicodeName } from "unicode-name";
+
+const DEBUG = true;
+
+// The END_TAG is not displayed; it serves only for [+] adding a new tag at the end
+const END_TAG = "end";
+
+const props = defineProps({
+  modelValue: String,
+});
+
+onMounted(mounted);
+
+function mounted() {
+  convertTextToTags(props.modelValue);
+}
+
+const emit = defineEmits(["change", "update:modelValue"]);
+
+const tagArray = ref([END_TAG]);
+const newTagText = ref("");
+const visibleInputIndex = ref(-1);
+const tagInputRef = ref(null);
+
+// Enable any element with v-focus to become focused automatically. In particular, the
+// element with ref=tagInputRef gets the blinking cursor without needing the user to click in it.
+const vFocus = {
+  mounted: (el) => el.focus(),
+};
+
+function deleteTag(index) {
+  tagArray.value.splice(index, 1);
+  if (DEBUG) {
+    console.log("deleteTag: index = " + index + "; tags = " + tagArray.value);
+  }
+  updateParent();
+}
+
+function handleInputConfirm(index) {
+  const s = processInput(newTagText.value);
+  if (s) {
+    tagArray.value.splice(index, 0, s);
+    if (DEBUG) {
+      console.log(
+        "handleInputConfirm index = " + index + "; tags = " + tagArray.value
+      );
+    }
+  }
+  visibleInputIndex.value = -1;
+  newTagText.value = "";
+  updateParent();
+}
+
+function updateParent() {
+  emit("change");
+  emit("update:modelValue", convertTagsToText());
+}
+
+/**
+ * Whenever the tags change, update the text string value, in case the user
+ * switches to Text mode or presses the Submit button. (Alternatively, we
+ * could wait for one of those events to occur, however that might need tighter
+ * coupling with the parent component.)
+ */
+function convertTagsToText() {
+  // Omit END_TAG, hence "-1"
+  const text = tagArray.value.slice(0, -1).join("");
+  if (DEBUG) {
+    console.log(
+      "convertTagsToText: tags = " + tagArray.value + "; text = " + text
+    );
+  }
+  return text;
+}
+
+function convertTextToTags(text) {
+  // To support codepoints greater than U+FFFF, use text.split(/(?:)/u), not split("")
+  const tags = text.split(/(?:)/u);
+  tags.push(END_TAG);
+  tagArray.value = tags;
+  if (DEBUG) {
+    console.log("convertTextToTags: text = " + text + "; tags = " + tags);
+  }
+}
+
+function processInput(s) {
+  if (s?.startsWith("U+")) {
+    const usv = parseInt(s.slice(2), 16); // Unicode scalar value
+    if (
+      usv > 0 &&
+      usv < 0x10ffff &&
+      (usv & 0xffff) < 0xfffe &&
+      (usv < 0xd800 || usv > 0xdfff)
+    ) {
+      // To support codepoints greater than U+FFFF, use fromCodePoint, not fromCharCode
+      return String.fromCodePoint(usv);
+    }
+  }
+  return s;
+}
+
+function tagTooltip(tag) {
+  // To support codepoints greater than U+FFFF, use codePointAt, NOT charCodeAt.
+  const firstChar = tag.codePointAt(0);
+  const usv = "U+" + firstChar.toString(16).toUpperCase().padStart(4, "0");
+  const name = unicodeName(firstChar);
+  return usv + " " + name;
+}
+</script>
+
+<style scoped>
+.new-tag-input {
+  width: 78px;
+  margin: 0 8px 0 0;
+}
+
+.new-tag-plus {
+  background: #fff;
+  border-style: dashed;
+}
+</style>