or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcapture-methods.mdconfiguration.mddevice-emulation.mdindex.md
tile.json

configuration.mddocs/

Configuration Options

Comprehensive configuration system for controlling screenshot behavior, appearance, and timing.

Capabilities

Input and Output Control

Configure how input is processed and output is generated.

interface InputOutputOptions {
  /** Input type - 'url' for URLs/files, 'html' for HTML content */
  inputType?: 'url' | 'html';
  
  /** Image format for output */
  type?: 'png' | 'jpeg' | 'webp';
  
  /** Image quality (0-1) for JPEG and WebP formats only */
  quality?: number;
}

Usage Examples:

// HTML content input
await captureWebsite.file('<h1>Hello</h1>', 'output.png', {
  inputType: 'html'
});

// JPEG output with quality control
await captureWebsite.file('https://example.com', 'output.jpg', {
  type: 'jpeg',
  quality: 0.8
});

// WebP output with high compression
await captureWebsite.file('https://example.com', 'output.webp', {
  type: 'webp',
  quality: 0.6
});

Viewport and Display Control

Control the browser viewport size, scaling, and page rendering.

interface ViewportOptions {
  /** Page width in pixels */
  width?: number;
  
  /** Page height in pixels */
  height?: number;
  
  /** Device scale factor (like retina displays) */
  scaleFactor?: number;
  
  /** Capture entire scrollable page instead of just viewport */
  fullPage?: boolean;
  
  /** Include default white background (disable for transparency) */
  defaultBackground?: boolean;
}

Usage Examples:

// Custom viewport size
await captureWebsite.file('https://example.com', 'desktop.png', {
  width: 1920,
  height: 1080
});

// High DPI (retina) screenshot
await captureWebsite.file('https://example.com', 'retina.png', {
  width: 1280,
  height: 800,
  scaleFactor: 3
});

// Full page capture
await captureWebsite.file('https://example.com', 'fullpage.png', {
  fullPage: true
});

// Transparent background
await captureWebsite.file('https://example.com', 'transparent.png', {
  defaultBackground: false
});

Timing and Waiting Control

Configure timeouts and delays for proper page loading and rendering.

interface TimingOptions {
  /** Timeout in seconds for page loading (0 to disable) */
  timeout?: number;
  
  /** Delay in seconds after page load before screenshot */
  delay?: number;
  
  /** Wait for specific DOM element to be visible before capture */
  waitForElement?: string;
}

Usage Examples:

// Extended timeout for slow pages
await captureWebsite.file('https://slow-site.com', 'slow.png', {
  timeout: 120 // 2 minutes
});

// Wait for animations to complete
await captureWebsite.file('https://animated-site.com', 'settled.png', {
  delay: 3 // 3 seconds
});

// Wait for specific content to load
await captureWebsite.file('https://dynamic-site.com', 'loaded.png', {
  waitForElement: '#main-content'
});

// Combine timing options
await captureWebsite.file('https://complex-site.com', 'ready.png', {
  timeout: 60,
  delay: 2,
  waitForElement: '.data-loaded'
});

Element Targeting and Positioning

Control which parts of the page to capture and how to position the screenshot.

interface ElementTargetingOptions {
  /** Capture only the specified DOM element */
  element?: string;
  
  /** Define custom clipping rectangle */
  clip?: BoundingBox;
  
  /** Hide elements matching CSS selectors (visibility: hidden) */
  hideElements?: string[];
  
  /** Remove elements matching CSS selectors (display: none) */
  removeElements?: string[];
  
  /** Click element before capturing */
  clickElement?: string;
  
  /** Scroll to element before capturing */
  scrollToElement?: string | ScrollToElementOptions;
  
  /** Inset/expand the screenshot bounds */
  inset?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
}

interface BoundingBox {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface ScrollToElementOptions {
  element: string;
  offsetFrom: 'top' | 'right' | 'bottom' | 'left';
  offset: number;
}

Usage Examples:

// Capture specific element
await captureWebsite.file('https://example.com', 'header.png', {
  element: 'header.main-nav'
});

// Custom clipping rectangle
await captureWebsite.file('https://example.com', 'clipped.png', {
  clip: {
    x: 0,
    y: 100,
    width: 800,
    height: 600
  }
});

// Hide unwanted elements
await captureWebsite.file('https://example.com', 'clean.png', {
  hideElements: ['.sidebar', '.ads', '#popup']
});

// Remove elements that break layout
await captureWebsite.file('https://example.com', 'no-ads.png', {
  removeElements: ['.advertisement', '.popup-overlay']
});

// Click element to reveal content
await captureWebsite.file('https://example.com', 'expanded.png', {
  clickElement: '.expand-button'
});

// Scroll to specific content
await captureWebsite.file('https://long-page.com', 'footer.png', {
  scrollToElement: 'footer'
});

// Advanced scrolling with offset
await captureWebsite.file('https://example.com', 'offset.png', {
  scrollToElement: {
    element: '#target',
    offsetFrom: 'top',
    offset: 100
  }
});

// Add padding around element
await captureWebsite.file('https://example.com', 'padded.png', {
  element: '.main-content',
  inset: -20 // 20px padding on all sides
});

// Custom inset per side
await captureWebsite.file('https://example.com', 'custom-inset.png', {
  inset: {
    top: 10,
    right: 20,
    bottom: 10,
    left: 20
  }
});

Behavioral Control

Control page behavior and interactions during capture.

interface BehaviorOptions {
  /** Disable CSS animations and transitions */
  disableAnimations?: boolean;
  
  /** Enable ad blocking */
  blockAds?: boolean;
  
  /** Enable JavaScript execution on the page */
  isJavaScriptEnabled?: boolean;
}

Usage Examples:

// Disable animations for stable screenshots
await captureWebsite.file('https://animated-site.com', 'static.png', {
  disableAnimations: true
});

// Disable ad blocking for testing ads
await captureWebsite.file('https://site-with-ads.com', 'with-ads.png', {
  blockAds: false
});

// Disable JavaScript
await captureWebsite.file('https://js-heavy-site.com', 'no-js.png', {
  isJavaScriptEnabled: false
});

Configuration Patterns

Mobile-First Screenshots

// Mobile viewport
await captureWebsite.file('https://responsive-site.com', 'mobile.png', {
  width: 375,
  height: 667,
  scaleFactor: 2,
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'
});

High-Quality Print Screenshots

// High resolution for print
await captureWebsite.file('https://example.com', 'print.png', {
  width: 2480,
  height: 3508, // A4 at 300 DPI
  scaleFactor: 1,
  type: 'png',
  fullPage: true
});

Fast Capture for Testing

// Quick capture with minimal quality
await captureWebsite.file('https://example.com', 'test.jpg', {
  width: 800,
  height: 600,
  type: 'jpeg',
  quality: 0.5,
  timeout: 10,
  delay: 0
});