CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-faker-js--faker

Generate massive amounts of fake contextual data for testing and development purposes

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

visual.mddocs/

Visual & Media

Generate visual and media-related data including colors in various formats and image URLs from different services. These modules provide essential capabilities for UI/UX development, design testing, and visual content creation.

Capabilities

Color Generation

Generate colors in multiple formats and color spaces with extensive customization options.

/**
 * Generate RGB color
 * @param options - RGB color options
 * @returns RGB color in specified format
 */
rgb(options?: {
  /** Output format */
  format?: 'css' | 'binary' | 'decimal';
  /** Character casing for hex values */
  casing?: 'lower' | 'upper' | 'mixed';
  /** Prefix for the color value */
  prefix?: string;
  /** Include alpha channel */
  includeAlpha?: boolean;
}): string;

/**
 * Generate CMYK color
 * @param options - CMYK color options
 * @returns CMYK color in specified format
 */
cmyk(options?: {
  /** Output format */
  format?: 'css' | 'binary';
}): string;

/**
 * Generate HSL color
 * @param options - HSL color options
 * @returns HSL color in specified format
 */
hsl(options?: {
  /** Output format */
  format?: 'css' | 'binary';
  /** Include alpha channel */
  includeAlpha?: boolean;
}): string;

/**
 * Generate HWB color
 * @param options - HWB color options
 * @returns HWB color in specified format
 */
hwb(options?: {
  /** Output format */
  format?: 'css' | 'binary';
}): string;

/**
 * Generate LAB color
 * @param options - LAB color options
 * @returns LAB color in specified format
 */
lab(options?: {
  /** Output format */
  format?: 'css' | 'binary';
}): string;

/**
 * Generate LCH color
 * @param options - LCH color options
 * @returns LCH color in specified format
 */
lch(options?: {
  /** Output format */
  format?: 'css' | 'binary';
}): string;

/**
 * Generate color in specific CSS color space
 * @param space - CSS color space name
 * @param format - Output format
 * @returns Color in specified color space
 */
colorByCSSColorSpace(space?: CssSpaceType, format?: ColorFormat): string;

/**
 * Generate random CSS color function name
 * @returns CSS color function (rgb, hsl, etc.)
 */
cssSupportedFunction(): CssFunctionType;

/**
 * Generate random CSS color space name
 * @returns CSS color space (sRGB, display-p3, etc.)
 */
cssSupportedSpace(): CssSpaceType;

/**
 * Generate human-readable color name
 * @returns Human-friendly color name
 */
human(): string;

Usage Examples:

import { faker } from "@faker-js/faker";

// Generate RGB colors
const rgbColor = faker.color.rgb();
// Example: 'rgb(255, 128, 0)'

const rgbHex = faker.color.rgb({ format: 'hex' });
// Example: '#FF8000'

const rgbBinary = faker.color.rgb({ format: 'binary' });
// Example: [255, 128, 0]

const rgbWithAlpha = faker.color.rgb({ includeAlpha: true });
// Example: 'rgba(255, 128, 0, 0.75)'

// Generate HSL colors
const hslColor = faker.color.hsl();
// Example: 'hsl(30, 100%, 50%)'

const hslWithAlpha = faker.color.hsl({ includeAlpha: true });
// Example: 'hsla(30, 100%, 50%, 0.8)'

// Generate other color formats
const cmykColor = faker.color.cmyk();
// Example: 'cmyk(0%, 50%, 100%, 0%)'

const hwbColor = faker.color.hwb();
// Example: 'hwb(30 0% 0%)'

const labColor = faker.color.lab();
// Example: 'lab(62.253% 23.950 78.271)'

const lchColor = faker.color.lch();
// Example: 'lch(62.253% 82.192 73.158)'

// Generate modern CSS colors  
const p3Color = faker.color.colorByCSSColorSpace('display-p3');
// Example: 'color(display-p3 1 0.5 0)'

// Generate color function and space names
const colorFunction = faker.color.cssSupportedFunction();
// Example: 'hsl'

const colorSpace = faker.color.cssSupportedSpace();
// Example: 'display-p3'

// Generate human-readable colors
const humanColor = faker.color.human();
// Example: 'red', 'blue', 'forest green'

// Create color palettes
const colorPalette = {
  primary: faker.color.rgb({ format: 'hex' }),
  secondary: faker.color.hsl(),
  accent: faker.color.hwb(),
  neutral: faker.color.human()
};

Image Generation

Generate image URLs from various placeholder services and create data URIs for development and testing.

/**
 * Generate a random avatar URL
 * @returns Avatar image URL
 */
