Make your own tagging system from scratch

Build a tagging tool from scratch rather than using one that is pre-made. You get more control, there isn’t unused code, and you learn something too. In this article I will go through the process of building a tagging system from scratch.

Our finished product populated with animal types.

Much of the css will be left as an exercise for the reader.
Generally one looks like a regular text input at the bottom of a form, but contained inside are pill shaped elements representing relevant tags. To the right of the tags is a place to add new ones. When you start typing tag suggestions appear and if you click on one the tag is added, or if you type your own and press enter, a new tag will be added.
First I’ll introduce you to the interface our module uses to keep track of each suggestion in Typescript.
interface ISuggestion {
name: string;

Original URL:

Original article

Comments are closed.

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑

%d bloggers like this: