Use ConsoleFX in your app.

Use a fixed message without installing

Choose a sample, edit the text and copy console.log. This complete JavaScript contains a fixed output and needs no ConsoleFX import when it runs. Change the source scene to create a different message; a copied snippet does not update itself.

console.log("%c%s%c", "color:#22d3ee;font-size:42px;font-weight:700;font-family:Consolas,Liberation Mono,monospace;letter-spacing:0px;line-height:1.5;padding:13px;text-shadow:0 0 4.8px #22d3ee,0 0 12.4px #22d3ee", "Hello, developer.", "");

Test in console prints one entry. Editing, importing and copying never print. On clipboard failure, select the complete source and copy it manually. SVG snippets can be larger; the export area reports UTF-8 bytes.

Compose with TypeScript

Use the core package when values change or a design is shared across your codebase. These examples use public imports only. Install the preview release from npm under the next tag:

pnpm add @servrox/console-fx@next

The core has no runtime dependencies. The React adapter is available as a separate package.

import { badge } from "@servrox/console-fx/presets";
import { compileConsole } from "@servrox/console-fx/browser";

const scene = badge({ text: "Preview build" });
const output = compileConsole(scene, {
  target: "chromium", renderer: "css", motion: "reduce",
});
console.log(...output.args);

For one colored label, native %c can be enough. The package supplies reusable scenes, effect generation, literal-percent handling, validation, explicit renderer profiles and complete exports. It does not replace native object inspection or operational logging.

Welcome developers to an SDK

Put a product name, mode and next step together. The caller owns the opt-in flag and trigger. The Atlas values here are sample data; no SDK is initialized.

import { defineScene } from "@servrox/console-fx";
import { emitConsole } from "@servrox/console-fx/browser";

export function welcomeToSdk(showWelcome: boolean) {
  if (!showWelcome) return;
  const scene = defineScene({
    schemaVersion: 1,
    label: "SDK welcome",
    lines: [
      { runs: [{ text: "Atlas SDK" }] },
      { runs: [{ text: "Sandbox mode", effects: [{ kind: "badge" }] }] },
      { runs: [{ text: "See the SDK guide" }] },
    ],
  });
  emitConsole(scene, {
    target: "chromium", renderer: "svg", motion: "reduce", unsupported: "fallback",
    layout: { algorithm: "fit/v1", width: 600, maxHeight: 400,
      variant: "standard", overflow: "wrap-then-shrink", minFontSize: 12 },
  });
}

Call welcomeToSdk(true) from your chosen browser action. Keep startup welcomes sparse.

Show development context

Supply the project, environment and revision from your app. ConsoleFX does not read environment variables, inspect a deployment, or decide what is safe to disclose.

import { defineScene } from "@servrox/console-fx";
import { emitConsole } from "@servrox/console-fx/browser";

type Build = { project: string; environment: string; revision: string };
export function showBuild(development: boolean, build: Build) {
  if (!development) return;
  const scene = defineScene({
    schemaVersion: 1,
    label: "Development context",
    lines: [
      { runs: [{ text: build.project }] },
      { runs: [{ text: build.environment, effects: [{ kind: "badge" }] }] },
      { runs: [{ text: "Revision " + build.revision }] },
    ],
  });
  emitConsole(scene, {
    target: "chromium", renderer: "svg", motion: "reduce", unsupported: "fallback",
    layout: { algorithm: "fit/v1", width: 600, maxHeight: 400,
      variant: "standard", overflow: "wrap-then-shrink", minFontSize: 12 },
  });
}

Example input: { project: "atlas-web", environment: "preview", revision: "a1b2c3d" }. Pass your application’s development flag explicitly. A runtime guard alone does not promise dead-code elimination or zero production cost.

Print an allowlisted summary

Run this from a deliberate browser action after selecting and redacting the facts in your app. Keep tokens, cookies, request objects, user details and private endpoints out of the message. ConsoleFX does not automatically collect or remove them.

import { defineScene } from "@servrox/console-fx";
import { emitConsole } from "@servrox/console-fx/browser";

// The caller supplies only facts approved for the console.
export function showSummary(approved: boolean, facts: readonly string[]) {
  if (!approved) return;
  const scene = defineScene({
    schemaVersion: 1,
    label: "Supplied summary",
    lines: facts.map((text) => ({ runs: [{ text }] })),
  });
  emitConsole(scene, {
    target: "chromium", renderer: "svg", motion: "reduce", unsupported: "fallback",
    layout: { algorithm: "fit/v1", width: 600, maxHeight: 400,
      variant: "standard", overflow: "wrap-then-shrink", minFontSize: 12 },
  });
}

Sample facts: ["Build complete", "48 checks passed", "Ready for review"]. The library presents this snapshot; it does not verify the result or update a printed entry.

Use the React adapter

Install the adapter alongside the core package:

pnpm add @servrox/console-fx@next @servrox/console-fx-react@next

The hook returns an explicit logging action. Rendering and server rendering stay silent. ConsolePreview uses the same public compiler; CSS previews are approximate and SVG previews use its exact image URI.

import { neon } from "@servrox/console-fx/presets";
import { useConsoleScene } from "@servrox/console-fx-react";

const scene = neon({ text: "Hello, developer." });
export function PrintMessage() {
  const { log } = useConsoleScene(scene, {
    target: "chromium", renderer: "css", motion: "reduce",
  });
  return <button onClick={log}>Print message</button>;
}

