Simple Pretty Terminal Transport

Source on GitHub

The Simple Pretty Terminal Transport provides beautiful, themed log output in your terminal, with no interactive features. Supports both Node.js and browser environments.

Looking for a powerful alternative?

This transport is built for frameworks like Next.js and for use with multiple projects running concurrently.

The Simple Pretty Terminal does not support keyboard navigation, search / filtering, or interactive features. For more advanced terminal printing for a non-Next.js / non-browser / single application, use the Pretty Terminal Transport.

Installation

npm

npm install loglayer @loglayer/transport-simple-pretty-terminal

pnpm

pnpm add loglayer @loglayer/transport-simple-pretty-terminal

yarn

yarn add loglayer @loglayer/transport-simple-pretty-terminal

Basic Usage

Pair with another logger for production

Simple Pretty Terminal is really meant for local development. Although there's nothing wrong with running it in production, the log output is not designed to be injested by 3rd party log collection systems.

It is recommended that you disable other transports when using Pretty Terminal to avoid duplicate log output.

Required Runtime Configuration

You must specify the runtime option when creating the transport.

• runtime: "node" — Use in Node.js environments. Logs are written using process.stdout.write.
• runtime: "browser" — Use in browser environments. Logs are written using console.log.

import { LogLayer } from "loglayer";
import { getSimplePrettyTerminal, moonlight } from "@loglayer/transport-simple-pretty-terminal";

const log = new LogLayer({
  transport: [
    new ConsoleTransport({
      // Example of how to enable a transport for non-development environments
      enabled: process.env.NODE_ENV !== 'development',
    }),
    getSimplePrettyTerminal({
      enabled: process.env.NODE_ENV === 'development',
      runtime: "node", // Required: "node" or "browser"
      viewMode: "expanded", // "inline" | "message-only" | "expanded"
      theme: moonlight
    }),
  ],
});

log.withMetadata({ foo: "bar" }).info("Hello from Simple Pretty Terminal!");

Configuration Options

Option	Type	Required	Description
runtime	string	✅ Yes	Runtime environment: "node" or "browser"
enabled	boolean	No	true
viewMode	string	No	"inline"
theme	object	No	moonlight
maxInlineDepth	number	No	4
showLogId	boolean	No	false
timestampFormat	string | function	No	"HH:mm:ss.SSS"
collapseArrays	boolean	No	true
flattenNestedObjects	boolean	No	true
includeDataInBrowserConsole	boolean	No	false

Runtime Environments

The transport supports two runtime environments:

Node.js Runtime

Use runtime: "node" for Node.js applications:

const transport = getSimplePrettyTerminal({
  runtime: "node",
  viewMode: "inline",
  theme: moonlight,
});

In Node.js runtime, logs are written using process.stdout.write for optimal terminal output.

Browser Runtime

Use runtime: "browser" for browser applications:

const transport = getSimplePrettyTerminal({
  runtime: "browser",
  viewMode: "inline",
  theme: moonlight,
});

In browser runtime, logs are written using appropriate console methods based on log level:

• trace and debug levels → console.debug()
• info level → console.info()
• warn level → console.warn()
• error and fatal levels → console.error()

This ensures proper log level filtering and styling in browser developer tools.

Next.js usage

To configure with Next.js, use the following code to use both server and client-side rendering:

const isServer = typeof window === "undefined";

const transport = getSimplePrettyTerminal({
  runtime: isServer ? "node" : "browser",
  viewMode: "inline",
  theme: moonlight,
});

For full integration instructions, see the Next.js integration guide

View Modes

The transport supports three view modes:

Inline (default)

• viewMode: 'inline'

Shows all information with complete data structures inline using key=value format. Nested objects are flattened with dot notation (e.g., user.profile.name=John). Arrays can be controlled with collapseArrays - when true they show as [...], when false they show as full JSON. Complex objects are shown as JSON when expanded.

Expanded

• viewMode: 'expanded'

Shows timestamp, level, and message on first line, with data on indented separate lines for better readability.

Message only

• viewMode: 'message-only'

Shows only the timestamp, log level and message for a cleaner output.

Themes

The transport comes with several built-in themes:

• moonlight (default)
• sunlight
• neon
• nature
• pastel

For more information on themes, see the Pretty Terminal Themes

Creating Custom Themes

You can create your own custom themes by implementing the SimplePrettyTerminalTheme interface. This gives you complete control over the colors and styling of your log output.

Theme Structure

A theme consists of the following properties:

interface SimplePrettyTerminalTheme {
  colors?: {
    trace?: ChalkInstance;
    debug?: ChalkInstance;
    info?: ChalkInstance;
    warn?: ChalkInstance;
    error?: ChalkInstance;
    fatal?: ChalkInstance;
  };
  logIdColor?: ChalkInstance;
  dataValueColor?: ChalkInstance;
  dataKeyColor?: ChalkInstance;
}

Using Chalk for Colors

The transport uses the chalk library for styling. You can import it from the transport package:

import { chalk } from "@loglayer/transport-simple-pretty-terminal";

Basic Custom Theme Example

Here's a simple custom theme with a dark blue color scheme:

import { chalk } from "@loglayer/transport-simple-pretty-terminal";

const darkBlueTheme = {
  colors: {
    trace: chalk.gray,
    debug: chalk.blue,
    info: chalk.cyan,
    warn: chalk.yellow,
    error: chalk.red,
    fatal: chalk.bgRed.white,
  },
  logIdColor: chalk.gray,
  dataValueColor: chalk.white,
  dataKeyColor: chalk.blue,
};

const transport = getSimplePrettyTerminal({
  runtime: "node",
  theme: darkBlueTheme,
});

Custom Timestamp Formatting

You can customize timestamp formatting using date-fns format strings or custom functions:

// Using date-fns format strings
const transport1 = getSimplePrettyTerminal({
  runtime: "node",
  timestampFormat: "yyyy-MM-dd HH:mm:ss", // 2024-01-15 14:30:25
  timestampFormat: "MMM dd, yyyy 'at' HH:mm", // Jan 15, 2024 at 14:30
  timestampFormat: "HH:mm:ss.SSS", // 14:30:25.123 (default)
});

// Using custom functions
const transport2 = getSimplePrettyTerminal({
  runtime: "node",
  timestampFormat: (timestamp: number) => {
    const date = new Date(timestamp);
    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
  },
});

Browser Console Data Inspection

includeDataInBrowserConsole Option

When running in the browser, you can enable the includeDataInBrowserConsole option to pass the log data object as a second argument to the browser's console methods (e.g., console.info(message, data) vs console.info(message)).

This allows you to expand and inspect the data object directly in your browser's developer tools, making debugging much easier.

Recommended: Use this option with "message-only" to avoid redundant data printing (otherwise, the data will be printed both inline and as an expandable object).

const transport = getSimplePrettyTerminal({
  runtime: "browser",
  viewMode: "message-only"
  includeDataInBrowserConsole: true,
});

Example output in browser devtools:

INFO [12:34:56.789] ▶ INFO User logged in { user: { id: 123, name: "Alice" } }

You can expand the object in the console for deeper inspection.