Visulima

https://visulima.com/docs
Admin
Visulima is a comprehensive TypeScript developer platform — production-ready packages for CLI tools,...
Tokens:896,203
Snippets:10,862
Trust Score:6
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Solid Start dependencies

Source: https://visulima.com/docs/packages/storage-client/solid

Install the required packages for Solid Start projects.

```bash
npm install @visulima/storage-client @tanstack/solid-query solid-start
```

--------------------------------

### Package Configuration

Source: https://visulima.com/docs/packages/packem/examples/advanced/webassembly

Example package.json setup for a project using Packem.

```json
{
  "name": "@myorg/wasm-example",
  "version": "1.0.0",
  "type": "module",
  "files": ["dist"],
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs"
    }
  },
  "scripts": {
    "build": "packem build"
  },
  "devDependencies": {
    "@visulima/packem": "^2"
  }
}
```

--------------------------------

### Examples of vis install usage

Source: https://visulima.com/docs/packages/vis/commands/install

Common usage patterns for installing dependencies with various security and performance flags.

```bash
# Install all dependencies (frozen-lockfile + scripts blocked by default)
vis install

# Allow lockfile updates for this run
vis install --no-frozen-lockfile

# Run lifecycle scripts (allowlisted packages run regardless via security.policies.installScripts.allow)
vis install --run-scripts

# Install with frozen lockfile (explicit; same as the default when a lockfile exists)
vis install --frozen-lockfile

# Cache-first install — use cached tarballs when available, fall back to network
vis install --prefer-offline

# Strict offline — fail if any package is not already cached
vis install --offline

# Without optional dependencies
vis install --no-optional

# Force re-install
vis install --force

# Force aube as the installer (errors if not on PATH)
vis install --installer aube

# Bypass aube for one run, use the lockfile-detected PM
vis install --no-aube
```

--------------------------------

### Example Dockerfile for Visulima

Source: https://visulima.com/docs/packages/vis/commands/docker

A multi-stage Dockerfile demonstrating dependency installation, project building, and production image creation.

```dockerfile
FROM node:22-slim AS deps
WORKDIR /app

# 1. Scaffold — only manifests
RUN corepack enable
COPY .vis/docker/workspace/ ./
RUN pnpm install --frozen-lockfile

# 2. Sources — only the focus project
FROM deps AS build
COPY .vis/docker/sources/ ./
COPY .vis/docker/vis-docker-manifest.json .vis/docker/
RUN pnpm --filter my-app build
RUN vis docker prune --context=.vis/docker

# 3. Production image
FROM node:22-slim
WORKDIR /app
COPY --from=build /app/packages/my-app/dist ./dist
CMD ["node", "dist/index.js"]
```

--------------------------------

### Docker and CI Integration

Source: https://visulima.com/docs/packages/vis/commands/toolchain

Examples for running the installation scripts within Docker build steps.

```dockerfile
# Linux / macOS images
RUN curl -fsSL https://visulima.com/install.sh \
    | bash -s -- --yes --manager=proto --no-toolchain-install
```

```dockerfile
# Windows images (PowerShell)
RUN powershell -Command "& ([scriptblock]::Create((irm 'https://visulima.com/install.ps1'))) -Yes -Manager proto -NoToolchainInstall"
```

--------------------------------

### Quick start with Vitest

Source: https://visulima.com/docs/packages/tui/testing

Basic setup for rendering a component and asserting on the output frame.

```typescript
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, render } from "@visulima/tui/test";
import { Text } from "@visulima/tui/components/text";
afterEach(() => {
    cleanup();
});

describe("my component", () => {
    it("renders greeting", () => {
        const { lastFrame } = render(<Text>Hello World</Text>);

        expect(lastFrame()).toBe("Hello World");
    });
});
```

--------------------------------

### Install @visulima/tui

Source: https://visulima.com/docs/packages/tui/quickstart-react

Install the necessary packages to start building TUI applications with React.

```bash
npm install @visulima/tui react
```

--------------------------------

### Install and run CLI

Source: https://visulima.com/docs/packages/cerebro/guides/building-cli

Global installation and execution of the published CLI package.

```bash
npm install -g my-cli
my-cli build --production
```

--------------------------------

### Install the package

Source: https://visulima.com/docs/packages/ansi

Install the package via npm.

```bash
npm install @visulima/ansi
```

--------------------------------

### Define Command Examples

Source: https://visulima.com/docs/packages/cerebro/api/command

Specify usage examples for the command help output.

```javascript
{
    examples: ["build --production", "build --production --output dist"];
}
```

--------------------------------

### Common vis ci examples

Source: https://visulima.com/docs/packages/vis/commands/ci

Various configurations for running CI pipelines, including base ref overrides, skipping installations, and parallel execution.

```bash
vis ci lint,test,build                     # Full CI pipeline
vis ci test --base=origin/main             # Override base ref
vis ci build --no-install                  # Skip install (deps already present)
vis ci build --parallel=6                  # Increase concurrency
vis ci test --query "language=typescript"  # Filter by project metadata
```

