Nutritious Pumpkin Masses

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published


    Set of tools that help to add color tags to your console logs.

    Typescript, es module, configurable, tree-shakable. Generated typedoc reference.



    # with npm
    npm install log-tags
    # with yarn
    yarn add log-tags
    # with pnpm
    pnpm i log-tags


    // import what you need from the package
    import { logtag, taggedLogger, tlog, installTaggedLogger, mergeTags } from "log-tags";
    // you can create a standalone tag
    const appTag = logtag("app");
    // tags need to be spread into console for styles to be picked up
    console.log(...appTag, "starting");
    // -> [App] starting
    // read below for moew info on colors and styles
    // you CAN'T use two tags in a console, the styles won't be recognozed
    console.log(...appTag, ...logtag("SubLog"), "initializing");
    // -> [App] %cSubLog {_CSS_STRING_} initializing
    // you can use supplied 'tlog' utility to merge all the tags into one declaration
    tlog(appTag, logtag("SubLog"), "initializing");
    // -> [App] [SubLog] initializing
    // You create a tagged logger.ts
    const systemLog = taggedLogger("System");
    // -> [System] loading
    // tagged loggers have internal method to create child loggers
    const subSystemA = systemLog.logger("Subsystem A");
    // -> [System] [Subsystem A] processing
    // if you want to log multiple tags in your own logging library there is a tool to merge tags together
    const allTags = mergeTags(logtag("tag-1"), logtag("tag-2"));
    console.log(...allTags, "completed");
    // -> [tag-1] [tag-2] completed

    logtag accepts a hex bg color or a CSS object as a second argument. If color is not passed then a unique color is generated for the string, the color is not random and is going to be the same for the same string, so even after app restart tags with same name will have same color. The color of the text is selected automatically based on the biggest contrast with background color. See Typedoc reference for signatures. CSS object allows configuring tags appearance, see allowed css fields in MDN docs.


    Tags are using consoles string substitution which means that it won't be available for you. You can still use string templates in your logs.


    npm i log-tags

    DownloadsWeekly Downloads






    Unpacked Size

    9.94 kB

    Total Files


    Last publish


    • n1kk