solid-ui-console

A SolidJS UI console component and controller for displaying and managing log messages in your Solid applications.

Installation

bun add solid-ui-console
# or
npm install solid-ui-console

Usage

1. Import and Setup the Console Controller

import { UIConsole, createUIConsole } from "solid-ui-console";

// --- Create console controller ---
const { messages, logMessage, clearMessages, setScrollRef } = createUIConsole();

2. Use the Console Component in Your Solid App

<UIConsole
  messages={messages}
  clearMessages={clearMessages}
  setScrollRef={setScrollRef}
  showTitle={true}
  titleText="Events:"
  showClear={true}
/>

3. Add a Message to the Console

logMessage("Hello from your app!");

API Reference

createUIConsole() – Console Controller

Creates a controller for managing console messages, log levels, and scroll behavior.

Returns:

• messages: Accessor<LogEntry[]> – The list of log entries (reactive, for SolidJS).
• addMessage(text: string, options?: LogMessageOptions): void – Add a message with custom level and style.
• logMessage(text: string, options?: LogMessageOptions): void – Log to browser console and add to UI.
• clearMessages(): void – Clear all messages.
• setScrollRef(ref: HTMLDivElement): void – Set a scrollable ref for auto-scrolling.
• theme: ThemeMode – The current theme ("light" or "dark").

Example

const { messages, logMessage, clearMessages, setScrollRef } = createUIConsole();
logMessage("A new message!", { level: "success", color: "#0f0" });

UIConsole Component

A SolidJS component for rendering the console UI.

Props

| Name | Type | Required | Default | Description | |----------------|-------------------------------------|----------|-----------|---------------------------------------------| | messages | () => LogEntry[] | Yes | — | The messages to display | | clearMessages | () => void | Yes | — | Function to clear all messages | | setScrollRef | (ref: HTMLDivElement) => void | Yes | — | Function to set the scrollable ref | | styles | UIConsoleStyle | No | — | Custom styles for container/message | | showTitle | boolean | No | true | Show the title bar | | titleText | string | No | "Console Messages" | Title text | | showClear | boolean | No | true | Show the clear button | | theme | ThemeMode | No | "light" | Theme mode (light/dark) |

Example

<UIConsole
  messages={messages}
  clearMessages={clearMessages}
  setScrollRef={setScrollRef}
  styles={{
    container: { background: "#222", color: "#fff", height: "400px" },
    message: { fontWeight: "bold", border: "1px solid #444" }
  }}
  theme="dark"
  showTitle={true}
  titleText="Events:"
  showClear={true}
/>

Types

LogLevel

type LogLevel = "info" | "warn" | "error" | "debug" | "success";

ThemeMode

type ThemeMode = "light" | "dark";

LogEntry

interface LogEntry {
  text: string;
  level: LogLevel;
  color?: string;
  background?: string;
  fontSize?: string;
  border?: string;
}

UIConsoleStyle

interface UIConsoleStyle {
  container?: JSX.CSSProperties;
  message?: JSX.CSSProperties;
}

LogMessageOptions

interface LogMessageOptions {
  level?: LogLevel;
  color?: string;
  background?: string;
  fontSize?: string;
  border?: string;
}

UIConsoleProps

interface UIConsoleProps {
  messages: () => LogEntry[];
  clearMessages: () => void;
  setScrollRef: (ref: HTMLDivElement) => void;
  styles?: UIConsoleStyle;
  showTitle?: boolean;
  titleText?: string;
  showClear?: boolean;
  theme?: ThemeMode;
}

Custom Styling & Theming

You can control the look of the console at three levels:

1. Theme: Set via the theme prop ("light" or "dark").
2. Global styles: Pass a styles prop to override container/message styles.
3. Per-message: Use logMessage("text", { color, background, ... }) to style individual entries.

Default styles are provided, but you can override any part via the styles prop or per-message options.

Example:

<UIConsole
  messages={messages}
  clearMessages={clearMessages}
  setScrollRef={setScrollRef}
  styles={{
    container: { background: "#222", color: "#fff", height: "400px" },
    message: { fontWeight: "bold", border: "1px solid #444" }
  }}
  theme="dark"
/>

Per-message styling:

logMessage("Warning!", { level: "warn", color: "#f90", background: "#222" });