--------------------------------

### Install @visulima/packem-share

Source: https://visulima.com/docs/packages/packem/api/packem-share

Install the package using npm.

```bash
npm install @visulima/packem-share
```

--------------------------------

### Install @visulima/string

Source: https://visulima.com/docs/packages/string/installation

Commands to install the package using various package managers.

```bash
pnpm add @visulima/string
```

```bash
npm install @visulima/string
```

```bash
yarn add @visulima/string
```

--------------------------------

### Install @visulima/iso-locale

Source: https://visulima.com/docs/packages/iso-locale/installation

Use npm to install the package in your project.

```bash
npm install @visulima/iso-locale
```

--------------------------------

### Install @visulima/html

Source: https://visulima.com/docs/packages/html/installation

Use npm to install the package in your project.

```bash
npm install @visulima/html
```

--------------------------------

### Install @visulima/boxen

Source: https://visulima.com/docs/packages/boxen/installation

Use npm to install the package in your project.

```bash
npm install @visulima/boxen
```

--------------------------------

### Verify Installation

Source: https://visulima.com/docs/packages/ansi/installation

Test the installation by performing a simple cursor movement.

```javascript
import { cursorUp, cursorLeft } from "@visulima/ansi";

// Move cursor up 2 rows and to the left
process.stdout.write(cursorUp(2) + cursorLeft);
console.log("Cursor moved!");
```

--------------------------------

### Usage syntax for vis install

Source: https://visulima.com/docs/packages/vis/commands/install

Basic command structure for executing the install command.

```bash
vis install [options]
```

--------------------------------

### Install and Initialize Packem

Source: https://visulima.com/docs/packages/packem

Commands to install the Packem package and initialize or build a project.

```bash
npm install --save-dev @visulima/packem
npx packem init
npx packem build
```

--------------------------------

### Install CLI dependencies

Source: https://visulima.com/docs/packages/cerebro/guides/building-cli

Install the required filesystem and path utility packages.

```bash
npm install @visulima/fs @visulima/path
```

--------------------------------

### Verify Installation

Source: https://visulima.com/docs/packages/path/installation

Test the installation by importing core path functions and verifying their output.

```javascript
import { resolve, join, basename } from "@visulima/path";

console.log(join("src", "config", "app.json"));
// Output: 'src/config/app.json'

console.log(resolve("docs", "guide.md"));
// Output: '/current/directory/docs/guide.md'

console.log(basename("/home/user/document.pdf"));
// Output: 'document.pdf'
```

--------------------------------

### Complete Plugin Implementation

Source: https://visulima.com/docs/packages/cerebro/api/plugin

A full example demonstrating metadata, initialization, toolbox extension, and lifecycle hooks.

```javascript
cli.addPlugin({
    name: "http-client",
    version: "1.0.0",
    description: "HTTP client utilities",
    dependencies: ["logger"],

    init: async ({ logger }) => {
        logger.info("HTTP client plugin initialized");
    },

    execute: (toolbox) => {
        toolbox.http = {
            get: async (url: string) => {
                const response = await fetch(url);
                return response.json();
            },
            post: async (url: string, data: unknown) => {
                const response = await fetch(url, {
                    method: "POST",
                    body: JSON.stringify(data),
                });
                return response.json();
            },
        };
    },

    beforeCommand: async (toolbox) => {
        toolbox.logger.debug(`Preparing HTTP client`);
    },

    afterCommand: async (toolbox, result) => {
        toolbox.logger.debug(`Command completed`);
    },

    onError: async (error, toolbox) => {
        toolbox.logger.error(`HTTP error:`, error);
    },
});
```

--------------------------------

### Verify installation

Source: https://visulima.com/docs/packages/email/installation

Initialize the mail instance with a provider to verify the installation.

```typescript
import { createMail } from "@visulima/email";
import { resendProvider } from "@visulima/email/providers/resend";

const mail = createMail(resendProvider({ apiKey: "test" }));
console.log("@visulima/email is installed and ready!");
```

--------------------------------

### Quick start with Files facade

Source: https://visulima.com/docs/packages/storage

Demonstrates initializing the Files facade with an S3 adapter, performing operations, and handling bulk actions.

```typescript
import { Files } from "@visulima/storage";
import { S3Storage } from "@visulima/storage/provider/aws";

const files = new Files({
    adapter: new S3Storage({ bucket: "uploads", region: "us-east-1" }),
    defaults: { timeout: 30_000, retries: { maxRetries: 5 } },
    hooks: {
        onAction: ({ type, key, durationMs }) => log.info(type, key, durationMs),
        onRetry: ({ type, key, attempt }) => log.warn(type, key, "retry", attempt),
    },
});

await files.upload("avatars/abc.png", buffer, { contentType: "image/png" });

const url = await files.url("avatars/abc.png", { expiresIn: 900 });
const { body } = await files.download("avatars/abc.png", { range: { start: 0, end: 1023 } });

// Bulk: upload / download / delete / move accept an array and return a structured result.
const { uploaded, errors } = await files.upload([
    { key: "a.txt", body: "A" },
    { key: "b.txt", body: "B" },
]);

// Walk every object as an async iterable — pages internally.
for await (const file of files.listAll({ prefix: "avatars/" })) {
    log.info(file.key, file.size);
}
```