avatar(): string;

/**
 * Generate a GitHub-style avatar URL
 * @returns GitHub avatar URL
 */
avatarGitHub(): string;

/**
 * Generate a legacy avatar URL
 * @returns Legacy format avatar URL
 */
avatarLegacy(): string;

/**
 * Generate a data URI for an image
 * @param options - Data URI options
 * @returns Base64 encoded data URI
 */
dataUri(options?: {
  /** Image width in pixels */
  width?: number;
  /** Image height in pixels */
  height?: number;
  /** Background color */
  color?: string;
}): string;

/**
 * Generate a generic image URL
 * @param options - Image URL options
 * @returns Generic image service URL
 */
url(options?: {
  /** Image width in pixels */
  width?: number;
  /** Image height in pixels */
  height?: number;
}): string;

/**
 * Generate a Lorem Flickr image URL
 * @param options - Lorem Flickr options
 * @returns Lorem Flickr image URL
 */
urlLoremFlickr(options?: {
  /** Image width in pixels */
  width?: number;
  /** Image height in pixels */
  height?: number;
  /** Image category/theme */
  category?: string;
}): string;

/**
 * Generate a Picsum Photos image URL
 * @param options - Picsum Photos options
 * @returns Picsum Photos image URL
 */
urlPicsumPhotos(options?: {
  /** Image width in pixels */
  width?: number;
  /** Image height in pixels */
  height?: number;
  /** Apply grayscale filter */
  grayscale?: boolean;
  /** Apply blur filter (1-10) */
  blur?: number;
}): string;

/**
 * Generate a placeholder image URL
 * @param options - Placeholder options
 * @returns Placeholder service image URL
 */
urlPlaceholder(options?: {
  /** Image width in pixels */
  width?: number;
  /** Image height in pixels */
  height?: number;
  /** Background color */
  backgroundColor?: string;
  /** Text color */
  textColor?: string;
  /** Image format */
  format?: 'png' | 'jpg' | 'gif';
  /** Custom text overlay */
  text?: string;
}): string;

Usage Examples:

import { faker } from "@faker-js/faker";

// Generate avatar URLs
const avatar = faker.image.avatar();
// Example: 'https://avatars.githubusercontent.com/u/12345'

const githubAvatar = faker.image.avatarGitHub();
// Example: 'https://avatars.githubusercontent.com/u/67890'

const legacyAvatar = faker.image.avatarLegacy();
// Example: 'https://www.gravatar.com/avatar/abcdef123456'

// Generate data URIs
const dataUri = faker.image.dataUri();
// Example: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz...'

const customDataUri = faker.image.dataUri({
  width: 200,
  height: 150,
  color: 'blue'
});
// Example: Custom sized data URI with blue background

// Generate generic image URLs
const genericImage = faker.image.url();
// Example: 'https://loremflickr.com/640/480'

const customSizeImage = faker.image.url({
  width: 800,
  height: 600
});
// Example: 'https://loremflickr.com/800/600'

// Generate Lorem Flickr images
const flickrImage = faker.image.urlLoremFlickr();
// Example: 'https://loremflickr.com/640/480'

const categoryImage = faker.image.urlLoremFlickr({
  width: 300,
  height: 200,
  category: 'nature'
});
// Example: 'https://loremflickr.com/300/200/nature'

// Generate Picsum Photos images
const picsumImage = faker.image.urlPicsumPhotos();
// Example: 'https://picsum.photos/640/480'

const styledPicsumImage = faker.image.urlPicsumPhotos({
  width: 400,
  height: 300,
  grayscale: true,
  blur: 2
});
// Example: 'https://picsum.photos/400/300?grayscale&blur=2'

// Generate placeholder images
const placeholder = faker.image.urlPlaceholder();
// Example: 'https://via.placeholder.com/640x480'

const customPlaceholder = faker.image.urlPlaceholder({
  width: 500,
  height: 300,
  backgroundColor: 'ff0000',
  textColor: 'ffffff',
  format: 'png',
  text: 'Custom Text'
});
// Example: 'https://via.placeholder.com/500x300/ff0000/ffffff.png?text=Custom+Text'

// Create image gallery mock data
const imageGallery = Array.from({ length: 12 }, () => ({
  id: faker.string.uuid(),
  url: faker.image.urlPicsumPhotos({ 
    width: 300, 
    height: 200 
  }),
  thumbnail: faker.image.urlPicsumPhotos({ 
    width: 150, 
    height: 100 
  }),
  alt: faker.lorem.words({ min: 2, max: 5 }),
  category: faker.lorem.word()
}));

