Envizion

Stylish environment-aware console logging for browser applications

Envizion is a lightweight utility for displaying styled version and environment information in browser consoles. It automatically detects environment variables across various frameworks (Vite, React, etc.) and provides an elegant, customizable way to log your application's version, build date, and environment.

Features

• 🌈 Stylish Console Output - Beautiful gradient-styled logs that make your app information stand out
• 🔍 Environment Detection - Works across different frameworks (Vite, React, etc.)
• 🌐 Browser-Only - No server-side execution to avoid cluttering your server logs
• 🔧 Fully Customizable - Easily configure styles, content, and behavior
• 🧩 Framework Agnostic - Works with any JavaScript framework or vanilla JS
• 📦 Zero Dependencies - Just a single JS file, no build step required
• 🚀 Simple API - Just import and call the function

Installation

npm

npm install envizion

Direct use

You can also just copy the envizion.js file directly into your project.

Usage

import envizion from "envizion";

// Use default settings
envizion();

// With custom options
envizion({
  title: "My Awesome App",
  subtitle: "Development Build",
  version: "1.2.3",
  buildDate: new Date(),
});

API Reference

envizion(options?)

Parameters:

• options (Object, optional) - Configuration options
  • version (string, optional) - Version string
  • buildDate (string, optional) - Build date string
  • mode (string, optional) - Mode/environment string
  • title (string, optional) - Custom title (defaults to hostname)
  • subtitle (string, optional) - Custom subtitle
  • styles (Object, optional) - Custom CSS styles
    • title (string, optional) - CSS for the title
    • subtitle (string, optional) - CSS for the subtitle
    • info (string, optional) - CSS for the information text
  • verbose (boolean, optional) - Whether to log additional info

Environment Variable Detection

Envizion automatically looks for environment variables in the following order:

1. Vite environment variables (import.meta.env)
2. Process environment variables (process.env)
3. Global window properties

For version information, it checks:

• VITE_APP_VERSION
• REACT_APP_VERSION
• APP_VERSION
• npm_package_version

For build date:

• VITE_APP_BUILD_DATE
• REACT_APP_BUILD_DATE
• APP_BUILD_DATE

For mode/environment:

• MODE
• NODE_ENV
• VITE_APP_MODE
• REACT_APP_MODE

Examples

Use with Vite

// vite.config.js
import { defineConfig } from "vite";
import packageJson from "./package.json";

export default defineConfig({
  define: {
    "import.meta.env.VITE_APP_VERSION": JSON.stringify(packageJson.version),
    "import.meta.env.VITE_APP_BUILD_DATE": JSON.stringify(
      new Date().toISOString()
    ),
  },
});

// main.js
import envizion from "envizion";

envizion({
  title: "My Vite App",
});

Use with React

// In your React app entry point
import envizion from "envizion";

// Custom styling to match your brand
envizion({
  title: "React Application",
  styles: {
    title: `
      font-family: 'SF Pro Display', system-ui, sans-serif;
      background: #61dafb;
      color: #282c34;
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 4px;
    `,
  },
});

License

MIT © iplanwebsites