--------------------------------

### Install Visulima TUI

Source: https://visulima.com/docs/packages/tui/quickstart-raw-buffer

Install the core package to begin using raw-buffer mode.

```bash
npm install @visulima/tui
```

--------------------------------

### Install @visulima/spinner

Source: https://visulima.com/docs/packages/spinner/getting-started

Commands to install the package using various package managers.

```bash
pnpm add @visulima/spinner
```

```bash
npm install @visulima/spinner
```

```bash
yarn add @visulima/spinner
```

```bash
bun add @visulima/spinner
```

--------------------------------

### Example package.json Configuration

Source: https://visulima.com/docs/packages/packem/examples/advanced/bundle-analysis

A sample package.json demonstrating build scripts for analysis and metafile generation.

```json
{
  "name": "@myorg/analyze-example",
  "version": "1.0.0",
  "type": "module",
  "files": ["dist"],
  "exports": {
    ".": {
      "import": "./dist/index.mjs"
    }
  },
  "scripts": {
    "build": "packem build",
    "analyze": "packem build --analyze",
    "meta": "packem build --metafile"
  },
  "devDependencies": {
    "@visulima/packem": "^2"
  }
}
```

--------------------------------

### Complete Configuration Example

Source: https://visulima.com/docs/packages/pail/configuration

Demonstrates a comprehensive configuration including log levels, scopes, throttling, custom types, reporters, and processors.

```javascript
import { createPail } from "@visulima/pail";
import { PrettyReporter } from "@visulima/pail/reporter/pretty";
import { CallerProcessor } from "@visulima/pail/processor/caller";

const logger = createPail({
    // Log level
    logLevel: process.env.NODE_ENV === "production" ? "info" : "debug",

    // Scope
    scope: ["app", "api"],

    // Throttling
    throttle: 2000,
    throttleMin: 10,

    // Custom types
    types: {
        http: {
            badge: "🌐",
            color: "blue",
            label: "HTTP",
            logLevel: "info",
        },
        db: {
            badge: "💾",
            color: "cyan",
            label: "DB",
            logLevel: "debug",
        },
    },

    // Reporters
    reporters: [
        new PrettyReporter({
            uppercase: { label: true },
        }),
    ],

    // Processors
    processors: [new CallerProcessor()],

    // Timer messages
    messages: {
        timerStart: "⏱️  Started:",
        timerEnd: "✅ Completed in:",
    },

    // Server-specific
    interactive: true,
});
```

--------------------------------

### Install @visulima/fmt

Source: https://visulima.com/docs/packages/fmt/installation

Commands to install the package using different package managers.

```bash
npm install @visulima/fmt
```

```bash
pnpm add @visulima/fmt
```

```bash
yarn add @visulima/fmt
```

```bash
bun add @visulima/fmt
```

--------------------------------

### Get elapsed time

Source: https://visulima.com/docs/packages/spinner/usage

Retrieve the milliseconds elapsed since the spinner started.

```javascript
console.log(spinner.elapsedTime); // 1234
```

--------------------------------

### Configure Default and Custom Output Directories

Source: https://visulima.com/docs/packages/packem/options/output-directory

Examples showing the default output behavior and how to specify a custom directory path.

```javascript
export default defineConfig({
  // Uses 'dist' by default
})
```

```javascript
export default defineConfig({
  rollup: {
    output: {
      dir: 'build' // Custom output directory
    }
  }
})
```

--------------------------------

### Install dependencies

Source: https://visulima.com/docs/packages/notification/i18n

Install the notification package and the required intl-messageformat peer dependency.

```bash
npm install @visulima/notification intl-messageformat
```

--------------------------------

### Install Visulima Storage Package

Source: https://visulima.com/docs/packages/storage/openapi

Install the package to access OpenAPI specifications.

```bash
npm install @visulima/storage
```

--------------------------------

### Initialize Packem configuration

Source: https://visulima.com/docs/packages/packem/examples/basic-javascript

Run the interactive setup command to generate the configuration file.

```bash
npx packem init
```

--------------------------------

### Initialize and use a basic spinner

Source: https://visulima.com/docs/packages/spinner/getting-started

Setup the InteractiveManager and start a simple spinner.

```typescript
import { InteractiveManager, InteractiveStreamHook } from "@visulima/interactive-manager";
import { Spinner } from "@visulima/spinner";

const stdoutHook = new InteractiveStreamHook(process.stdout);
const stderrHook = new InteractiveStreamHook(process.stderr);
const manager = new InteractiveManager(stdoutHook, stderrHook);

const spinner = new Spinner({ name: "dots" }, manager);

spinner.start("Processing...");

await processData();

spinner.succeed("Completed!");
```

--------------------------------

### Complete Command Definition

Source: https://visulima.com/docs/packages/cerebro/api/command

A full example demonstrating command registration with arguments, options, and environment variable definitions.