Use a button or your own deliberate event. Do not log in a render body. A browser-only trigger belongs in a client component when your framework uses server components.

Next.js: client banner or browser startup

Use this client component from your layout and pass an explicit development or opt-in flag. The default is disabled.

"use client";
import { badge } from "@servrox/console-fx/presets";
import { ConsoleBanner } from "@servrox/console-fx-react";

const scene = badge({ text: "Preview build" });
export default function BuildBanner({ enabled = false }: { enabled?: boolean }) {
  return <ConsoleBanner scene={scene} enabled={enabled} options={{
    target: "chromium", renderer: "css", motion: "reduce",
  }} />;
}

ConsoleBanner prints at the first committed enabled state of each mounted instance. Later scene edits and enable toggles do not print it again. Development effect replay is guarded; a real unmount/remount, reload or separate instance can print again. It emits nothing during SSR.

For a startup message outside React, Next.js supports a browser instrumentation file:

// instrumentation-client.ts (or src/instrumentation-client.ts)
import { badge } from "@servrox/console-fx/presets";
import { emitConsole } from "@servrox/console-fx/browser";

// Next supplies this build-time value; ConsoleFX never reads it.
if (process.env.NODE_ENV === "development") {
  emitConsole(badge({ text: "Development build" }), {
    target: "chromium", renderer: "css", motion: "reduce",
  });
}

With TypeScript 6, include "types": ["node"] in your tsconfig compiler options for this startup recipe’s process type. The example workspace already includes the pinned Node type package. See the TypeScript types configuration.

Keep browser output out of server instrumentation. Choose the banner or startup approach; enabling both produces two entries. Opening DevTools later does not guarantee an animation restarts.

Choose the output and its limits

• CSS text: selectable styles for the explicit Chromium profile; the page approximation may differ from DevTools.
• SVG image: rich effects with a complete reset-styled native caption in the same call. Image lettering itself is not selectable.
• Plain text: the default when options are omitted and the readable projection for every target.

Other rich targets error unless you explicitly authorize text fallback. Read the recorded Windows Chrome and Edge builds and observations; descriptors describe implementation, not universal browser qualification.

Output is static by default. Finite motion lasts at most five seconds and must be selected explicitly. System motion policy chooses static output for reduced, unknown or unavailable preferences. An identical cached image can retain its finished frame. There is no handle to update, pause or delete an already printed log. Play and Show static affect the page preview only.

Cinematic titles and complete cards

Lightning Metal, Ice Cathedral, Liquid Chrome and Molten Gold are static SVG profiles for a single-line title of up to 24 code points. Set accent, depth, glow and ornaments. The Useful and Artful collections provide ten closed card presentations with editable content slots.

import { lightningMetal } from "@servrox/console-fx/presets";
import { exportConsoleLog } from "@servrox/console-fx/codegen";

const scene = lightningMetal({ text: "BUILD 2026", depth: 7,
  glow: 0.25, color: "#69dcff", ornaments: true });
const { code } = exportConsoleLog(scene, {
  target: "chromium", renderer: "svg", motion: "reduce",
});

Lightning Metal and Molten Gold use original A–Z, digit, space and hyphen paths. Lowercase displays as capitals while saved text and native caption preserve its case. The two serif profiles use local fonts, whose glyph coverage and widths vary by platform. There is no film or studio affiliation.

Unsupported content remains available with a diagnostic. Choose another profile, revise the title or explicitly use plain text. A card owns its layout and some typography; detach it to use ordinary flow controls. Older readers reject unsupported profiles rather than dropping their data.

Fit content, then choose its display size

Open Fit and sizing to simulate a chosen width. Simulation does not change exports; Use this width for export applies a recipe edit. The compiler wraps or shrinks only under the policy you choose and returns an error when the text cannot meet its readable floor.

Fixed display width and content layout are separate settings. Container-relative output remains experimental: actual display dimensions and image-text readability are unknown, and the native caption stays available. Standard cards keep their reviewed geometry; all ten card profiles have separately approved compact layouts. Use explicit fitting options to select them; the original scene keeps its standard output. A 280 px request can fail the readable font floor.

Measure local fonts is an optional explicit operation. It uses local font data without downloads. Results distinguish authored geometry, local measurements and estimates; a measured page font does not prove the recipient’s font. Package examples can carry the fixed validated metrics as data; no measurement runs when they print. Edit the content/style and remeasure explicitly, or omit metrics and accept the reported estimate.

Scene JSON contains content only. Recipe JSON includes explicit render, fitting and sizing options. Live font measurements are excluded from recipes, drafts and share links. Standalone JavaScript contains the compiled result.

Keep control of your work

A valid local draft resumes automatically. Conflicting shared scenes ask first. Import validates before replacement; a successful import or example transfer is one undoable change. Failed imports and storage errors preserve the current scene.

Changing render settings saves a recipe and retains your earlier raw scene draft. Invalid stored recipes hold writes until you choose a recovery. Reset asks for confirmation and clears session history without deleting the stored draft. Clear local draft removes stored ConsoleFX drafts while retaining your scene and undo history in memory; saving resumes after a later edit.

Use Recipe JSON for an independent backup. Shared links and downloads are copies; clearing local storage does not revoke them. No account, server backup, sync or telemetry is added.

Project status and license

The core, React adapter and studio use MIT. Both packages are published under next. Standalone exports work without a package dependency. See the source and release evidence for the current candidate, compatibility and remaining observations.