Introducing Candy Logger v2: A Beautiful Browser Logger for JavaScript & TypeScript

A modern, zero-dependency logging library with a floating developer console built for frontend applications.

---

#Introduction

Debugging is an essential part of every developer's workflow.

Yet, most browser debugging still revolves around scrolling through endless console messages, trying to find the information you actually need.

I wanted something better.

That's why I built Candy Logger v2—a complete rewrite of my JavaScript/TypeScript logging library focused entirely on the browser.

Instead of simply printing messages to the console, Candy Logger transforms your logs into an interactive floating UI with structured tables, searching, filtering, tagging, exporting, and much more.

The best part?

It's completely zero-dependency.

---

#What's New in Version 2?

Version 2 is more than just an update.

It's a complete redesign focused on improving the frontend developer experience.

#Highlights

• 🚀 Complete browser-first rewrite
• 📊 Interactive table-view logger
• 🏷️ Custom tagged logging
• 🎨 Six color-coded log levels
• 📋 Copy individual logs
• ⭐ Bookmark important entries
• 🗑️ Delete logs individually
• 🔍 Real-time search & filtering
• 🌙 Dark & Light themes
• 📦 Export logs as JSON
• 📌 Pin logger window
• ✋ Drag anywhere
• 📐 Resizable interface
• 📂 Collapsible JSON viewer
• 💙 TypeScript support
• ⚡ Zero dependencies

---

#Browser First

One of the biggest changes in this release is platform support.

Candy Logger v2 is browser-only.

The previous terminal-based implementation has been removed to allow the project to focus entirely on providing the best possible browser debugging experience.

If your project still depends on terminal logging, you should continue using the v1.x release.

Version 2 is built specifically for:

• React
• Next.js (Client Components)
• Vue
• Angular
• Svelte
• Vanilla JavaScript
• TypeScript

---

#Installation

Install Candy Logger using your preferred package manager.

#npm

npm install candy-logger

#Yarn

yarn add candy-logger

#pnpm

pnpm add candy-logger

---

#Quick Start

Getting started only takes a few lines of code.

import { overrideConsole } from "candy-logger";

overrideConsole({
  forceUI: true,
});

console.log("Hello World!");

console.info("User signed in", {
  userId: 123,
});

console.warn("Disk usage > 90%");

console.error("Payment failed", {
  code: "CARD_DECLINED",
});

Once enabled, your browser logs automatically appear inside Candy Logger's interactive UI.

No additional setup required.

---

#Features

#Interactive Logger UI

Instead of raw console output, logs are displayed in a structured table that's much easier to scan and navigate.

---

#Tagged Logging

Organize logs using custom tags so related messages stay grouped together.

Perfect for debugging larger applications.

---

#Multiple Log Levels

Candy Logger supports six different log levels with clear color coding for improved readability.

• Log
• Info
• Success
• Warning
• Error
• Debug

---

#Search & Filtering

Need to find a specific log?

Instantly search through thousands of log entries and filter results in real time.

---

#Built-in Log Actions

Every log entry includes useful actions such as:

• Copy
• Bookmark
• Delete

Making debugging sessions much more manageable.

---

#Dark & Light Themes

Choose the appearance that matches your workflow.

Switch between beautiful light and dark modes anytime.

---

#JSON Export

Need to share logs with teammates or attach them to bug reports?

Export your entire logging session as a JSON file with a single click.

---

#Draggable & Resizable

Move the logger anywhere on your screen.

Resize it to fit your workspace without interrupting development.

---

#Collapsible Object Viewer

Large objects no longer flood your screen.

Expand only the properties you need while keeping everything organized.

---

#Zero Dependencies

Candy Logger ships without external runtime dependencies.

That means:

• Smaller bundles
• Faster installs
• Better reliability
• Easier maintenance

---

#Why I Built Candy Logger

Most browser logging solutions fall into one of two categories:

• They're too minimal.
• They're overloaded with unnecessary complexity.

I wanted something that sits in the middle.

A lightweight logging tool that actually improves debugging instead of adding more noise.

Candy Logger was designed to feel like a browser DevTools companion—simple, visual, fast, and pleasant to use every day.

---

#Live Demo

Want to try it before installing?

🌐 Live Demo

https://candy-logger.msyb.dev/

---

#Project Links

#GitHub

https://github.com/shehari007/candy-logger

#npm

https://www.npmjs.com/package/candy-logger

---

#Roadmap

Some planned improvements include:

• Plugin system
• Custom themes
• Persistent log history
• Performance timeline
• Network request logging
• Keyboard shortcuts
• React DevTools integration
• Browser extension
• More customization options

---

#Final Thoughts

Debugging shouldn't mean digging through an endless wall of console messages.

It should be visual, searchable, organized, and enjoyable.

That's exactly what Candy Logger v2 aims to provide.

If the project helps you build better applications or makes debugging a little easier, consider giving the repository a ⭐ on GitHub.

Feedback, ideas, issues, and pull requests are always welcome.

Happy debugging! 🚀