```javascript
cli.addCommand({
    name: "deploy",
    alias: "d",
    description: "Deploy the application",
    group: "Deployment",
    examples: ["deploy --env production", "deploy --env staging --dry-run"],
    argument: {
        name: "target",
        type: String,
        description: "Deployment target",
        defaultValue: "production",
    },
    options: [
        {
            name: "env",
            alias: "e",
            type: String,
            required: true,
            description: "Environment name",
        },
        {
            name: "dry-run",
            type: Boolean,
            description: "Perform a dry run",
        },
    ],
    env: [
        {
            name: "API_KEY",
            type: String,
            description: "API key for deployment",
        },
        {
            name: "TIMEOUT",
            type: Number,
            defaultValue: 30000,
            description: "Deployment timeout in milliseconds",
        },
        {
            name: "FORCE_DEPLOY",
            type: Boolean,
            defaultValue: false,
            description: "Force deployment without confirmation",
        },
    ],
    execute: async ({ argument, options, env, logger }) => {
        const target = argument[0];
        const apiKey = env.apiKey;
        const timeout = env.timeout; // 30000 if not set
        const forceDeploy = env.forceDeploy; // false if not set

        logger.info(`Deploying to ${target} (${options.env})`);
        if (forceDeploy) {
            logger.info("Force deployment enabled");
        }
    },
});
```

--------------------------------

### Install @visulima/progress-bar

Source: https://visulima.com/docs/packages/progress-bar/getting-started

Commands to install the package using various package managers.

```bash
pnpm add @visulima/progress-bar
```

```bash
npm install @visulima/progress-bar
```

```bash
yarn add @visulima/progress-bar
```

```bash
bun add @visulima/progress-bar
```

--------------------------------

### Initialize CLI Project

Source: https://visulima.com/docs/packages/cerebro/guides/building-cli

Commands to create the project directory and install necessary dependencies.

```bash
mkdir my-cli && cd my-cli
npm init -y
npm install @visulima/cerebro @visulima/command-line-args @visulima/error
```

--------------------------------

### Add command examples

Source: https://visulima.com/docs/packages/cerebro/guides/commands

The examples property provides an array of strings showing how to use the command.

```javascript
cli.addCommand({
    name: "deploy",
    examples: ["deploy --env production", "deploy --env staging --dry-run"],
    execute: () => {},
});
```

--------------------------------

### Quick Start with @visulima/inspector

Source: https://visulima.com/docs/packages/inspector

Basic usage example demonstrating how to import and use the inspect function to log an object.

```typescript
import { inspect } from "@visulima/inspector";

const obj = { name: "John", age: 30 };
console.log(inspect(obj));
```

--------------------------------

### Define a run:before hook

Source: https://visulima.com/docs/packages/vis/guides/plugins

Executes setup logic before any tasks in the graph start. Throwing an error here will abort the entire run.

```typescript
definePlugin({
    name: "docker-up",
    hooks: {
        "run:before": async () => {
            await execa("docker", ["compose", "up", "-d"]);
        },
    },
});
```

--------------------------------

### Examples of vis init commands

Source: https://visulima.com/docs/packages/vis/commands/init

Various ways to invoke the initialization command with different flags.

```bash
# Interactive setup wizard
vis init

# Create minimal config without prompts
vis init --no-interactive

# Overwrite existing config
vis init --force

# Also sync to native PM config files
vis init --sync-native

# Print the workspace-relative $schema refs to paste into project.json / vis.config.ts
vis init --schema
```

--------------------------------

### Install @visulima/workflow

Source: https://visulima.com/docs/packages/workflow/installation

Commands to install the package using common JavaScript package managers.

```bash
npm install @visulima/workflow
```

```bash
yarn add @visulima/workflow
```

```bash
pnpm add @visulima/workflow
```

--------------------------------

### Initialize configuration

Source: https://visulima.com/docs/packages/jsdoc-open-api/installation

Initialize the project configuration using the CLI.

```bash
npx jsdoc-open-api init
```

--------------------------------

### Complete email sending workflow

Source: https://visulima.com/docs/packages/email/getting-started/introduction

A full example demonstrating provider setup, default configuration, message construction, and result handling.

```typescript
import { createMail } from "@visulima/email";
import { resendProvider } from "@visulima/email/providers/resend";

// 1. Create a provider
const resend = resendProvider({
    apiKey: process.env.RESEND_API_KEY!,
});

// 2. Create a Mail instance
const mail = createMail(resend);

// Optional: Set default configuration for all emails
mail.setFrom({ email: "noreply@example.com", name: "My App" });

// 3. Build and send a message
import { MailMessage } from "@visulima/email";

const message = new MailMessage()
    .to("user@example.com")
    // .from() is optional if set via mail.setFrom()
    .subject("Welcome!")
    .html("<h1>Welcome to our service!</h1>")
    .text("Welcome to our service!");

const result = await mail.send(message);

// 4. Handle the result
if (result.success) {
    console.log("Email sent successfully:", result.data?.messageId);
} else {
    console.error("Failed to send email:", result.error);
}
```

