{"id":498,"date":"2025-02-26T22:48:14","date_gmt":"2025-02-27T06:48:14","guid":{"rendered":"https:\/\/jeffhottinger.com\/blog\/?p=498"},"modified":"2025-02-27T14:06:07","modified_gmt":"2025-02-27T22:06:07","slug":"how-to-configure-ghostty-as-a-retro-crt-on-mac","status":"publish","type":"post","link":"https:\/\/jeffhottinger.com\/blog\/2025\/02\/how-to-configure-ghostty-as-a-retro-crt-on-mac\/","title":{"rendered":"How to configure Ghostty as a retro CRT on Mac"},"content":{"rendered":"\n<p>I came across Ghostty recently in a <a href=\"https:\/\/youtu.be\/Elh8pvXHVxM?si=Q8uKgw3ZS8NsMmc0\" data-type=\"link\" data-id=\"https:\/\/youtu.be\/Elh8pvXHVxM?si=Q8uKgw3ZS8NsMmc0\">YouTube video<\/a> that was way too fast (but pleasantly short), and it showed some cool ways to style the terminal prompt app Ghostty by putting the native GPU support to good use. The next day I finally started watching Severance and was like &#8220;fuck yeah, retro computing with CRT monitors!&#8221; So I decided to try to configure Ghostty to look like one.<br \/><br \/>The only problem was all the search results were for videos like the one I had seen and that&#8217;s a terrible way to learn how to do something moderately detailed on a computer. I mean, it is nice to see someone walk through steps and provide a narrative while doing it. However unlike learning how to drywall I really just wanted the steps written out so I could casually scroll through them at my pace instead of scrubbing a video. And copying and pasting is convenient too.<br \/><br \/>Since I couldn&#8217;t find that page, I decided to write it. Oh, also ChatGPT was not useful either so maybe a future AI will have scraped this page and included it in its corpus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?resize=1024%2C1024&#038;ssl=1\" alt=\"A big image of the application icon for Ghostty on Mac.\" class=\"wp-image-501\" srcset=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?w=1024&amp;ssl=1 1024w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-Icon.png?resize=768%2C768&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">The Ghostty App icon<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install <a href=\"https:\/\/ghostty.org\/download\">Ghostty<\/a>. This is easy; you can do it.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/hackr-sh\/ghostty-shaders\/archive\/refs\/heads\/main.zip\" data-type=\"link\" data-id=\"https:\/\/github.com\/hackr-sh\/ghostty-shaders\/archive\/refs\/heads\/main.zip\">Download<\/a> Mohammad Al-Ahdal&#8217;s Ghostty shaders <a href=\"https:\/\/github.com\/m-ahdal\/ghostty-shaders.git\" data-type=\"link\" data-id=\"https:\/\/github.com\/m-ahdal\/ghostty-shaders.git\">repo<\/a> and unzip it. It&#8217;s on github so if you know how to git you can do so like this in Ghostty:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">cd .config\/ghostty<\/mark><\/code><\/p>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">git clone https:\/\/github.com\/m-ahdal\/ghostty-shaders.git<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>And if not just put it manually in that same location which is <code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">~\/.config\/ghostty<\/mark><\/code> but I did have to make the folders. The first computer I set this up on I made the folders using the Finder, but you can also do so in Ghostty with <code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">mkdir -p<\/mark><\/code>. Since the whole point of this is setting up a command line app, I trust you can figure that out. Either is fine, just make sure you have a folder of shaders somewhere and you know the path.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit your Ghostty config file to use the shader of your choice, which in my case is the in-game-crt<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">custom-shader = ~\/.config\/ghostty\/ghostty-shaders\/in-game-crt.glsl<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ghostty&#8217;s config file can be most easily accessed from the menu bar Ghostty&gt;Settings and is just a text file located in:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">~\/Library\/Application Support\/com.mitchellh.ghostty\/config<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The config file itself has instructions for it&#8217;s formatting, it&#8217;s very simple.<\/li>\n\n\n\n<li>If you downloaded the shaders directory manually, it may have &#8220;-main&#8221; appended to the path. It did for me.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reload Ghostty&#8217;s configuration with the keyboard combo <code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">command-shift-,<\/mark><\/code> which is also available in the menu bar under Ghostty<\/li>\n\n\n\n<li>technically that&#8217;s it, you&#8217;ll see the effect if you put everything in the correct place.<\/li>\n\n\n\n<li>this also combines with your theme so set that in your config file as well:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">theme = Afterglow<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>try Afterglow, or Apple Classic or something that you like. Reload the configuration after saving.<\/li>\n<\/ul>\n\n\n\n<p>Type <code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color has-foreground-color\">ghostty +list-themes<\/mark><\/code> in Ghosttly to get a list and preview of all the built in themes. There are a lot. Press <code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">Q<\/mark><\/code> to quit previewing themes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>you probably want to set a new font in your config file as well:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">font-family = \"Departure Mono\"<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I chose Departure Mono, which you can find <a href=\"https:\/\/departuremono.com\/\">here<\/a>, but pick whatever you like.<\/li>\n<\/ul>\n\n\n\n<p>You can take this further and I may update these instructions if I do that, but here&#8217;s what you end up with after the steps above:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"943\" src=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?resize=1024%2C943&#038;ssl=1\" alt=\"A screenshot of the Ghostty app running the top command and configured to have a retro CRT style appearance.\" class=\"wp-image-502\" srcset=\"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?resize=1024%2C943&amp;ssl=1 1024w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?resize=300%2C276&amp;ssl=1 300w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?resize=768%2C707&amp;ssl=1 768w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?resize=1536%2C1414&amp;ssl=1 1536w, https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?w=1840&amp;ssl=1 1840w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p>Kind of fun, no?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>you can also run multiple shaders simultaneously, so I ended up using this combo:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">custom-shader = ~\/.config\/ghostty\/ghostty-shaders\/in-game-crt.glsl<br \/>custom-shader = ~\/.config\/ghostty\/ghostty-shaders\/tft.glsl<br \/>custom-shader = ~\/.config\/ghostty\/ghostty-shaders\/bloom.glsl<\/mark><\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I also discovered you can get rid of the title bar entirely by adding this to your config file:<\/li>\n<\/ul>\n\n\n\n<p><code><mark style=\"background-color:#ffe2c7\" class=\"has-inline-color\">window-decoration = none<\/mark><\/code><\/p>\n\n\n\n<p>The only problem is there is nothing to drag the window around by then. This config change also didn&#8217;t take effect when I reloaded the config, only when I relaunched the app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I came across Ghostty recently in a YouTube video that was way too fast (but pleasantly short), and it showed some cool ways to style the terminal prompt app Ghostty by putting the native GPU support to good use. The next day I finally started watching Severance and was like &#8220;fuck yeah, retro computing with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":502,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,24,17],"tags":[59,64],"class_list":["post-498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-interface-design","category-technology","tag-design","tag-technology"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2025\/02\/Ghostty-CRT.png?fit=1840%2C1694&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":11,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/498\/revisions\/520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/media\/502"}],"wp:attachment":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}