Live Preview Components

Ghostty Config includes live preview components that update in real-time as you change settings, giving you instant feedback on how your configuration will look.

Preview Components

The application includes several specialized preview components:

Cursor Preview

Shows cursor style, color, opacity, and blink animation

Font Preview

Displays terminal text with current font settings

Color Preview

Terminal output showing color scheme and selection

Palette Preview

Grid of all 256 palette colors

Icon Preview

macOS app icon with custom styles (macOS only)

Cursor Preview

The cursor preview (views/CursorPreview.svelte:1) demonstrates cursor appearance in a mini terminal:

Features

Live cursor animation - Blinks at 1-second intervals
Style variants - Block, bar, underline, hollow block
Color customization - Cursor color and text-under-cursor color
Opacity control - Transparent cursor support

Implementation

let isCursorVisible = $state(true);

onMount(() => {
  const interval = setInterval(() => {
    if (config.cursorStyleBlink !== "false") {
      isCursorVisible = !isCursorVisible;
    } else {
      isCursorVisible = true;
    }
  }, 1000);
  return () => clearInterval(interval);
});

const cursorColor = $derived(config.cursorColor || config.foreground);
const cursorText = $derived(
  isCursorVisible 
    ? config.cursorText || config.background 
    : config.foreground
);
const cursorOpacity = $derived(
  isCursorVisible 
    ? Math.round(config.cursorOpacity * 255).toString(16) 
    : "00"
);

Display

The preview shows a git command:

john@doe-pc$ git commit -m "█"

With the cursor positioned on the closing quote.

Cursor Styles

CSS handles different cursor styles:

/* Block cursor (default) */
.cursor.block {
  background-color: var(--cursor-color);
  color: var(--cursor-text);
}

/* Bar cursor (vertical line) */
.cursor.bar {
  background-color: transparent;
  border-left: 1px solid var(--cursor-color);
  margin-left: 0;
}

/* Underline cursor */
.cursor.underline {
  background-color: transparent;
  border-bottom: 1px solid var(--cursor-color);
}

/* Hollow block cursor */
.cursor.block_hollow {
  background-color: transparent;
  border: 1px solid var(--cursor-color);
}

Font Preview

The font preview (views/FontPreview.svelte:1) shows how terminal text renders with current font settings:

Sample Output

john@doe-pc$ ls
-rwxr-xr-x 1 root Documents
-rwxr-xr-x 1 root Downloads
-rwxr-xr-x 1 root Pictures
-rwxr-xr-x 1 root Music
-rwxr-xr-x 1 root 実行可能ファイル
-rwxr-xr-x 1 root sym -> link
Icons:     Powerline

What It Tests

Font family - The actual font face
Font size - Size in pixels
Bold/italic - Style rendering
Unicode - Japanese characters (実行可能ファイル)
Colored text - Using palette colors
Icons - Powerline glyphs
Line spacing - Vertical rhythm

CSS Variables

The preview uses CSS custom properties that update reactively:

.preview {
  background: var(--config-bg);
  font-family: var(--config-font-family);
  font-size: var(--config-font-size);
  color: var(--config-fg);
}

These variables are bound to the config store:

// In the global CSS
:root {
  --config-bg: #282c34;
  --config-fg: #ffffff;
  --config-font-family: monospace;
  --config-font-size: 13px;
  --config-palette-0: #1d1f21;
  --config-palette-1: #cc6666;
  /* ... 14 more palette colors */
}

Base Color Preview

Shows background, foreground, selection colors:

john@doe-pc$ echo "hello world"
hello world
     ^^^^^
  (selected text)

The preview demonstrates:

Terminal background color
Default text (foreground) color
Selected text appearance
Selection background/foreground colors

Palette Preview

The palette preview (views/PalettePreview.svelte:1) displays all 256 terminal colors as a grid:

Structure

First 16 colors - Standard ANSI palette (displayed prominently)
Colors 16-231 - 216-color cube (6×6×6)
Colors 232-255 - 24-step grayscale

Implementation

<div class="color-grid">
  {#each value as _, i (i)}
    <Color 
      defaultValue={defaultValue[i]} 
      bind:value={value[i]} 
      size={40} 
      label={(i + 1).toString()} 
    />
  {/each}
</div>

.color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(32, 1fr);
  grid-row-gap: 14px;
}

Each color is clickable to open a color picker.

App Icon Preview

The icon preview (views/AppIconPreview.svelte:1) shows the macOS app icon with custom styling:

Icon Variants

The preview fetches icons from the Ghostty GitHub repository:

const cdnBase = "https://cdn.jsdelivr.net/gh/ghostty-org/ghostty@main/macos/Assets.xcassets";

const iconUrls: Record<string, string> = {
  official: `${cdnBase}/AppIconImage.imageset/macOS-AppIcon-1024px.png`,
  blueprint: `${cdnBase}/Alternate%20Icons/BlueprintImage.imageset/macOS-AppIcon-1024px.png`,
  chalkboard: `${cdnBase}/Alternate%20Icons/ChalkboardImage.imageset/macOS-AppIcon-1024px.png`,
  microchip: `${cdnBase}/Alternate%20Icons/MicrochipImage.imageset/macOS-AppIcon-1024px.png`,
  glass: `${cdnBase}/Alternate%20Icons/GlassImage.imageset/macOS-AppIcon-1024px.png`,
  holographic: `${cdnBase}/Alternate%20Icons/HolographicImage.imageset/macOS-AppIcon-1024px.png`,
  paper: `${cdnBase}/Alternate%20Icons/PaperImage.imageset/macOS-AppIcon-1024px.png`,
  retro: `${cdnBase}/Alternate%20Icons/RetroImage.imageset/macOS-AppIcon-1024px.png`,
  xray: `${cdnBase}/Alternate%20Icons/XrayImage.imageset/macOS-AppIcon-1024px.png`,
};