--------------------------------

### Setup release CI environment

Source: https://visulima.com/docs/packages/vis/commands/release

Displays required secrets, OIDC trust, and permission checklists for the detected provider.

```bash
vis release ci setup
```

```bash
vis release ci setup
```

--------------------------------

### Install @visulima/path

Source: https://visulima.com/docs/packages/path

Install the package via npm.

```bash
npm install @visulima/path
```

--------------------------------

### Install Solid dependencies

Source: https://visulima.com/docs/packages/storage-client/installation

Commands to install the storage client and required Solid Query dependencies.

```bash
npm install @visulima/storage-client @tanstack/solid-query solid-js
```

```bash
yarn add @visulima/storage-client @tanstack/solid-query solid-js
```

```bash
pnpm add @visulima/storage-client @tanstack/solid-query solid-js
```

--------------------------------

### Install @visulima/packem-rollup

Source: https://visulima.com/docs/packages/packem/api/packem-rollup

Install the package via npm.

```bash
npm install @visulima/packem-rollup
```

--------------------------------

### Run Example Commands

Source: https://visulima.com/docs/packages/tui/raw-buffer

Execute provided example scripts using the Oxc node loader.

```bash
node --import @oxc-node/core/register examples-raw/ascii-3d.ts
node --import @oxc-node/core/register examples-raw/conway.ts
node --import @oxc-node/core/register examples-raw/fire.ts
node --import @oxc-node/core/register examples-raw/matrix.ts
node --import @oxc-node/core/register examples-raw/jitter.ts
node --import @oxc-node/core/register examples-raw/scope.ts
node --import @oxc-node/core/register examples-raw/plasma.ts
node --import @oxc-node/core/register examples-raw/inline-picker.ts
```

--------------------------------

### Install @visulima/css-style-inject

Source: https://visulima.com/docs/packages/packem/api/css-style-inject

Install the package via npm.

```bash
npm install @visulima/css-style-inject
```

--------------------------------

### Install @visulima/object

Source: https://visulima.com/docs/packages/object

Install the package via npm.

```bash
npm install @visulima/object
```

--------------------------------

### Install Humanizer

Source: https://visulima.com/docs/packages/humanizer/installation

Install the package using npm.

```bash
npm install @visulima/humanizer
```

--------------------------------

### Vis release pre examples

Source: https://visulima.com/docs/packages/vis/commands/release

Examples for managing prerelease sprint modes, including local triage options.

```bash
vis release pre enter alpha     # snapshot every package's version; future bumps are prerelease
vis release pre status          # check whether pre-mode is on / exit-pending / off
vis release pre exit            # mark for exit; the NEXT `version` consolidates + deletes pre.json

# Local triage without auto-committing the tracked pre.json:
vis release pre enter alpha --no-commit
vis release pre exit --no-push
```

--------------------------------

### Run repository examples

Source: https://visulima.com/docs/packages/tui/getting-started

Commands to execute various TUI example modes using the OXC node loader.

```bash
# React mode
node --import @oxc-node/core/register examples/kitchen-sink.tsx
node --import @oxc-node/core/register examples/counter.tsx

# Raw-buffer mode
node --import @oxc-node/core/register examples-raw/matrix.ts
node --import @oxc-node/core/register examples-raw/conway.ts

# Inline mode (React)
node --import @oxc-node/core/register examples/inline-minimal.tsx
```

--------------------------------

### Install @visulima/bytes

Source: https://visulima.com/docs/packages/bytes

Install the package via npm.

```bash
npm install @visulima/bytes
```

--------------------------------

### Run TUI Examples

Source: https://visulima.com/docs/packages/tui/examples

Commands to execute the provided React or raw-buffer example applications from the repository root.

```bash
node --import @oxc-node/core/register examples/<name>.tsx
node --import @oxc-node/core/register examples-raw/<name>.ts
```

--------------------------------

### Setup Solid QueryClient

Source: https://visulima.com/docs/packages/storage-client/installation

Wrap the application with the QueryClientProvider for Solid.

```typescript
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";

const queryClient = new QueryClient();

function App() {
    return <QueryClientProvider client={queryClient}>{/* Your app */}</QueryClientProvider>;
}
```

--------------------------------

### Install spinner package

Source: https://visulima.com/docs/packages/pail/usage/interactive

Install the required spinner package.

```bash
pnpm add @visulima/spinner
```

--------------------------------

### Install @visulima/packem

Source: https://visulima.com/docs/packages/packem/api/packem

Use npm to install the package as a dependency.

```bash
npm install @visulima/packem
```

--------------------------------

### Install dependencies for authentication and storage

Source: https://visulima.com/docs/packages/storage/authenticated-file-uploads

Install the core packages for Better Auth, Visulima Storage, and your preferred web framework.

```bash
npm install better-auth @visulima/storage express
# or
npm install better-auth @visulima/storage hono
# or
npm install better-auth @visulima/storage fastify
```

--------------------------------

### Install Email Verifier

Source: https://visulima.com/docs/packages/email-verifier/installation

