Documentation Index Fetch the complete documentation index at: https://mintlify.com/zerebos/ghostty-config/llms.txt
Use this file to discover all available pages before exploring further.
Overview The Ghostty Config editor uses Svelte 5 runes for reactive state management across three main stores.
config.svelte.ts Location : src/lib/stores/config.svelte.tsManages the entire Ghostty configuration state.
Exports
The reactive configuration object containing all settings. const config = $state ( Object . assign ({}, defaults )); export default config ;
Type Definition interface DefaultConfig { // Color settings palette : HexColor []; // 256 colors background : HexColor ; foreground : HexColor ; cursorColor : HexColor ; selectionBackground : HexColor ; selectionForeground : HexColor ; // Font settings fontFamily : string ; fontFamilyBold : string ; fontFamilyItalic : string ; fontFamilyBoldItalic : string ; fontSize : number ; fontThicken : boolean ; // Keybinds keybind : KeybindString []; // Window settings windowWidth : number ; windowHeight : number ; windowPaddingX : number ; windowPaddingY : number ; windowDecoration : boolean ; // ... 100+ more settings }
Usage import config from "$lib/stores/config.svelte" ; // Read value const bg = config . background ; // Update value config . fontSize = 14 ;
Computes configuration changes from defaults. export function diff () : Partial < Record < keyof DefaultConfig | string , any >>
Returns : Object with only modified settings in Ghostty config format.Behavior
Converts camelCase keys to kebab-case: fontSize → font-size
For arrays like keybind: only includes additions
For palette: outputs palette = N=color format for changes
Skips unchanged values
Example const changes = diff (); // { // "font-size": 16, // "background": "#1e1e1e", // "keybind": ["ctrl+t=new_tab"], // "palette": ["0=#000000", "15=#ffffff"] // }
Merges partial configuration into current state. export function load ( conf : Partial < typeof config >) : void
Parameters Param Type Description confPartial<DefaultConfig>Configuration object to merge
Special Handling Keybinds : Appends to existing keybindsconfig . keybind = [ ... config . keybind , ... conf . keybind ! ];
Palette : Merges by index, preserving unchanged colorsfor ( let p = 0 ; p < conf . palette ! . length ; p ++ ) { if ( ! conf . palette ! [ p ]) continue ; config . palette [ p ] = conf . palette ! [ p ]; }
Usage load ({ fontSize: 14 , background: "#1e1e1e" , palette: [ "" , "" , "#ff0000" ] // Only index 2 changes });
Loads a color scheme from file. export async function setColorScheme ( name : string ) : Promise < void >
Parameters Param Type Description namestringColor scheme name (empty string resets)
Process
Fetches color scheme file via fetchColorScheme(name)
Parses the config text with parse()
Calls load() to apply colors
Catches and logs any errors
Usage await setColorScheme ( "github-dark" ); await setColorScheme ( "" ); // Reset to defaults
Resets all color-related settings to defaults. export function resetColorScheme () : void
Resets :
backgroundforegroundcursorColorselectionBackgroundselectionForegroundpalette (all 256 colors) Implementation const keys = [ "background" , "foreground" , "cursorColor" , "selectionBackground" , "selectionForeground" ] as Array < keyof DefaultConfig >; for ( const key of keys ) { config [ key ] = defaults [ key ]; } for ( let c = 0 ; c < defaults . palette . length ; c ++ ) { config . palette [ c ] = defaults . palette [ c ]; }
Converts camelCase to kebab-case. export function keyToConfig ( key : string ) : string
Examples keyToConfig ( "fontSize" ) // "font-size" keyToConfig ( "windowPaddingX" ) // "window-padding-x" keyToConfig ( "backgroundColor" ) // "background-color"
history.svelte.ts Location : src/lib/stores/history.svelte.tsManages navigation history for the settings pages.
State let stack : string [] = $state ([ window . location . pathname ]); let index = $state ( 0 );
Exports
Checks if backward navigation is possible. export function canGoBack () : boolean
Returns true if index > 0.
Checks if forward navigation is possible. export function canGoForward () : boolean
Returns true if there are items ahead in the stack.
Handles SvelteKit navigation events. export function processNavigation ( navEvent : OnNavigate ) : void
Parameters Param Type Description navEventOnNavigateSvelteKit navigation event
Behavior Link navigation : Adds to stack and updates indexif ( index === stack . length - 1 ) { stack = [ ... stack , navEvent . to . url . pathname ]; } else { // Trim forward history const substack = stack . slice ( 0 , index + 1 ); stack = [ ... substack , navEvent . to . url . pathname ]; } index = stack . length - 1 ;
Popstate (back/forward buttons): Updates indexindex += navEvent . delta ; // Clamps to valid range if ( index < 0 ) index = 0 ; if ( index > stack . length - 1 ) index = stack . length - 1 ;
Usage import { processNavigation } from "$lib/stores/history.svelte" ; onNavigate (( navigation ) => { processNavigation ( navigation ); });
state.svelte.ts Location : src/lib/stores/state.svelte.tsGlobal application state.
State interface AppState { title : string ; } const app : AppState = $state ({ title: "Home" }); export default app ;
Usage import app from "$lib/stores/state.svelte" ; app . title = "Settings - Font" ;
Store Patterns Svelte 5 Runes All stores use modern Svelte 5 runes instead of writable stores:
// Old pattern (Svelte 4) import { writable } from "svelte/store" ; const count = writable ( 0 ); // New pattern (Svelte 5) const count = $state ( 0 );
Direct Mutation No need for .set() or .update() methods:
import config from "$lib/stores/config.svelte" ; // Direct mutation triggers reactivity config . fontSize = 16 ; config . palette [ 0 ] = "#000000" ;
Initialization Defaults are computed from the settings schema:
import settings from "$lib/data/settings" ; const defaults : DefaultConfig = {} as DefaultConfig ; for ( const panel of settings ) { for ( const group of panel . groups ) { for ( const setting of group . settings ) { defaults [ setting . id ] = setting . value ; } } }