Custom Style Icons

For custom-style mode, the preview composites multiple layers:

<img class="layer frame" src={frameUrl} alt="" />
<div class="layer tint screen-mask" style:background-color={screenColor}></div>
<div class="layer tint ghost-mask" style:background-color={ghostColor}></div>
<img class="layer crt" src={customLayerUrls.crt} alt="" />
<img class="layer gloss" src={customLayerUrls.gloss} alt="" />

This allows real-time preview of custom ghost and screen colors.

Frame Options

Aluminum - Brushed metal look
Beige - Vintage computer aesthetic
Plastic - Glossy plastic finish
Chrome - Shiny metallic

Color Masks

CSS masks are used to colorize specific parts:

.screen-mask {
  mask-image: url(".../CustomIconScreenMask.imageset/screen-mask.png");
  -webkit-mask-image: url(".../CustomIconScreenMask.imageset/screen-mask.png");
}

.ghost-mask {
  mask-image: url(".../CustomIconGhost.imageset/ghosty.png");
  -webkit-mask-image: url(".../CustomIconGhost.imageset/ghosty.png");
}

Reactive Updates

All previews use Svelte’s reactive system to update instantly:

// Config store (simplified)
class ConfigStore {
  background = $state("#282c34");
  foreground = $state("#ffffff");
  fontSize = $state(13);
  fontFamily = $state("monospace");
  // ... more settings
}

const config = new ConfigStore();
export default config;

When any setting changes, all dependent previews re-render:

<script>
import config from "$lib/stores/config.svelte";

// This automatically re-runs when config.background changes
const bgColor = $derived(config.background);
</script>

<div style:background-color={bgColor}>
  Preview content
</div>

Preview Styling

All previews share common styling:

.preview {
  background: var(--config-bg);
  font-family: var(--config-font-family);
  font-size: var(--config-font-size);
  color: var(--config-fg);
  padding: 8px;
  border-radius: var(--radius-level-3);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

This creates a consistent “mini terminal” appearance across all previews.

Performance Considerations

Previews are optimized for performance:

CSS variables - Settings are exposed as CSS custom properties, avoiding re-renders
Derived state - Svelte’s $derived only recomputes when dependencies change
Debouncing - Color picker changes are debounced (not shown in excerpts)
Lazy loading - Icon images load on-demand

Integration with Settings

Previews are embedded directly in setting panels:

<Group title="Cursor" note="The cursor in this preview blinks...">
  <CursorPreview />
  <Separator />
  <Item name="Cursor color">
    <Color bind:value={config.cursorColor} />
  </Item>
  <Item name="Cursor style">
    <Dropdown bind:value={config.cursorStyle} options={[...]} />
  </Item>
</Group>

This provides immediate visual feedback as users adjust settings.

Browser Compatibility

Previews require a modern browser with support for:

CSS custom properties (variables)
CSS masks (for icon preview)
color-mix() function (optional, for some effects)

All previews gracefully degrade in older browsers:

Icons fall back to simple images
Colors use solid values instead of transparency
Animations are disabled

Settings Editor

Full visual configuration interface

Font Playground

Dedicated font testing environment

Color Schemes

Browse community color themes

Overview

User Guide

Features

Development

Reference

Preview Components

Cursor Preview

Font Preview

Color Preview

Palette Preview

Icon Preview

Cursor Preview

Features

Implementation

Display

Cursor Styles

Font Preview

Sample Output

What It Tests

CSS Variables

Base Color Preview

Palette Preview

Structure

Implementation

App Icon Preview

Icon Variants

Custom Style Icons

Frame Options

Color Masks

Reactive Updates

Preview Styling

Performance Considerations

Integration with Settings

Browser Compatibility

Settings Editor

Font Playground

Color Schemes

Overview

User Guide

Features

Development

Reference

Documentation Index

​Preview Components

Cursor Preview

Font Preview

Color Preview

Palette Preview

Icon Preview

​Cursor Preview

​Features

​Implementation

​Display

​Cursor Styles

​Font Preview

​Sample Output

​What It Tests

​CSS Variables

​Base Color Preview

​Palette Preview

​Structure

​Implementation

​App Icon Preview

​Icon Variants

​Custom Style Icons

​Frame Options

​Color Masks

​Reactive Updates

​Preview Styling

​Performance Considerations

​Integration with Settings

​Browser Compatibility

​Related Features

Settings Editor

Font Playground

Color Schemes

Preview Components

Cursor Preview

Features

Implementation

Display

Cursor Styles

Font Preview

Sample Output

What It Tests

CSS Variables

Base Color Preview

Palette Preview

Structure

Implementation

App Icon Preview

Icon Variants

Custom Style Icons

Frame Options

Color Masks

Reactive Updates

Preview Styling

Performance Considerations

Integration with Settings

Browser Compatibility

Related Features