Install the package using npm.

```bash
npm install @visulima/email-verifier
```

--------------------------------

### Install and Create Hook Scripts

Source: https://visulima.com/docs/packages/vis/commands/hook

Initialize the hook directory and create an executable pre-commit script.

```bash
vis hook install

echo '#!/bin/sh
pnpm run lint-staged' > .vis/hooks/pre-commit

chmod +x .vis/hooks/pre-commit
```

--------------------------------

### Install @visulima/content-safety

Source: https://visulima.com/docs/packages/content-safety

Installation commands for various package managers.

```bash
npm install @visulima/content-safety
```

```bash
yarn add @visulima/content-safety
```

```bash
pnpm add @visulima/content-safety
```

--------------------------------

### Install Cerebro

Source: https://visulima.com/docs/packages/cerebro/introduction

Installation commands for various package managers.

```bash
pnpm add @visulima/cerebro
```

```bash
npm install @visulima/cerebro
```

```bash
yarn add @visulima/cerebro
```

--------------------------------

### Usage of vis init

Source: https://visulima.com/docs/packages/vis/commands/init

Basic command syntax for initializing the configuration.

```bash
vis init [options]
```

--------------------------------

### Quick Start with @visulima/package

Source: https://visulima.com/docs/packages/package

Demonstrates basic usage for identifying monorepo roots and parsing package.json files.

```typescript
import { findMonorepoRoot, findPackageJson } from "@visulima/package";

// Find monorepo root
const monorepo = await findMonorepoRoot();
console.log(monorepo.strategy); // "pnpm" | "npm" | "yarn" | "lerna"

// Find and parse package.json
const pkg = await findPackageJson();
console.log(pkg.packageJson.name);
```

--------------------------------

### vis add command examples

Source: https://visulima.com/docs/packages/vis/commands/add

Common usage patterns for adding dependencies, managing workspaces, and configuring security overrides.

```bash
vis add react react-dom                # Add packages (scripts blocked by default)
vis add -D typescript @types/react     # Add as dev dependencies
vis add react --filter app             # Add to specific workspace package
vis add react --to web                 # Add to one package, conform to existing catalogs
vis add react --auto-install-peers     # Recursively install non-optional peer deps
vis add -g typescript                  # Add globally (uses npm)
vis add lodash -w                      # Add to workspace root
vis add esbuild --run-scripts          # Opt out of the universal script block for this run
vis add lodash --no-socket-check       # Skip the supply-chain provider scan (Socket.dev / deps.dev) for this run
vis add lodash --no-typosquat-check    # Skip typosquat name check
vis add lodash --no-marshall-check     # Skip the offline marshall pipeline
```

--------------------------------

### BannedWordsResult Usage Example

Source: https://visulima.com/docs/packages/content-safety/api

Example object structure for a BannedWordsResult.

```typescript
const result: BannedWordsResult = {
    hasBannedWords: true,
    matches: [
        {
            word: "badword",
            startIndex: 0,
            endIndex: 7,
            language: "en",
        },
    ],
};
```

--------------------------------

### Install SolidJS dependencies

Source: https://visulima.com/docs/packages/storage-client/solid

Install the required packages for SolidJS projects.

```bash
npm install @visulima/storage-client @tanstack/solid-query solid-js
```

--------------------------------

### Install task-runner-client

Source: https://visulima.com/docs/packages/task-runner/guides/cooperative-cache-hints

Install the zero-dependency client package to enable cooperative cache hints in your tasks.

```bash
npm install @visulima/task-runner-client
```

--------------------------------

### Verify Pail Installation

Source: https://visulima.com/docs/packages/pail/installation

Test the installation by logging a message to the console.

```typescript
import { pail } from "@visulima/pail";

pail.info("Pail is installed and working!");
```

--------------------------------

### Install PostCSS

Source: https://visulima.com/docs/packages/packem/guide/css

Install PostCSS and the configuration loader as development dependencies.

```bash
npm install --save-dev postcss postcss-load-config
```

--------------------------------

### Vis release stage examples

Source: https://visulima.com/docs/packages/vis/commands/release

Examples for listing, approving, and rejecting npm staged-publish records.

```bash
vis release stage list                          # All staged versions (npm + local registry)
vis release stage list @scope/pkg               # Staged versions for one package
vis release stage list --json                   # Machine-readable
vis release stage approve <stage-id>            # Promote + drain from staged.json, commit + push
vis release stage approve --all                 # Approve every pending stage in staged.json
vis release stage reject <stage-id>             # Permanent — re-stage to retry
vis release stage approve <stage-id> --no-push  # Approve, commit locally, skip the push
vis release stage approve <stage-id> --no-commit # Approve and update registry only
```

--------------------------------

### Install Monorepo Dependencies

Source: https://visulima.com/docs/packages/packem/examples/monorepo

Installs all project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install React dependencies

Source: https://visulima.com/docs/packages/storage-client/installation

Commands to install the storage client and required React Query dependencies.

```bash
npm install @visulima/storage-client @tanstack/react-query react
```

