diff --git a/core/ui/EditTemplate.tid b/core/ui/EditTemplate.tid
index fe9f72ddb..a5fcb8057 100644
--- a/core/ui/EditTemplate.tid
+++ b/core/ui/EditTemplate.tid
@@ -9,9 +9,7 @@ modifier: JeremyRuston
<$edit field="draft.title"/>
@@
-
Type tags separated with spaces, [[using double square brackets]] if necessary
-
-<$edit field="tags"/>
+<$transclude template="$:/core/ui/TagsEditor"/>
<$reveal state="$:/ShowEditPreview" type="match" text="yes">
Use WikiText to add formatting, images, and dynamic features <$button type="set" set="$:/ShowEditPreview" setTo="no" >Hide preview$button>
@@ -29,4 +27,4 @@ modifier: JeremyRuston
<$edit field="text"/>
$reveal>
-{{$:/core/ui/FieldEditor}}
+<$transclude template="$:/core/ui/FieldEditor"/>
diff --git a/core/ui/TagsEditor.tid b/core/ui/TagsEditor.tid
new file mode 100644
index 000000000..09c2749e1
--- /dev/null
+++ b/core/ui/TagsEditor.tid
@@ -0,0 +1,17 @@
+title: $:/core/ui/TagsEditor
+
+<$fieldmangler><$list filter="[is[current]tags[]sort[title]]"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">×$button>$setstyle>
+$list>
+
+Add a new tag: <$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/><$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes">drop$button> <$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add$button>
+
+
+<$reveal state="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" type="nomatch" text="" default="" class="tw-tags-autocomplete">
+
+<$linkcatcher set="$:/NewTagName" setTo="" message="tw-add-tag"><$list filter="[!is[shadow]tags[]prefix{$:/NewTagName}sort[title]]"><$link><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text"/>$setstyle>$link>
+$list>
+$linkcatcher>
+
+$reveal>
+
+$fieldmangler>
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 7ad040078..aaa2a707d 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -471,6 +471,51 @@ canvas.tw-edit-bitmapeditor {
** Tiddler edit mode
*/
+.tw-edit-tags-list {
+ margin: 1em 0 1em 0;
+}
+
+.tw-remove-tag-button {
+ padding-left: 4px;
+}
+
+.tw-tags-autocomplete-wrapper {
+ position: relative;
+}
+
+.tw-tags-autocomplete {
+ position: absolute;
+ min-width: 20em;
+ border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
+ background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
+ <>
+ <>
+ padding: 0 0 0 0;
+ margin: 0.25em 0 0 0;
+ white-space: nowrap;
+ z-index: 1000;
+}
+
+.tw-tags-autocomplete a {
+ display: block;
+ padding: 0.25em 1em 0.25em 1em;
+}
+
+.tw-tags-autocomplete a:hover {
+ color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
+ background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
+ text-decoration: none;
+}
+
+.tw-add-tag {
+ color: #999;
+}
+
+.tw-add-tag-name {
+ display: inline-block;
+ width: 15%;
+}
+
.tw-tiddler-preview {
overflow: auto;
}
@@ -517,6 +562,10 @@ canvas.tw-edit-bitmapeditor {
vertical-align: middle;
}
+.tw-edit-field-add {
+ color: #999;
+}
+
.tw-edit-field-add-name {
display: inline-block;
width: 15%;