Type Definitions

enum CssSpace {
  SRGB = 'sRGB',
  DisplayP3 = 'display-p3',
  REC2020 = 'rec2020',
  A98RGB = 'a98-rgb',
  ProphotoRGB = 'prophoto-rgb'
}

enum CssFunction {
  RGB = 'rgb',
  RGBA = 'rgba',
  HSL = 'hsl',
  HSLA = 'hsla',
  HWB = 'hwb',
  CMYK = 'cmyk',
  LAB = 'lab',
  LCH = 'lch',
  COLOR = 'color'
}

type CssSpaceType = keyof typeof CssSpace;
type CssFunctionType = keyof typeof CssFunction;
type ColorFormat = 'css' | 'binary' | 'decimal';
type Casing = 'lower' | 'upper' | 'mixed';

Visual Design Patterns

Design System Colors

import { faker } from "@faker-js/faker";

// Generate design system color palette
const designSystem = {
  primary: {
    50: faker.color.hsl({ format: 'css' }),
    100: faker.color.hsl({ format: 'css' }),
    200: faker.color.hsl({ format: 'css' }),
    300: faker.color.hsl({ format: 'css' }),
    400: faker.color.hsl({ format: 'css' }),
    500: faker.color.hsl({ format: 'css' }), // Base color
    600: faker.color.hsl({ format: 'css' }),
    700: faker.color.hsl({ format: 'css' }),
    800: faker.color.hsl({ format: 'css' }),
    900: faker.color.hsl({ format: 'css' })
  },
  semantic: {
    success: faker.color.rgb({ format: 'hex' }),
    warning: faker.color.rgb({ format: 'hex' }),
    error: faker.color.rgb({ format: 'hex' }),
    info: faker.color.rgb({ format: 'hex' })
  }
};

UI Component Mockups

import { faker } from "@faker-js/faker";

// Generate UI component data
const componentMockup = {
  avatar: faker.image.avatar(),
  backgroundImage: faker.image.urlPicsumPhotos({ 
    width: 1200, 
    height: 600 
  }),
  iconColor: faker.color.rgb({ format: 'hex' }),
  accentColor: faker.color.hsl(),
  brandColor: faker.color.human(),
  placeholder: faker.image.urlPlaceholder({
    width: 400,
    height: 300,
    text: 'Loading...'
  })
};

Photo Gallery Simulation

import { faker } from "@faker-js/faker";

const photoGallery = Array.from({ length: 20 }, () => ({
  id: faker.string.uuid(),
  title: faker.lorem.words({ min: 1, max: 3 }),
  photographer: faker.person.fullName(),
  image: {
    full: faker.image.urlLoremFlickr({ 
      width: 1920, 
      height: 1080,
      category: faker.helpers.arrayElement(['nature', 'city', 'people', 'abstract'])
    }),
    medium: faker.image.urlPicsumPhotos({ 
      width: 800, 
      height: 600 
    }),
    thumbnail: faker.image.urlPicsumPhotos({ 
      width: 200, 
      height: 150 
    })
  },
  dominantColor: faker.color.rgb({ format: 'hex' }),
  tags: Array.from({ length: faker.number.int({ min: 2, max: 6 }) }, () => 
    faker.lorem.word()
  )
}));

Service-Specific Features

Lorem Flickr

  • Supports category-based images (nature, city, people, etc.)
  • Real photos from Flickr
  • Consistent quality across different sizes

Picsum Photos

  • High-quality curated photographs
  • Built-in filters (grayscale, blur)
  • Consistent image IDs for caching

Placeholder Services

  • Customizable background and text colors
  • Multiple format support (PNG, JPG, GIF)
  • Custom text overlays
  • Perfect for wireframes and prototypes

Data URIs

  • Embedded SVG generation
  • No external dependencies
  • Instant loading
  • Customizable colors and sizes

Color Space Support

Modern CSS color spaces supported:

  • sRGB: Standard RGB color space
  • display-p3: Wide gamut display color space
  • rec2020: Ultra-wide gamut color space
  • a98-rgb: Adobe RGB color space
  • prophoto-rgb: ProPhoto RGB color space

Performance Considerations

  • Image URLs are lightweight and load quickly
  • Data URIs are self-contained but larger in size
  • Color generation is computationally efficient
  • Consider caching for repeated image URL usage
  • Placeholder services may have rate limits

docs

commerce.md

datatypes.md

date.md

domains.md

finance.md

index.md

internet.md

location.md

person.md

system.md

text.md

visual.md

tile.json