```bash
yarn add @visulima/storage-client @tanstack/react-query react
```

```bash
pnpm add @visulima/storage-client @tanstack/react-query react
```

--------------------------------

### Install Webpack dependency

Source: https://visulima.com/docs/packages/jsdoc-open-api/troubleshooting

Ensure webpack is installed as a dependency for the plugin.

```bash
npm install webpack
```

--------------------------------

### Install and use color support

Source: https://visulima.com/docs/packages/boxen/installation

Install @visulima/colorize to add colors to your box borders and content.

```bash
npm install @visulima/colorize
```

```javascript
import { boxen } from "@visulima/boxen";
import { green, blue } from "@visulima/colorize";

console.log(
    boxen(green("Success!"), {
        borderColor: () => green("─"),
    }),
);
```

--------------------------------

### Verify dependency installation

Source: https://visulima.com/docs/packages/jsdoc-open-api/troubleshooting

Check if optional dependencies are correctly installed.

```bash
npm list commander cli-progress
```

--------------------------------

### CLI usage examples for environment variables and options

Source: https://visulima.com/docs/packages/cerebro/guides/options

Demonstrates how to invoke commands using default values, environment variable overrides, and command-line options.

```bash
# Using defaults
cli build

# Override with environment variables
NODE_ENV=production BUILD_TIMEOUT=60000 cli build

# Combine with options
ENABLE_SOURCEMAPS=false cli build --output build

# Boolean values
ENABLE_SOURCEMAPS=1 cli build  # true
ENABLE_SOURCEMAPS=0 cli build  # false
```

--------------------------------

### Install jsdoc-open-api package

Source: https://visulima.com/docs/packages/jsdoc-open-api/installation

Install the core package using npm.

```bash
npm install @visulima/jsdoc-open-api
```

--------------------------------

### Install @visulima/inspector

Source: https://visulima.com/docs/packages/inspector/installation

Use this command to install the package via npm.

```bash
npm install @visulima/inspector
```

--------------------------------

### Configure multi-file documentation output

Source: https://visulima.com/docs/packages/cerebro/guides/advanced

Example command for generating organized multi-file documentation in a specific directory.

```bash
cli readme --multi --output-dir=docs
```

--------------------------------

### Verify installation

Source: https://visulima.com/docs/packages/html/installation

Test the installation by running escaping and sanitization functions.

```typescript
import { escapeHtml, sanitizeHtml } from "@visulima/html";

// Test escaping
console.log(escapeHtml("<script>test</script>"));
// => '&lt;script>test&lt;/script>'

// Test sanitization
console.log(sanitizeHtml("<p>Hello <script>bad</script>World</p>"));
// => '<p>Hello World</p>'
```

--------------------------------

### Install @visulima/fs

Source: https://visulima.com/docs/packages/fs/installation

Install the package using the npm package manager.

```bash
npm install @visulima/fs
```

--------------------------------

### formatBytes usage examples

Source: https://visulima.com/docs/packages/humanizer/api/bytes

Various examples demonstrating how to use formatBytes with different configuration options.

```javascript
formatBytes(1234567, { decimals: 2 });
// => "1.18 MB"
```

```javascript
formatBytes(1234567, { decimals: 2, locale: "de-DE" });
// => "1,18 MB"
```

```javascript
formatBytes(1024, { long: true });
// => "1 Kilobytes"
```

```javascript
formatBytes(1024, { units: "iec" });
// => "1 KiB"
```

```javascript
formatBytes(1000, { base: 10 });
// => "1 KB"
```

```javascript
formatBytes(1234567, { unit: "KB", decimals: 2 });
// => "1,205.63 KB"
```

```javascript
formatBytes(1024, { space: false });
// => "1KB"
```

```javascript
formatBytes(1234567890, {
    unit: "KB",
    notation: "scientific",
});
// => "1.234567890E6 KB"
```

```javascript
import { formatBytes } from "@visulima/humanizer";

// Basic usage
formatBytes(1024);
// => "1 KB"

// With decimals
formatBytes(1234567, { decimals: 2 });
// => "1.18 MB"

// German locale
formatBytes(1234567, { decimals: 2, locale: "de-DE" });
// => "1,18 MB"

// Long format
formatBytes(1024, { long: true });
// => "1 Kilobytes"

// IEC units
formatBytes(1024, { units: "iec" });
// => "1 KiB"

// Force specific unit
formatBytes(1234567, { unit: "KB", decimals: 2 });
// => "1,205.63 KB"

// Base 10
formatBytes(1000, { base: 10 });
// => "1 KB"
```

--------------------------------

### Install Cerebro

Source: https://visulima.com/docs/packages/cerebro/installation

Install the core Cerebro package using npm.

```bash
npm install @visulima/cerebro
```

--------------------------------

### Project File Structure

Source: https://visulima.com/docs/packages/packem/api/native-modules-plugin

Example directory layout for a project using native modules.

```text
project/
├── src/
│   ├── index.ts
│   └── my-addon.node
├── dist/
│   ├── index.js
│   └── natives/
│       └── my-addon.node  # Copied here
└── package.json
```

--------------------------------

### Common vis update examples

Source: https://visulima.com/docs/packages/vis/commands/update

Various command-line examples demonstrating package updates, filtering, and catalog management.

```bash
vis update react                    # Update react within semver range
vis up react -L                     # Update react to latest
vis update -i                       # Interactive mode
vis update --filter app             # Update in specific workspace
vis update -r                       # Update in all workspaces
vis update --target minor           # Only apply minor/patch updates (catalog)
vis update --dry-run                # Preview changes without applying
vis update --exclude '@types/*'     # Exclude packages by pattern
vis update --changelog              # Show changelog links after updating
vis update --rollback               # Restore catalog from last backup
```

--------------------------------

### Examples of vis task-why

Source: https://visulima.com/docs/packages/vis/commands/task-why

Common examples of tracing task dependencies.

```bash
vis task-why @myorg/app:build
vis task-why lib-a:test
```

--------------------------------

### kebabCase usage examples

Source: https://visulima.com/docs/packages/string/api/case

Examples demonstrating string conversion to kebab-case.

```typescript
kebabCase("fooBar"); // 'foo-bar'
kebabCase("foo bar"); // 'foo-bar'
kebabCase("foo_bar"); // 'foo-bar'
kebabCase("XMLHttpRequest"); // 'xml-http-request'
```

--------------------------------

### Build command examples

Source: https://visulima.com/docs/packages/packem/guide/cli

Common usage scenarios for the build command including production builds, watch mode, environment variables, and bundler selection.

```bash
# Build for production (minifies automatically)
packem build --production

# Watch with development environment
packem build --watch --development

# Inject a compile-time variable
packem build --env.API_URL=https://api.example.com

# Use the experimental rolldown bundler
packem build --bundler rolldown
```

--------------------------------

### snakeCase usage examples

Source: https://visulima.com/docs/packages/string/api/case

Examples demonstrating string conversion to snake_case.

```typescript
snakeCase("fooBar"); // 'foo_bar'
snakeCase("foo bar"); // 'foo_bar'
snakeCase("foo-bar"); // 'foo_bar'
snakeCase("XMLHttpRequest"); // 'xml_http_request'
```

--------------------------------

### Configure via environment variables

Source: https://visulima.com/docs/packages/storage/services/tencent-cos

Use environment variables to initialize the client configuration automatically.

```javascript
process.env.TENCENT_SECRET_ID = "your-secret-id";
process.env.TENCENT_SECRET_KEY = "your-secret-key";
process.env.TENCENT_REGION = "ap-guangzhou";

const clientConfig = tencent(); // Uses environment variables
const storage = new S3Storage({
    bucket: "uploads-1250000000",
    ...clientConfig,
});
```

--------------------------------

### Implement Complete Boxen Example

Source: https://visulima.com/docs/packages/boxen/api

A full example demonstrating how to apply various options, including custom border coloring and header/footer configuration.

```typescript
import { boxen } from "@visulima/boxen";
import type { Options } from "@visulima/boxen";
import { green, blue } from "@visulima/colorize";

const options: Options = {
    // Border
    borderStyle: "double",
    borderColor: (border, position) => {
        if (position.includes("top")) {
            return blue(border);
        }
        return green(border);
    },

    // Layout
    padding: 1,
    margin: { top: 1, bottom: 1 },
    width: 40,

    // Text
    textAlignment: "center",

    // Header/Footer
    headerText: "Status",
    headerAlignment: "center",
    footerText: "v1.0.0",
    footerAlignment: "right",
};

console.log(boxen("All options used!", options));
```

--------------------------------

### Install a snapshot release

Source: https://visulima.com/docs/packages/vis/guides/release

Command to install a snapshot version generated by a PR.

```bash
pnpm add @scope/cerebro@pr-1234
```

--------------------------------

### Install MCP dependencies

Source: https://visulima.com/docs/packages/vis/guides/ai-integration

Install the required peer dependencies for the MCP server.

```bash
pnpm add @modelcontextprotocol/sdk zod
# or
npm install @modelcontextprotocol/sdk zod
```

--------------------------------

### Define Project Structure

Source: https://visulima.com/docs/packages/packem/examples/advanced/multi-runtime

Example directory layout showing runtime-specific source files.

```text
multi-runtime-example/
├── src/
│   ├── index.ts                 # default / import condition
│   ├── index.react-server.ts    # react-server condition
│   └── index.edge-light.ts      # edge-light condition
├── package.json
├── packem.config.ts
└── tsconfig.json
```

--------------------------------

### Vis Install Command Alias

Source: https://visulima.com/docs/packages/vis/commands/install

Shortened command alias for the install operation.

```bash
vis i          # Short for vis install
```

--------------------------------

### Install @visulima/tui dependencies

Source: https://visulima.com/docs/packages/tui/getting-started

Installation commands for React-based and raw-buffer TUI applications.

```bash
npm install @visulima/tui react react-reconciler
```

```bash
npm install @visulima/tui
```
Tokens:
Raw