<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: R Shahriar</title>
    <description>The latest articles on DEV Community by R Shahriar (@make-with-rs).</description>
    <link>https://dev.to/make-with-rs</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4015398%2F2c2dc8ad-72d1-48b1-b26b-450e365bee72.png</url>
      <title>DEV Community: R Shahriar</title>
      <link>https://dev.to/make-with-rs</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/make-with-rs"/>
    <language>en</language>
    <item>
      <title>Windows 11 Display Control Explained: Brightness, RGB, Gamma, DDC/CI and More</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Sun, 04 Oct 2026 17:42:20 +0000</pubDate>
      <link>https://dev.to/make-with-rs/windows-11-display-control-explained-brightness-rgb-gamma-ddcci-and-more-1o9o</link>
      <guid>https://dev.to/make-with-rs/windows-11-display-control-explained-brightness-rgb-gamma-ddcci-and-more-1o9o</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkhg7u3v9nh9uvcjilon1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fkhg7u3v9nh9uvcjilon1.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;Monitor settings look simple until you actually try to control them from Windows.&lt;/p&gt;

&lt;p&gt;You have a brightness slider on a laptop, but it may disappear completely when you connect an external monitor.&lt;/p&gt;

&lt;p&gt;You change brightness and suddenly the blacks look gray.&lt;/p&gt;

&lt;p&gt;You increase saturation because the display looks dull, but now skin tones look strange.&lt;/p&gt;

&lt;p&gt;You lower the color temperature because the screen looks blue, but the white balance still doesn't look right.&lt;/p&gt;

&lt;p&gt;Then there is DDC/CI, software dimming, gamma, RGB channels, color profiles and HDR.&lt;/p&gt;

&lt;p&gt;Once all of these are mixed together, display control becomes surprisingly confusing.&lt;/p&gt;

&lt;p&gt;I've been working on a Windows application called &lt;strong&gt;Display Color EQ&lt;/strong&gt;, and while working on the display pipeline I ended up looking at these controls in a much more practical way.&lt;/p&gt;

&lt;p&gt;The interesting part is that most of them are solving completely different problems.&lt;/p&gt;

&lt;p&gt;Understanding that difference makes monitor troubleshooting much easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Why external monitor brightness is different
&lt;/h2&gt;

&lt;p&gt;On a laptop, Windows can normally communicate with the built-in display's brightness system.&lt;/p&gt;

&lt;p&gt;With an external monitor, the monitor is a separate device with its own electronics and its own on-screen display.&lt;/p&gt;

&lt;p&gt;That is one reason Windows may not show its normal brightness slider for an external display. Microsoft documents this behavior and recommends using the monitor's own controls when the standard Windows brightness control isn't available. (&lt;a href="https://support.microsoft.com/en-us/windows/hardware/display-graphics/change-display-brightness-and-color-in-windows?utm_source=chatgpt.com" rel="noopener noreferrer"&gt;support.microsoft.com&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;This is why desktop users often search for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;external monitor brightness control&lt;/li&gt;
&lt;li&gt;monitor brightness software&lt;/li&gt;
&lt;li&gt;Windows 11 brightness slider missing&lt;/li&gt;
&lt;li&gt;change monitor brightness from Windows&lt;/li&gt;
&lt;li&gt;brightness control for HDMI monitor&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The first thing to understand is that not all "brightness" controls work the same way.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Hardware brightness vs software brightness
&lt;/h2&gt;

&lt;p&gt;A monitor application can make a screen appear darker in two fundamentally different ways.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hardware brightness
&lt;/h3&gt;

&lt;p&gt;The application communicates with the monitor and changes its physical backlight level.&lt;/p&gt;

&lt;p&gt;For supported external monitors, this can be done through interfaces such as DDC/CI.&lt;/p&gt;

&lt;p&gt;This is actual monitor brightness control.&lt;/p&gt;

&lt;h3&gt;
  
  
  Software brightness
&lt;/h3&gt;

&lt;p&gt;The application modifies the image being displayed.&lt;/p&gt;

&lt;p&gt;One example is a black overlay that reduces the overall light coming from the displayed image.&lt;/p&gt;

&lt;p&gt;The monitor's physical backlight hasn't necessarily changed.&lt;/p&gt;

&lt;p&gt;The result can still be useful, especially when a monitor is already at its minimum hardware brightness and is still too bright for a dark room.&lt;/p&gt;

&lt;p&gt;These two approaches shouldn't be described as if they're the same thing.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. What exactly is DDC/CI?
&lt;/h2&gt;

&lt;p&gt;DDC/CI stands for Display Data Channel / Command Interface.&lt;/p&gt;

&lt;p&gt;In practical terms, it allows software to communicate with a compatible monitor and control settings exposed by that monitor.&lt;/p&gt;

&lt;p&gt;Microsoft's PowerToys Power Display is a current example of Windows software using DDC/CI to control supported external monitors, including brightness and contrast. The available controls depend on what the monitor reports. (&lt;a href="https://learn.microsoft.com/en-us/windows/powertoys/power-display?utm_source=chatgpt.com" rel="noopener noreferrer"&gt;learn.microsoft.com&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;This is useful because it means you don't necessarily need to touch the monitor's physical buttons.&lt;/p&gt;

&lt;p&gt;But there is an important limitation:&lt;/p&gt;

&lt;p&gt;DDC/CI support is not universal.&lt;/p&gt;

&lt;p&gt;The monitor needs to support the functionality, and adapters, docks, KVMs and other hardware in the connection path can affect communication.&lt;/p&gt;

&lt;p&gt;So "my monitor has HDMI" does not automatically mean "software can control everything on my monitor."&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Brightness is not color correction
&lt;/h2&gt;

&lt;p&gt;This is probably the biggest misunderstanding.&lt;/p&gt;

&lt;p&gt;Suppose your display looks blue.&lt;/p&gt;

&lt;p&gt;Changing brightness won't fix that.&lt;/p&gt;

&lt;p&gt;Suppose your display looks yellow.&lt;/p&gt;

&lt;p&gt;Changing brightness won't fix that either.&lt;/p&gt;

&lt;p&gt;Brightness changes luminance.&lt;/p&gt;

&lt;p&gt;Color balance changes color.&lt;/p&gt;

&lt;p&gt;Those are different operations.&lt;/p&gt;

&lt;p&gt;The same idea applies to a display that looks dull.&lt;/p&gt;

&lt;p&gt;If the screen lacks color intensity, increasing brightness may make the problem more obvious rather than fixing it.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. What does the Brightness slider actually do?
&lt;/h2&gt;

&lt;p&gt;In Display Color EQ, the neutral Brightness value is 50.&lt;/p&gt;

&lt;p&gt;Its modeled behavior is essentially additive across the RGB channels.&lt;/p&gt;

&lt;p&gt;That means increasing brightness can lift dark pixels as well as bright pixels.&lt;/p&gt;

&lt;p&gt;According to the app's analysis, increasing Brightness can make near-black areas move toward gray, which explains why simply pushing brightness upward can sometimes create a hazy or washed-out appearance.&lt;/p&gt;

&lt;p&gt;So when troubleshooting a display:&lt;/p&gt;

&lt;p&gt;Too dark → check Brightness.&lt;/p&gt;

&lt;p&gt;Blue tint → don't start with Brightness.&lt;/p&gt;

&lt;p&gt;Yellow tint → don't start with Brightness.&lt;/p&gt;

&lt;p&gt;Dull color → don't start with Brightness.&lt;/p&gt;

&lt;p&gt;Washed-out blacks → be careful about increasing Brightness.&lt;/p&gt;

&lt;p&gt;That distinction alone eliminates a lot of random tweaking.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Contrast is different again
&lt;/h2&gt;

&lt;p&gt;Contrast affects the relationship between dark and bright parts of the image.&lt;/p&gt;

&lt;p&gt;It can make the picture look stronger, but pushing it too far can remove detail.&lt;/p&gt;

&lt;p&gt;The Display Color EQ analysis shows that increasing Contrast changes both ends of the range and can clip darker and brighter detail.&lt;/p&gt;

&lt;p&gt;That's why the default neutral value is 50.&lt;/p&gt;

&lt;p&gt;The built-in Vivid profile only moves Contrast to 52 rather than making a huge change.&lt;/p&gt;

&lt;p&gt;A small contrast change can be useful.&lt;/p&gt;

&lt;p&gt;A giant contrast change can simply destroy information.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Saturation is what you want when colors look boring
&lt;/h2&gt;

&lt;p&gt;Let's say the monitor looks technically fine but everything feels dull.&lt;/p&gt;

&lt;p&gt;This is where Saturation becomes much more relevant.&lt;/p&gt;

&lt;p&gt;Display Color EQ uses 50 as its neutral Saturation value.&lt;/p&gt;

&lt;p&gt;Its analysis estimates that moving the slider up by 10 points produces roughly a 10% increase in color intensity, while the Vivid profile at 64 produces roughly a 15% increase in the modeled content.&lt;/p&gt;

&lt;p&gt;That's why the application's Vivid profile uses:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Saturation: 64&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;instead of something extreme like 90 or 100.&lt;/p&gt;

&lt;p&gt;The idea is to make colors more noticeable without intentionally turning everything into neon.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Why 100% saturation isn't automatically better
&lt;/h2&gt;

&lt;p&gt;This seems obvious, but it is an easy trap.&lt;/p&gt;

&lt;p&gt;When a display looks dull, pushing Saturation feels immediately satisfying.&lt;/p&gt;

&lt;p&gt;Everything becomes colorful.&lt;/p&gt;

&lt;p&gt;But more color doesn't necessarily mean better color.&lt;/p&gt;

&lt;p&gt;As saturation increases, some colors can become clipped or unnatural.&lt;/p&gt;

&lt;p&gt;The Display Color EQ profile analysis found a much higher clipping rate with the older, more aggressive Vivid configuration and reduced the final Vivid profile to Saturation 64.&lt;/p&gt;

&lt;p&gt;So if your monitor looks gray, I would try:&lt;/p&gt;

&lt;p&gt;50 → 55 → 60 → 64&lt;/p&gt;

&lt;p&gt;instead of:&lt;/p&gt;

&lt;p&gt;50 → 100.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. RGB is for color balance
&lt;/h2&gt;

&lt;p&gt;RGB controls are different from Saturation.&lt;/p&gt;

&lt;p&gt;They don't simply make all colors stronger.&lt;/p&gt;

&lt;p&gt;They change the balance between red, green and blue.&lt;/p&gt;

&lt;p&gt;This makes them particularly useful when the display has a visible color cast.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;Blue-looking display → reduce Blue.&lt;/p&gt;

&lt;p&gt;Yellow-looking display → reduce Red and Green while keeping Blue higher.&lt;/p&gt;

&lt;p&gt;Green-looking display → adjust Green carefully and re-check neutral gray.&lt;/p&gt;

&lt;p&gt;The Display Color EQ guide gives practical starting points for these corrections.&lt;/p&gt;

&lt;p&gt;For a cool/blue display around 7300K:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;R 50 / G 45 / B 38&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a warm/yellow display around 5900K:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;R 38 / G 43 / B 50&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These are not universal calibration values.&lt;/p&gt;

&lt;p&gt;They're starting points based on the application's color model.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Why Blue is especially useful
&lt;/h2&gt;

&lt;p&gt;The Blue slider has a noticeable effect on a cool-looking white.&lt;/p&gt;

&lt;p&gt;In the app's analysis, changing Blue by one slider point changes the blue channel by roughly 0.6%, and a one-point reduction around the neutral region moves the calculated white point by around 75K warmer. The guide specifically identifies Blue as the primary slider for correcting bluish white.&lt;/p&gt;

&lt;p&gt;That's why small changes can be enough.&lt;/p&gt;

&lt;p&gt;You don't necessarily need to reduce Blue from 50 to 20.&lt;/p&gt;

&lt;p&gt;If a monitor is only slightly cool, moving it to 48 or 47 may already be visually useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Color temperature sounds simpler, but it has limitations
&lt;/h2&gt;

&lt;p&gt;A display's color temperature controls whether the image looks warmer or cooler.&lt;/p&gt;

&lt;p&gt;The problem is that changing the temperature alone isn't always enough to correct a real-world monitor's white point.&lt;/p&gt;

&lt;p&gt;The Display Color EQ analysis found that the application's temperature adjustment can have a smaller practical effect on pure white while changing middle gray more noticeably.&lt;/p&gt;

&lt;p&gt;That's one reason the Warm, Cool and Night profiles use RGB adjustments alongside Color Temperature.&lt;/p&gt;

&lt;p&gt;It's not just:&lt;/p&gt;

&lt;p&gt;"Make the temperature lower."&lt;/p&gt;

&lt;p&gt;It is:&lt;/p&gt;

&lt;p&gt;"Adjust the color balance in a way that keeps more of the grayscale consistent."&lt;/p&gt;

&lt;h2&gt;
  
  
  12. Gamma is not another brightness slider
&lt;/h2&gt;

&lt;p&gt;Gamma is probably the most misunderstood control in this entire list.&lt;/p&gt;

&lt;p&gt;It's tempting to describe it as "making the screen brighter or darker," but that's incomplete.&lt;/p&gt;

&lt;p&gt;Gamma primarily affects the relationship between input levels and displayed tones, especially in the middle of the range.&lt;/p&gt;

&lt;p&gt;In Display Color EQ, moving Gamma from 1.00 to 1.10 changes middle and dark-gray values while leaving pure black and white fixed in the modeled pipeline.&lt;/p&gt;

&lt;p&gt;That makes Gamma useful when:&lt;/p&gt;

&lt;p&gt;The image feels flat.&lt;/p&gt;

&lt;p&gt;Midtones look wrong.&lt;/p&gt;

&lt;p&gt;Dark areas need a little more separation.&lt;/p&gt;

&lt;p&gt;The display looks too dark without wanting to raise the entire brightness level.&lt;/p&gt;

&lt;h2&gt;
  
  
  13. Hue and Tint should usually stay alone
&lt;/h2&gt;

&lt;p&gt;Display Color EQ also exposes Hue and Tint controls.&lt;/p&gt;

&lt;p&gt;They are useful, but they're not normally the first controls I'd reach for.&lt;/p&gt;

&lt;p&gt;Hue rotates colors around the color wheel.&lt;/p&gt;

&lt;p&gt;Tint moves the image toward green or magenta.&lt;/p&gt;

&lt;p&gt;The application's built-in profiles keep both at zero.&lt;/p&gt;

&lt;p&gt;If the monitor simply looks blue, RGB is generally a much more understandable place to begin.&lt;/p&gt;

&lt;h2&gt;
  
  
  14. Black Point and White Point are not brightness controls
&lt;/h2&gt;

&lt;p&gt;These controls change the endpoints of the tonal range.&lt;/p&gt;

&lt;p&gt;Black Point can push near-black tones toward black.&lt;/p&gt;

&lt;p&gt;White Point can push bright tones toward white.&lt;/p&gt;

&lt;p&gt;That can be useful in certain situations, but the trade-off is detail.&lt;/p&gt;

&lt;p&gt;The Display Color EQ analysis shows that increasing Black Point can compress dark detail, while White Point can clip highlights.&lt;/p&gt;

&lt;p&gt;That's why the default profiles leave both at zero.&lt;/p&gt;

&lt;h2&gt;
  
  
  15. Why Night Shield is different from Night mode
&lt;/h2&gt;

&lt;p&gt;This is one of the distinctions I wanted to make in Display Color EQ.&lt;/p&gt;

&lt;p&gt;A traditional night mode usually makes the screen warmer.&lt;/p&gt;

&lt;p&gt;That's useful when you want less blue and a warmer appearance.&lt;/p&gt;

&lt;p&gt;But some people don't want a yellow screen.&lt;/p&gt;

&lt;p&gt;They simply want the display to be much darker.&lt;/p&gt;

&lt;p&gt;That's what Night Shield is designed for.&lt;/p&gt;

&lt;p&gt;Its default profile keeps:&lt;/p&gt;

&lt;p&gt;Color Temperature: 6500K&lt;/p&gt;

&lt;p&gt;Red: 50&lt;/p&gt;

&lt;p&gt;Green: 50&lt;/p&gt;

&lt;p&gt;Blue: 50&lt;/p&gt;

&lt;p&gt;and uses:&lt;/p&gt;

&lt;p&gt;Black Overlay: 70%&lt;/p&gt;

&lt;p&gt;Gamma: 1.10&lt;/p&gt;

&lt;p&gt;Saturation: 54&lt;/p&gt;

&lt;p&gt;According to the app's model, the 70% overlay reduces white luminance to roughly 8% of the original level while keeping the display neutral rather than deliberately warming it.&lt;/p&gt;

&lt;p&gt;So:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Night = warmer&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Night Shield = much darker without intentionally making it yellow&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's a useful distinction.&lt;/p&gt;

&lt;h2&gt;
  
  
  16. Multiple monitors make all of this more obvious
&lt;/h2&gt;

&lt;p&gt;If you use two monitors, you'll quickly discover that the same settings don't necessarily produce the same appearance.&lt;/p&gt;

&lt;p&gt;Both monitors can be set to:&lt;/p&gt;

&lt;p&gt;Brightness 50&lt;/p&gt;

&lt;p&gt;Contrast 50&lt;/p&gt;

&lt;p&gt;RGB 50/50/50&lt;/p&gt;

&lt;p&gt;and still look different.&lt;/p&gt;

&lt;p&gt;That's because the panels, backlights and factory configurations aren't identical.&lt;/p&gt;

&lt;p&gt;The practical solution is to tune each display rather than assuming one set of numbers will work everywhere.&lt;/p&gt;

&lt;p&gt;Windows 11 also provides display-specific color-profile management, which is worth checking when two monitors behave differently.&lt;/p&gt;

&lt;h2&gt;
  
  
  17. Monitor profiles are more useful than individual sliders
&lt;/h2&gt;

&lt;p&gt;A good display utility shouldn't just give you 15 sliders and leave you to remember everything.&lt;/p&gt;

&lt;p&gt;Profiles are what make those controls practical.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Natural&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A neutral baseline.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vivid&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;More color intensity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Warm&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a display that feels too cool.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cool&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a display that feels too warm.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;B&amp;amp;W&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For grayscale.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Night&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Warm nighttime use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Night Shield&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Very dark but relatively neutral.&lt;/p&gt;

&lt;p&gt;Those are the built-in profile concepts in Display Color EQ, with the actual factory values documented in the application's profile guide.&lt;/p&gt;

&lt;h2&gt;
  
  
  18. A practical troubleshooting method
&lt;/h2&gt;

&lt;p&gt;Instead of changing random settings, I use a simple order.&lt;/p&gt;

&lt;h3&gt;
  
  
  If the monitor is too bright
&lt;/h3&gt;

&lt;p&gt;Check hardware Panel brightness first.&lt;/p&gt;

&lt;p&gt;If supported, use DDC/CI.&lt;/p&gt;

&lt;p&gt;If that's not enough, consider software dimming.&lt;/p&gt;

&lt;h3&gt;
  
  
  If the monitor looks blue
&lt;/h3&gt;

&lt;p&gt;Check Color Temperature.&lt;/p&gt;

&lt;p&gt;Then reduce Blue.&lt;/p&gt;

&lt;p&gt;Then fine-tune Green if necessary.&lt;/p&gt;

&lt;h3&gt;
  
  
  If the monitor looks yellow
&lt;/h3&gt;

&lt;p&gt;Reduce Red and Green while keeping Blue higher.&lt;/p&gt;

&lt;h3&gt;
  
  
  If colors look dull
&lt;/h3&gt;

&lt;p&gt;Try Saturation around 55–64.&lt;/p&gt;

&lt;p&gt;Then evaluate whether Gamma or Contrast also need a small change.&lt;/p&gt;

&lt;h3&gt;
  
  
  If the image looks flat
&lt;/h3&gt;

&lt;p&gt;Check Gamma and Contrast.&lt;/p&gt;

&lt;h3&gt;
  
  
  If blacks look washed out
&lt;/h3&gt;

&lt;p&gt;Be careful with Brightness.&lt;/p&gt;

&lt;p&gt;Check the display pipeline and HDR settings before simply increasing contrast or saturation.&lt;/p&gt;

&lt;p&gt;This way each adjustment has a reason.&lt;/p&gt;

&lt;h2&gt;
  
  
  19. A starting profile for a dull monitor
&lt;/h2&gt;

&lt;p&gt;For someone who says:&lt;/p&gt;

&lt;p&gt;"My monitor looks boring and gray."&lt;/p&gt;

&lt;p&gt;I'd start with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Brightness      50
Contrast        52
Saturation      64
Color Temp      6500K
Red             50
Green           50
Blue            50
Gamma           1.08
Hue             0
Tint            0
Black Point     0
White Point     0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This matches the basic Display Color EQ Vivid profile.&lt;/p&gt;

&lt;p&gt;If it looks too strong, lower Saturation.&lt;/p&gt;

&lt;p&gt;Try 60.&lt;/p&gt;

&lt;p&gt;Then 57.&lt;/p&gt;

&lt;p&gt;There is no reason to treat 64 as a magic number.&lt;/p&gt;

&lt;h2&gt;
  
  
  20. A starting profile for a blue-looking monitor
&lt;/h2&gt;

&lt;p&gt;If the display looks noticeably cool:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Brightness      50
Contrast        50
Saturation      50
Color Temp      6500K
Red             50
Green           45
Blue            38
Gamma           1.00
Hue             0
Tint            0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This follows the app's Warm profile, which uses 50/45/38 for RGB.&lt;/p&gt;

&lt;p&gt;Then fine-tune based on the actual display.&lt;/p&gt;

&lt;h2&gt;
  
  
  21. A starting profile for a yellow-looking monitor
&lt;/h2&gt;

&lt;p&gt;For the opposite problem:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Brightness      50
Contrast        50
Saturation      50
Color Temp      6500K
Red             38
Green           43
Blue            50
Gamma           1.00
Hue             0
Tint            0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That follows the application's Cool profile.&lt;/p&gt;

&lt;p&gt;Again, it's a starting point, not a measured calibration result for every monitor.&lt;/p&gt;

&lt;h2&gt;
  
  
  22. What software can't fix
&lt;/h2&gt;

&lt;p&gt;This is just as important as what it can fix.&lt;/p&gt;

&lt;p&gt;Software cannot change the physical characteristics of a panel.&lt;/p&gt;

&lt;p&gt;It cannot turn a standard-gamut display into a completely different wide-gamut panel.&lt;/p&gt;

&lt;p&gt;It cannot create hardware DDC/CI support where the monitor doesn't expose it.&lt;/p&gt;

&lt;p&gt;It cannot replace professional color measurement.&lt;/p&gt;

&lt;p&gt;And it cannot guarantee identical results across different monitors.&lt;/p&gt;

&lt;p&gt;The Display Color EQ profile guide explicitly notes that its examples use modeled assumptions rather than measurements of the reader's actual monitor.&lt;/p&gt;

&lt;p&gt;That's why I prefer calling these controls practical display adjustments rather than promising perfect calibration.&lt;/p&gt;

&lt;h2&gt;
  
  
  23. Why I built Display Color EQ
&lt;/h2&gt;

&lt;p&gt;The project started with a very simple idea:&lt;/p&gt;

&lt;p&gt;I wanted control over my monitor from Windows.&lt;/p&gt;

&lt;p&gt;But once I started separating the problems, it became obvious that "monitor control" actually means several different things.&lt;/p&gt;

&lt;p&gt;Hardware brightness.&lt;/p&gt;

&lt;p&gt;Software dimming.&lt;/p&gt;

&lt;p&gt;RGB balance.&lt;/p&gt;

&lt;p&gt;Color temperature.&lt;/p&gt;

&lt;p&gt;Saturation.&lt;/p&gt;

&lt;p&gt;Contrast.&lt;/p&gt;

&lt;p&gt;Gamma.&lt;/p&gt;

&lt;p&gt;Profiles.&lt;/p&gt;

&lt;p&gt;Night modes.&lt;/p&gt;

&lt;p&gt;Automation.&lt;/p&gt;

&lt;p&gt;Instead of building a collection of unrelated utilities, I wanted to bring the controls together into one application.&lt;/p&gt;

&lt;p&gt;That's what Display Color EQ became.&lt;/p&gt;

&lt;h2&gt;
  
  
  24. The developer side of the problem
&lt;/h2&gt;

&lt;p&gt;From a development perspective, display control is interesting because the user sees one simple UI:&lt;/p&gt;

&lt;p&gt;Brightness: 50&lt;/p&gt;

&lt;p&gt;But underneath that, the effect can be completely different depending on the control.&lt;/p&gt;

&lt;p&gt;Some settings affect the monitor hardware.&lt;/p&gt;

&lt;p&gt;Some affect the software color pipeline.&lt;/p&gt;

&lt;p&gt;Some modify channels.&lt;/p&gt;

&lt;p&gt;Some change tone mapping.&lt;/p&gt;

&lt;p&gt;Some operate as overlays.&lt;/p&gt;

&lt;p&gt;Some depend on hardware capabilities.&lt;/p&gt;

&lt;p&gt;That means a good display utility shouldn't only expose sliders.&lt;/p&gt;

&lt;p&gt;It should also make it clear what each slider is actually doing.&lt;/p&gt;

&lt;p&gt;That's one of the principles I tried to follow while building Display Color EQ.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;Windows display settings become much easier to understand once you stop thinking of every slider as "brightness."&lt;/p&gt;

&lt;p&gt;They're different tools for different problems.&lt;/p&gt;

&lt;p&gt;Brightness is for luminance.&lt;/p&gt;

&lt;p&gt;Panel Brightness is hardware backlight control where supported.&lt;/p&gt;

&lt;p&gt;Contrast affects separation between dark and bright values.&lt;/p&gt;

&lt;p&gt;Saturation changes color intensity.&lt;/p&gt;

&lt;p&gt;RGB changes color balance.&lt;/p&gt;

&lt;p&gt;Color Temperature changes warm/cool appearance.&lt;/p&gt;

&lt;p&gt;Gamma changes tonal response.&lt;/p&gt;

&lt;p&gt;Black Overlay provides software-based dimming.&lt;/p&gt;

&lt;p&gt;Black Point and White Point affect the tonal endpoints.&lt;/p&gt;

&lt;p&gt;Profiles combine those settings into repeatable configurations.&lt;/p&gt;

&lt;p&gt;And DDC/CI can provide a bridge between Windows software and supported external-monitor hardware.&lt;/p&gt;

&lt;p&gt;That is the approach behind Display Color EQ.&lt;/p&gt;

&lt;p&gt;The goal isn't to make every monitor identical or replace professional calibration hardware.&lt;/p&gt;

&lt;p&gt;It's to make everyday Windows display adjustment easier to understand and easier to control.&lt;/p&gt;

&lt;p&gt;If your monitor is too bright, too blue, too yellow, too dull, too flat or simply inconvenient to configure, the first step isn't necessarily buying another monitor.&lt;/p&gt;

&lt;p&gt;Sometimes the right solution is simply having the right controls.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>automation</category>
    </item>
    <item>
      <title>A Practical Guide to Fixing Monitor Brightness and Color Problems in Windows 11</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Sun, 04 Oct 2026 17:39:24 +0000</pubDate>
      <link>https://dev.to/make-with-rs/a-practical-guide-to-fixing-monitor-brightness-and-color-problems-in-windows-11-2hib</link>
      <guid>https://dev.to/make-with-rs/a-practical-guide-to-fixing-monitor-brightness-and-color-problems-in-windows-11-2hib</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq369ufkdx22kjf48idpt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq369ufkdx22kjf48idpt.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;If you use Windows with an external monitor, you have probably experienced at least one of these problems:&lt;/p&gt;

&lt;p&gt;Your monitor is too bright.&lt;/p&gt;

&lt;p&gt;Your monitor is too dark.&lt;/p&gt;

&lt;p&gt;Windows 11 doesn't show a brightness slider.&lt;/p&gt;

&lt;p&gt;The screen looks too blue.&lt;/p&gt;

&lt;p&gt;Everything looks yellow or warm.&lt;/p&gt;

&lt;p&gt;Colors look dull and gray.&lt;/p&gt;

&lt;p&gt;The image looks washed out.&lt;/p&gt;

&lt;p&gt;The monitor looks too saturated.&lt;/p&gt;

&lt;p&gt;One monitor looks completely different from another.&lt;/p&gt;

&lt;p&gt;Night Light makes the screen warm, but it is still too bright.&lt;/p&gt;

&lt;p&gt;You change the monitor buttons every day and still can't get a setup you actually like.&lt;/p&gt;

&lt;p&gt;I have dealt with several of these problems myself, and the more I looked into display control on Windows, the more I realized that brightness and color are actually separate problems.&lt;/p&gt;

&lt;p&gt;A single brightness slider can't fix everything.&lt;/p&gt;

&lt;p&gt;Sometimes you need RGB adjustment.&lt;/p&gt;

&lt;p&gt;Sometimes you need saturation.&lt;/p&gt;

&lt;p&gt;Sometimes gamma.&lt;/p&gt;

&lt;p&gt;Sometimes color temperature.&lt;/p&gt;

&lt;p&gt;And with an external monitor, sometimes you first need a way to control the monitor from Windows at all.&lt;/p&gt;

&lt;p&gt;This is why I built Display Color EQ.&lt;/p&gt;

&lt;p&gt;The goal is not to magically calibrate every monitor perfectly. The goal is to give Windows users a practical place to adjust the display they already have.&lt;/p&gt;

&lt;h2&gt;
  
  
  First problem: Windows 11 has no brightness slider for my monitor
&lt;/h2&gt;

&lt;p&gt;This is probably the most common question.&lt;/p&gt;

&lt;p&gt;You open Windows 11 Quick Settings.&lt;/p&gt;

&lt;p&gt;You expect to see a brightness slider.&lt;/p&gt;

&lt;p&gt;But it isn't there.&lt;/p&gt;

&lt;p&gt;This is especially common on desktop PCs connected to external monitors.&lt;/p&gt;

&lt;p&gt;Microsoft itself documents that the normal Windows brightness slider may not appear when an external monitor is connected. For external monitors, Windows traditionally expects users to use the monitor's own controls.&lt;/p&gt;

&lt;p&gt;That's not particularly convenient.&lt;/p&gt;

&lt;p&gt;You have to reach behind the display.&lt;/p&gt;

&lt;p&gt;Open the monitor's OSD.&lt;/p&gt;

&lt;p&gt;Find Brightness.&lt;/p&gt;

&lt;p&gt;Change it.&lt;/p&gt;

&lt;p&gt;Close the menu.&lt;/p&gt;

&lt;p&gt;Do it again later.&lt;/p&gt;

&lt;p&gt;Fortunately, some external monitors expose controls through DDC/CI.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is DDC/CI?
&lt;/h2&gt;

&lt;p&gt;DDC/CI allows software to communicate with supported monitors and control certain hardware settings.&lt;/p&gt;

&lt;p&gt;Depending on the monitor, this can include brightness, contrast, color temperature and other controls.&lt;/p&gt;

&lt;p&gt;Microsoft's PowerToys Power Display is one current example. It uses DDC/CI for supported external monitors and provides per-monitor controls and profiles.&lt;/p&gt;

&lt;p&gt;But there is an important limitation:&lt;/p&gt;

&lt;p&gt;Not every monitor supports the same controls.&lt;/p&gt;

&lt;p&gt;And not every connection path behaves the same way.&lt;/p&gt;

&lt;p&gt;A monitor connected directly through DisplayPort may behave differently from one connected through a dock, KVM or adapter.&lt;/p&gt;

&lt;p&gt;So external monitor software should always be thought of as "control where supported", not "every display will support everything."&lt;/p&gt;

&lt;h2&gt;
  
  
  Hardware brightness and software brightness are different
&lt;/h2&gt;

&lt;p&gt;This distinction matters.&lt;/p&gt;

&lt;p&gt;There are two ways to make a monitor appear darker.&lt;/p&gt;

&lt;p&gt;The first is hardware brightness control.&lt;/p&gt;

&lt;p&gt;The software communicates with the monitor and changes its actual backlight brightness through a supported interface such as DDC/CI.&lt;/p&gt;

&lt;p&gt;The second is software-based dimming.&lt;/p&gt;

&lt;p&gt;Instead of changing the physical backlight, the software changes the image or applies an overlay so the screen appears darker.&lt;/p&gt;

&lt;p&gt;They can look similar to the user, but they are not technically the same thing.&lt;/p&gt;

&lt;p&gt;That's why a display utility may still be useful even when hardware brightness control isn't available.&lt;/p&gt;

&lt;h2&gt;
  
  
  If your monitor is too bright at night
&lt;/h2&gt;

&lt;p&gt;Let's say you've already set the monitor's hardware brightness as low as you're comfortable with, but the screen is still too bright.&lt;/p&gt;

&lt;p&gt;This is where a software dimming approach can be useful.&lt;/p&gt;

&lt;p&gt;Display Color EQ includes a Black overlay control specifically for this type of situation.&lt;/p&gt;

&lt;p&gt;The app's analysis shows how the overlay affects the entire image:&lt;/p&gt;

&lt;p&gt;At 60%, white retains roughly 14.3% of its original luminance.&lt;/p&gt;

&lt;p&gt;At 70%, roughly 8.2%.&lt;/p&gt;

&lt;p&gt;At 75%, roughly 5.7%.&lt;/p&gt;

&lt;p&gt;At 80%, roughly 3.7%.&lt;/p&gt;

&lt;p&gt;The guide recommends 70% as a practical upper point before visible banding becomes more likely.&lt;/p&gt;

&lt;p&gt;That makes a profile such as:&lt;/p&gt;

&lt;p&gt;Brightness: 50&lt;/p&gt;

&lt;p&gt;Black overlay: 70%&lt;/p&gt;

&lt;p&gt;Gamma: 1.10&lt;/p&gt;

&lt;p&gt;Saturation: 54&lt;/p&gt;

&lt;p&gt;a useful starting point for a very dark room.&lt;/p&gt;

&lt;p&gt;The important thing is that the app's Night Shield keeps RGB neutral instead of turning the screen yellow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Night Light isn't the same as dimming
&lt;/h2&gt;

&lt;p&gt;Windows Night light is useful when you want a warmer screen at night.&lt;/p&gt;

&lt;p&gt;But a warmer screen isn't necessarily a darker screen.&lt;/p&gt;

&lt;p&gt;You can have a very orange monitor that is still extremely bright.&lt;/p&gt;

&lt;p&gt;Display Color EQ separates those ideas.&lt;/p&gt;

&lt;p&gt;You can use a warm/night setup when you want a warmer display, or use Night Shield when the main problem is excessive brightness.&lt;/p&gt;

&lt;p&gt;The application's Night profile uses:&lt;/p&gt;

&lt;p&gt;Color Temperature: 6000K&lt;/p&gt;

&lt;p&gt;Green: 24&lt;/p&gt;

&lt;p&gt;Blue: 0&lt;/p&gt;

&lt;p&gt;while keeping Brightness at 50.&lt;/p&gt;

&lt;p&gt;That combination is intended to reduce blue light and create a warm nighttime appearance.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if the monitor looks too blue?
&lt;/h2&gt;

&lt;p&gt;This is a completely different problem.&lt;/p&gt;

&lt;p&gt;Don't lower Brightness.&lt;/p&gt;

&lt;p&gt;Don't randomly increase Saturation.&lt;/p&gt;

&lt;p&gt;Start with color balance.&lt;/p&gt;

&lt;p&gt;A blue-looking monitor generally needs the blue channel reduced, and sometimes the green channel needs a small reduction too.&lt;/p&gt;

&lt;p&gt;The Display Color EQ guide gives these starting points for monitors with a cooler white point:&lt;/p&gt;

&lt;p&gt;Around 7000K:&lt;/p&gt;

&lt;p&gt;R 50 / G 47 / B 42&lt;/p&gt;

&lt;p&gt;Around 7300K:&lt;/p&gt;

&lt;p&gt;R 50 / G 45 / B 38&lt;/p&gt;

&lt;p&gt;Around 7500K:&lt;/p&gt;

&lt;p&gt;R 50 / G 44 / B 35&lt;/p&gt;

&lt;p&gt;Around 8000K:&lt;/p&gt;

&lt;p&gt;R 50 / G 42 / B 30&lt;/p&gt;

&lt;p&gt;These aren't universal calibration values.&lt;/p&gt;

&lt;p&gt;They're starting points.&lt;/p&gt;

&lt;p&gt;Your particular panel may need less correction.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why reduce Blue?
&lt;/h3&gt;

&lt;p&gt;According to the app's slider analysis, one point of Blue adjustment changes the blue channel by about 0.6%, and lowering Blue by one point around the neutral region moves the calculated white point approximately 75K warmer. The guide specifically identifies Blue as the primary slider for correcting a blue-looking white.&lt;/p&gt;

&lt;p&gt;That makes the process pretty simple:&lt;/p&gt;

&lt;p&gt;Keep Red around 50.&lt;/p&gt;

&lt;p&gt;Reduce Blue slightly.&lt;/p&gt;

&lt;p&gt;Check white and gray.&lt;/p&gt;

&lt;p&gt;Then adjust Green if necessary.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if the monitor looks yellow?
&lt;/h2&gt;

&lt;p&gt;Just do the opposite.&lt;/p&gt;

&lt;p&gt;For a warm/yellow-looking display, keep Blue at 50 and reduce Red and Green.&lt;/p&gt;

&lt;p&gt;For example, the guide gives these starting points:&lt;/p&gt;

&lt;p&gt;Approximately 6100K:&lt;/p&gt;

&lt;p&gt;R 42 / G 45 / B 50&lt;/p&gt;

&lt;p&gt;Approximately 5900K:&lt;/p&gt;

&lt;p&gt;R 38 / G 43 / B 50&lt;/p&gt;

&lt;p&gt;Approximately 5700K:&lt;/p&gt;

&lt;p&gt;R 34 / G 40 / B 50&lt;/p&gt;

&lt;p&gt;Approximately 5500K:&lt;/p&gt;

&lt;p&gt;R 30 / G 37 / B 50&lt;/p&gt;

&lt;p&gt;Again, these should be treated as starting values rather than guaranteed calibration results.&lt;/p&gt;

&lt;p&gt;If the screen becomes too cool after the correction, simply move one slider back.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real monitors can have warm or cool factory settings
&lt;/h2&gt;

&lt;p&gt;This isn't just a theoretical problem.&lt;/p&gt;

&lt;p&gt;For example, TechSpot measured the Dell UltraSharp U4919DW at an average CCT of 7404K in its default mode and described a slight blue tint relative to a calibrated reference.&lt;/p&gt;

&lt;p&gt;That's a useful example because it shows something important:&lt;/p&gt;

&lt;p&gt;A monitor can be a good display overall and still have a white point that isn't exactly where you personally want it.&lt;/p&gt;

&lt;p&gt;So "my monitor looks blue" doesn't automatically mean "my monitor is defective."&lt;/p&gt;

&lt;h2&gt;
  
  
  What if the colors just look boring?
&lt;/h2&gt;

&lt;p&gt;This is another very common problem.&lt;/p&gt;

&lt;p&gt;The screen isn't obviously blue.&lt;/p&gt;

&lt;p&gt;It isn't obviously yellow.&lt;/p&gt;

&lt;p&gt;It just looks gray.&lt;/p&gt;

&lt;p&gt;Photos don't look exciting.&lt;/p&gt;

&lt;p&gt;Games look flat.&lt;/p&gt;

&lt;p&gt;Everything feels less colorful than your phone or another monitor.&lt;/p&gt;

&lt;p&gt;This is where Saturation becomes more useful than RGB.&lt;/p&gt;

&lt;p&gt;In Display Color EQ, the neutral Saturation value is 50.&lt;/p&gt;

&lt;p&gt;At 60, the modeled color intensity increases by roughly 10%.&lt;/p&gt;

&lt;p&gt;At 64, the Vivid profile produces roughly 15% more color intensity on the tested content.&lt;/p&gt;

&lt;p&gt;So I would usually start around:&lt;/p&gt;

&lt;p&gt;Saturation 55–60&lt;/p&gt;

&lt;p&gt;and then move toward:&lt;/p&gt;

&lt;p&gt;Saturation 64&lt;/p&gt;

&lt;p&gt;if the result still looks too restrained.&lt;/p&gt;

&lt;h2&gt;
  
  
  Don't set Saturation to 100
&lt;/h2&gt;

&lt;p&gt;More color isn't automatically better color.&lt;/p&gt;

&lt;p&gt;If you push saturation too far, skin tones can look unnatural and strongly colored objects can become exaggerated.&lt;/p&gt;

&lt;p&gt;The Display Color EQ Vivid profile deliberately uses Saturation 64 rather than an extreme value, partly because increasing saturation too much can increase clipping. Its modeled results showed substantially less severe clipping than the earlier, more aggressive Vivid configuration.&lt;/p&gt;

&lt;p&gt;So the goal should be:&lt;/p&gt;

&lt;p&gt;More vivid.&lt;/p&gt;

&lt;p&gt;Not:&lt;/p&gt;

&lt;p&gt;Maximum saturation.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if the screen looks flat?
&lt;/h2&gt;

&lt;p&gt;This is where Contrast and Gamma become useful.&lt;/p&gt;

&lt;p&gt;I wouldn't immediately increase Contrast to 70 or 80.&lt;/p&gt;

&lt;p&gt;A small change can be enough.&lt;/p&gt;

&lt;p&gt;Display Color EQ's Vivid profile uses:&lt;/p&gt;

&lt;p&gt;Contrast: 52&lt;/p&gt;

&lt;p&gt;Saturation: 64&lt;/p&gt;

&lt;p&gt;Gamma: 1.08&lt;/p&gt;

&lt;p&gt;The Gamma change is particularly interesting because it raises midtones while keeping the black and white endpoints unchanged in the modeled pipeline.&lt;/p&gt;

&lt;p&gt;That can be preferable to simply increasing Brightness.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Brightness isn't a color-control slider
&lt;/h2&gt;

&lt;p&gt;It's tempting to use Brightness whenever something looks wrong.&lt;/p&gt;

&lt;p&gt;But Brightness has a very different job.&lt;/p&gt;

&lt;p&gt;The app's analysis shows that increasing Brightness adds to the RGB levels across the image. That means raising Brightness can also lift black into dark gray and create a hazy appearance.&lt;/p&gt;

&lt;p&gt;So:&lt;/p&gt;

&lt;p&gt;Screen too blue → RGB.&lt;/p&gt;

&lt;p&gt;Screen too yellow → RGB.&lt;/p&gt;

&lt;p&gt;Colors too weak → Saturation.&lt;/p&gt;

&lt;p&gt;Image too flat → Contrast/Gamma.&lt;/p&gt;

&lt;p&gt;Screen too bright → Brightness or supported hardware Panel brightness.&lt;/p&gt;

&lt;p&gt;Screen too bright at night → Night Shield or another appropriate dimming method.&lt;/p&gt;

&lt;p&gt;This separation makes display troubleshooting much easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if one monitor looks completely different from another?
&lt;/h2&gt;

&lt;p&gt;Welcome to the dual-monitor problem.&lt;/p&gt;

&lt;p&gt;You can buy two good displays and still have:&lt;/p&gt;

&lt;p&gt;One looking warmer.&lt;/p&gt;

&lt;p&gt;One looking cooler.&lt;/p&gt;

&lt;p&gt;One looking brighter.&lt;/p&gt;

&lt;p&gt;One having stronger colors.&lt;/p&gt;

&lt;p&gt;One looking slightly washed out.&lt;/p&gt;

&lt;p&gt;This can happen because the panels, backlights, factory settings and color characteristics are different.&lt;/p&gt;

&lt;p&gt;Setting both monitors to "Brightness 50" doesn't guarantee that they will look equally bright.&lt;/p&gt;

&lt;p&gt;The same applies to RGB and color temperature.&lt;/p&gt;

&lt;p&gt;Windows 11 lets you manage displays and color profiles individually, but external-monitor brightness control has its own limitations.&lt;/p&gt;

&lt;p&gt;So the practical approach is to tune each display rather than assuming identical numbers will create identical results.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with white and gray
&lt;/h2&gt;

&lt;p&gt;When trying to match two monitors, don't begin with a colorful wallpaper.&lt;/p&gt;

&lt;p&gt;Start with white.&lt;/p&gt;

&lt;p&gt;Then light gray.&lt;/p&gt;

&lt;p&gt;Then medium gray.&lt;/p&gt;

&lt;p&gt;If one screen is noticeably blue and the other looks neutral, that is much easier to identify from gray than from a colorful photograph.&lt;/p&gt;

&lt;p&gt;Once the neutral colors are reasonably close, compare normal photographs and videos.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about Gamma?
&lt;/h2&gt;

&lt;p&gt;Gamma is often misunderstood.&lt;/p&gt;

&lt;p&gt;It isn't simply another brightness slider.&lt;/p&gt;

&lt;p&gt;Changing gamma primarily changes how the display handles tones between black and white.&lt;/p&gt;

&lt;p&gt;The Display Color EQ model shows that moving the Gamma slider from 1.00 to 1.10 changes middle and dark-gray levels while leaving pure black and white fixed.&lt;/p&gt;

&lt;p&gt;That's why Gamma can be useful when an image feels flat or when you want to change the appearance of midtones without simply lifting the entire image.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about Hue and Tint?
&lt;/h2&gt;

&lt;p&gt;These controls exist, but I wouldn't start there.&lt;/p&gt;

&lt;p&gt;Hue rotates colors around the color wheel while leaving neutral gray unchanged.&lt;/p&gt;

&lt;p&gt;Tint shifts the balance toward green or magenta.&lt;/p&gt;

&lt;p&gt;For most everyday monitor problems, RGB, Saturation, Color Temperature, Contrast and Gamma are more immediately useful.&lt;/p&gt;

&lt;p&gt;The factory profiles in Display Color EQ keep Hue and Tint at zero.&lt;/p&gt;

&lt;p&gt;That tells you something about how I think these controls should be approached:&lt;/p&gt;

&lt;p&gt;Don't touch them unless you actually have a reason.&lt;/p&gt;

&lt;h2&gt;
  
  
  A practical "Vivid" profile
&lt;/h2&gt;

&lt;p&gt;If your complaint is simply:&lt;/p&gt;

&lt;p&gt;"My monitor looks dull."&lt;/p&gt;

&lt;p&gt;I'd start with:&lt;/p&gt;

&lt;p&gt;Brightness: 50&lt;/p&gt;

&lt;p&gt;Contrast: 52&lt;/p&gt;

&lt;p&gt;Saturation: 64&lt;/p&gt;

&lt;p&gt;Color Temperature: 6500K&lt;/p&gt;

&lt;p&gt;Red: 50&lt;/p&gt;

&lt;p&gt;Green: 50&lt;/p&gt;

&lt;p&gt;Blue: 50&lt;/p&gt;

&lt;p&gt;Gamma: 1.08&lt;/p&gt;

&lt;p&gt;Hue: 0&lt;/p&gt;

&lt;p&gt;Tint: 0&lt;/p&gt;

&lt;p&gt;Black Point: 0&lt;/p&gt;

&lt;p&gt;White Point: 0&lt;/p&gt;

&lt;p&gt;That is essentially the Vivid profile built into Display Color EQ.&lt;/p&gt;

&lt;p&gt;Then adjust Saturation downward if the result is too strong.&lt;/p&gt;

&lt;h2&gt;
  
  
  A practical "Warm" correction
&lt;/h2&gt;

&lt;p&gt;For a monitor that looks too blue, a starting point could be:&lt;/p&gt;

&lt;p&gt;Brightness: 50&lt;/p&gt;

&lt;p&gt;Contrast: 50&lt;/p&gt;

&lt;p&gt;Saturation: 50&lt;/p&gt;

&lt;p&gt;Color Temperature: 6500K&lt;/p&gt;

&lt;p&gt;Red: 50&lt;/p&gt;

&lt;p&gt;Green: 45&lt;/p&gt;

&lt;p&gt;Blue: 38&lt;/p&gt;

&lt;p&gt;Gamma: 1.00&lt;/p&gt;

&lt;p&gt;This is the RGB balance used in the application's Warm profile.&lt;/p&gt;

&lt;p&gt;If that is too warm for your monitor, bring Blue back up.&lt;/p&gt;

&lt;p&gt;If your monitor is strongly blue, you may need a slightly stronger correction.&lt;/p&gt;

&lt;h2&gt;
  
  
  A practical "Cool" correction
&lt;/h2&gt;

&lt;p&gt;For the opposite problem—a display that looks too yellow or warm—the application's Cool profile starts with:&lt;/p&gt;

&lt;p&gt;Red: 38&lt;/p&gt;

&lt;p&gt;Green: 43&lt;/p&gt;

&lt;p&gt;Blue: 50&lt;/p&gt;

&lt;p&gt;while leaving the other main controls at their neutral values.&lt;/p&gt;

&lt;p&gt;Again, the direction is what matters:&lt;/p&gt;

&lt;p&gt;Warm display → reduce Red/Green.&lt;/p&gt;

&lt;p&gt;Cool display → reduce Green/Blue.&lt;/p&gt;

&lt;p&gt;The exact amount depends on the display.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if I want a warmer night display?
&lt;/h2&gt;

&lt;p&gt;Then don't try to manually recreate everything from scratch.&lt;/p&gt;

&lt;p&gt;Display Color EQ has a Night profile using a warmer color setup.&lt;/p&gt;

&lt;p&gt;Its default guide values are:&lt;/p&gt;

&lt;p&gt;Brightness: 50&lt;/p&gt;

&lt;p&gt;Color Temperature: 6000K&lt;/p&gt;

&lt;p&gt;Red: 50&lt;/p&gt;

&lt;p&gt;Green: 24&lt;/p&gt;

&lt;p&gt;Blue: 0&lt;/p&gt;

&lt;p&gt;Panel brightness: 45&lt;/p&gt;

&lt;p&gt;The purpose is not professional color accuracy.&lt;/p&gt;

&lt;p&gt;It's simply a warmer evening display.&lt;/p&gt;

&lt;h2&gt;
  
  
  What if I want the screen dark without making it orange?
&lt;/h2&gt;

&lt;p&gt;That's where Night Shield is different.&lt;/p&gt;

&lt;p&gt;Night Shield keeps:&lt;/p&gt;

&lt;p&gt;Color Temperature: 6500K&lt;/p&gt;

&lt;p&gt;Red: 50&lt;/p&gt;

&lt;p&gt;Green: 50&lt;/p&gt;

&lt;p&gt;Blue: 50&lt;/p&gt;

&lt;p&gt;and instead uses:&lt;/p&gt;

&lt;p&gt;Black overlay: 70%&lt;/p&gt;

&lt;p&gt;Gamma: 1.10&lt;/p&gt;

&lt;p&gt;Saturation: 54&lt;/p&gt;

&lt;p&gt;with an optional lower hardware Panel brightness setting.&lt;/p&gt;

&lt;p&gt;So the screen can become much darker without introducing the strong yellow/orange appearance associated with a traditional warm night mode.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why profiles are useful
&lt;/h2&gt;

&lt;p&gt;The biggest advantage isn't necessarily the individual sliders.&lt;/p&gt;

&lt;p&gt;It's being able to save the combination.&lt;/p&gt;

&lt;p&gt;You might want:&lt;/p&gt;

&lt;p&gt;Natural for everyday work.&lt;/p&gt;

&lt;p&gt;Vivid for media.&lt;/p&gt;

&lt;p&gt;Warm for a cooler-looking monitor.&lt;/p&gt;

&lt;p&gt;Cool for a warm-looking monitor.&lt;/p&gt;

&lt;p&gt;Night for evening use.&lt;/p&gt;

&lt;p&gt;Night Shield for a very dark room.&lt;/p&gt;

&lt;p&gt;The built-in Natural profile keeps the major controls at their neutral values, including Brightness 50, Contrast 50, Saturation 50, RGB 50/50/50, Gamma 1.00 and zero overlay/point adjustments.&lt;/p&gt;

&lt;p&gt;That gives you a clean baseline before experimenting.&lt;/p&gt;

&lt;h2&gt;
  
  
  You can also think about display settings as a pipeline
&lt;/h2&gt;

&lt;p&gt;This is the way I personally find the whole subject easier to understand.&lt;/p&gt;

&lt;p&gt;First comes actual monitor brightness.&lt;/p&gt;

&lt;p&gt;Then the software display adjustment.&lt;/p&gt;

&lt;p&gt;Then color balance.&lt;/p&gt;

&lt;p&gt;Then color intensity.&lt;/p&gt;

&lt;p&gt;Then tonal shaping.&lt;/p&gt;

&lt;p&gt;Different tools affect different parts of that chain.&lt;/p&gt;

&lt;p&gt;Once you stop expecting one slider to solve every problem, monitor troubleshooting becomes much easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  What about professional color calibration?
&lt;/h2&gt;

&lt;p&gt;This is an important limitation.&lt;/p&gt;

&lt;p&gt;Display Color EQ is not a colorimeter.&lt;/p&gt;

&lt;p&gt;The app cannot directly measure the actual physical white point of your monitor.&lt;/p&gt;

&lt;p&gt;The analysis used for the app's profiles models the display and assumes certain conditions; it explicitly notes that actual monitors can differ.&lt;/p&gt;

&lt;p&gt;So if you're doing professional print production, color-critical photography or other work where measured color accuracy is essential, use proper calibration hardware and a suitable color-management workflow.&lt;/p&gt;

&lt;p&gt;For normal Windows use, however, practical display adjustment can still be very useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why not just use the monitor's built-in OSD?
&lt;/h2&gt;

&lt;p&gt;You absolutely can.&lt;/p&gt;

&lt;p&gt;For supported hardware, the monitor's own controls are often the most direct way to change actual hardware settings.&lt;/p&gt;

&lt;p&gt;The problem is convenience.&lt;/p&gt;

&lt;p&gt;I don't want to reach behind the monitor every time I switch from daytime work to gaming or nighttime browsing.&lt;/p&gt;

&lt;p&gt;I also don't want to remember several different RGB values.&lt;/p&gt;

&lt;p&gt;That's the problem Display Color EQ was designed to solve.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Display Color EQ is trying to do
&lt;/h2&gt;

&lt;p&gt;Display Color EQ brings common display controls into one Windows application:&lt;/p&gt;

&lt;p&gt;Brightness&lt;/p&gt;

&lt;p&gt;Contrast&lt;/p&gt;

&lt;p&gt;Saturation&lt;/p&gt;

&lt;p&gt;Red&lt;/p&gt;

&lt;p&gt;Green&lt;/p&gt;

&lt;p&gt;Blue&lt;/p&gt;

&lt;p&gt;Color Temperature&lt;/p&gt;

&lt;p&gt;Gamma&lt;/p&gt;

&lt;p&gt;Hue&lt;/p&gt;

&lt;p&gt;Tint&lt;/p&gt;

&lt;p&gt;Black Overlay&lt;/p&gt;

&lt;p&gt;Black Point&lt;/p&gt;

&lt;p&gt;White Point&lt;/p&gt;

&lt;p&gt;and display profiles.&lt;/p&gt;

&lt;p&gt;For monitors that support the required hardware interface, Panel brightness can also be controlled through DDC/CI.&lt;/p&gt;

&lt;p&gt;The app guide makes an important distinction here: Panel brightness is hardware backlight control, while the color sliders operate in the software display pipeline.&lt;/p&gt;

&lt;p&gt;That distinction is useful because these controls are solving different problems.&lt;/p&gt;

&lt;h2&gt;
  
  
  A simple troubleshooting order
&lt;/h2&gt;

&lt;p&gt;When my monitor looks wrong, I don't randomly move sliders.&lt;/p&gt;

&lt;p&gt;I usually work through the problem in this order:&lt;/p&gt;

&lt;p&gt;First, check the monitor's own picture mode.&lt;/p&gt;

&lt;p&gt;Then check HDR and Night Light.&lt;/p&gt;

&lt;p&gt;Then check the Windows color profile.&lt;/p&gt;

&lt;p&gt;Then adjust actual brightness.&lt;/p&gt;

&lt;p&gt;Then contrast.&lt;/p&gt;

&lt;p&gt;Then color temperature.&lt;/p&gt;

&lt;p&gt;Then RGB.&lt;/p&gt;

&lt;p&gt;Then saturation.&lt;/p&gt;

&lt;p&gt;Finally, gamma and the more specialized controls.&lt;/p&gt;

&lt;p&gt;This makes it much easier to identify what actually changed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Don't assume a specific number is perfect for every monitor
&lt;/h2&gt;

&lt;p&gt;This is probably the biggest lesson I've learned from working with display settings.&lt;/p&gt;

&lt;p&gt;Someone can post:&lt;/p&gt;

&lt;p&gt;"Use RGB 50 / 45 / 38."&lt;/p&gt;

&lt;p&gt;and it can look perfect on their monitor.&lt;/p&gt;

&lt;p&gt;You can use exactly the same values and get a completely different result.&lt;/p&gt;

&lt;p&gt;Panel characteristics vary.&lt;/p&gt;

&lt;p&gt;Backlights vary.&lt;/p&gt;

&lt;p&gt;Factory presets vary.&lt;/p&gt;

&lt;p&gt;The connection and display pipeline can vary.&lt;/p&gt;

&lt;p&gt;Even two units of the same model can behave differently.&lt;/p&gt;

&lt;p&gt;So use numbers as starting points, not universal truth.&lt;/p&gt;

&lt;h2&gt;
  
  
  A better way to find your settings
&lt;/h2&gt;

&lt;p&gt;Make one change.&lt;/p&gt;

&lt;p&gt;Look at white.&lt;/p&gt;

&lt;p&gt;Look at gray.&lt;/p&gt;

&lt;p&gt;Look at a photograph.&lt;/p&gt;

&lt;p&gt;Look at a dark scene.&lt;/p&gt;

&lt;p&gt;Then decide whether the change actually helped.&lt;/p&gt;

&lt;p&gt;If you make six changes at once and the picture suddenly looks better, you won't know which change was responsible.&lt;/p&gt;

&lt;p&gt;Small adjustments are much easier to understand.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where to get Display Color EQ
&lt;/h2&gt;

&lt;p&gt;I built Display Color EQ specifically for this type of everyday Windows display problem.&lt;/p&gt;

&lt;p&gt;You can get it from the Microsoft Store by searching for:&lt;/p&gt;

&lt;p&gt;Display Color EQ&lt;/p&gt;

&lt;p&gt;or use the Microsoft Store listing:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://apps.microsoft.com/detail/9PPGMT2D1CL9" rel="noopener noreferrer"&gt;Display Color EQ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The app is designed for users who want more control over how their monitor looks without constantly digging through the monitor's physical menu.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;A monitor that looks bad doesn't always need to be replaced.&lt;/p&gt;

&lt;p&gt;Sometimes it is too blue.&lt;/p&gt;

&lt;p&gt;Sometimes it is too yellow.&lt;/p&gt;

&lt;p&gt;Sometimes the colors are simply too weak.&lt;/p&gt;

&lt;p&gt;Sometimes the contrast is wrong.&lt;/p&gt;

&lt;p&gt;Sometimes gamma makes everything look flat.&lt;/p&gt;

&lt;p&gt;Sometimes the monitor is fine, but the Windows configuration or color profile isn't what you expected.&lt;/p&gt;

&lt;p&gt;And sometimes the biggest problem is simply that Windows doesn't give you an easy brightness control for your external monitor.&lt;/p&gt;

&lt;p&gt;These are different problems, so they need different controls.&lt;/p&gt;

&lt;p&gt;Brightness for brightness.&lt;/p&gt;

&lt;p&gt;RGB for color balance.&lt;/p&gt;

&lt;p&gt;Color temperature for warm/cool adjustment.&lt;/p&gt;

&lt;p&gt;Saturation for color intensity.&lt;/p&gt;

&lt;p&gt;Contrast for separation.&lt;/p&gt;

&lt;p&gt;Gamma for tonal shaping.&lt;/p&gt;

&lt;p&gt;Black overlay for strong software dimming.&lt;/p&gt;

&lt;p&gt;Panel brightness for supported hardware backlight control.&lt;/p&gt;

&lt;p&gt;Once you look at the problem this way, monitor adjustment becomes much less mysterious.&lt;/p&gt;

&lt;p&gt;You don't need to find one magical "best monitor setting."&lt;/p&gt;

&lt;p&gt;You need to understand what looks wrong, identify the control responsible for it, and make a small adjustment.&lt;/p&gt;

&lt;p&gt;That's the idea behind Display Color EQ.&lt;/p&gt;

</description>
      <category>hardware</category>
      <category>howto</category>
      <category>tools</category>
    </item>
    <item>
      <title>How to Preview JSX, TSX, Vue &amp; Markdown Files Without Setting Up a Full Project</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Thu, 13 Aug 2026 16:17:16 +0000</pubDate>
      <link>https://dev.to/make-with-rs/how-to-preview-jsx-tsx-vue-markdown-files-without-setting-up-a-full-project-18i3</link>
      <guid>https://dev.to/make-with-rs/how-to-preview-jsx-tsx-vue-markdown-files-without-setting-up-a-full-project-18i3</guid>
      <description>&lt;p&gt;There is a small problem that many developers encounter but rarely talk about:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You have a file, but you don't have an easy way to see what it looks like.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This became especially noticeable to me after I started using AI coding tools.&lt;/p&gt;

&lt;p&gt;Today, you can ask an AI to generate a dashboard, landing page, settings screen, portfolio, or even an entire application UI. Instead of getting a single HTML file, the AI may give you something like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;App.jsx
Dashboard.tsx
Login.vue
README.md
styles.scss
icon.svg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Opening the file is easy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Previewing it is a different story.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That problem is what led me to build &lt;strong&gt;Preview Kit&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The JSX problem
&lt;/h2&gt;

&lt;p&gt;Imagine that you ask an AI:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Create a modern SaaS dashboard using React.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A few seconds later, you get a file called:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Dashboard.jsx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you want to see the interface.&lt;/p&gt;

&lt;p&gt;With HTML, the workflow is familiar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html → double-click → browser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With JSX, things can become much more complicated.&lt;/p&gt;

&lt;p&gt;JSX is used to describe React UI, so simply opening the file as a normal document does not automatically give you the rendered React interface. Depending on what the file contains, you may need a React environment, dependencies, a bundler, or a development server.&lt;/p&gt;

&lt;p&gt;There are already browser extensions specifically designed around the problem of previewing standalone JSX/TSX files without setting up a React development environment, which is a good indication that this is a real workflow problem rather than a theoretical one.&lt;/p&gt;

&lt;p&gt;But I kept thinking:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why do I need to create a complete development environment just to preview one file?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  AI made this problem more common
&lt;/h2&gt;

&lt;p&gt;Before AI coding became mainstream, I usually started with a project.&lt;/p&gt;

&lt;p&gt;Now I often start with a prompt.&lt;/p&gt;

&lt;p&gt;The workflow can look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Idea
  ↓
Ask AI
  ↓
AI generates JSX/TSX
  ↓
I want to see the result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The generation part is incredibly fast.&lt;/p&gt;

&lt;p&gt;The problem comes at the last step.&lt;/p&gt;

&lt;p&gt;You have the code, but you still need to figure out how to preview it.&lt;/p&gt;

&lt;p&gt;This has become particularly relevant with AI-generated UI experiments. Developers are increasingly receiving standalone JSX and TSX files from AI tools and looking for ways to inspect those files without creating a complete application around them.&lt;/p&gt;

&lt;p&gt;That led me to a simple question:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;What if previewing a code file could be as easy as opening an image?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  JSX isn't the only file with this problem
&lt;/h2&gt;

&lt;p&gt;Once I started working on this idea, I realized that JSX was only one part of the problem.&lt;/p&gt;

&lt;p&gt;Modern development involves many different file formats.&lt;/p&gt;

&lt;h3&gt;
  
  
  TSX
&lt;/h3&gt;

&lt;p&gt;React projects frequently use TypeScript with JSX, producing &lt;code&gt;.tsx&lt;/code&gt; files.&lt;/p&gt;

&lt;p&gt;You can open a TSX file in an editor, but opening it as text and actually seeing the rendered UI are two different things.&lt;/p&gt;

&lt;h3&gt;
  
  
  Vue
&lt;/h3&gt;

&lt;p&gt;Vue components commonly use &lt;code&gt;.vue&lt;/code&gt; single-file components.&lt;/p&gt;

&lt;p&gt;They contain templates, scripts and styles together.&lt;/p&gt;

&lt;p&gt;Again, sometimes you don't want to start a complete Vue project.&lt;/p&gt;

&lt;p&gt;You just want to inspect the component.&lt;/p&gt;

&lt;h3&gt;
  
  
  Markdown
&lt;/h3&gt;

&lt;p&gt;Markdown is another perfect example.&lt;/p&gt;

&lt;p&gt;A file might contain:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# My Project&lt;/span&gt;

This is an &lt;span class="gs"&gt;**important**&lt;/span&gt; note.
&lt;span class="p"&gt;
-&lt;/span&gt; First item
&lt;span class="p"&gt;-&lt;/span&gt; Second item
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Opening the file as plain text shows the Markdown syntax.&lt;/p&gt;

&lt;p&gt;But what you really want to see is the rendered document.&lt;/p&gt;

&lt;p&gt;This is why Markdown preview functionality is so common in developer tools. Even dedicated file-preview libraries provide separate Markdown rendering instead of treating &lt;code&gt;.md&lt;/code&gt; files as ordinary text.&lt;/p&gt;

&lt;h3&gt;
  
  
  SVG
&lt;/h3&gt;

&lt;p&gt;SVG creates another interesting situation.&lt;/p&gt;

&lt;p&gt;An SVG file is technically text/XML, but when you're working with an icon or illustration, you usually don't want to inspect hundreds of lines of XML.&lt;/p&gt;

&lt;p&gt;You want to see:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;the image.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  So I built Preview Kit
&lt;/h2&gt;

&lt;p&gt;The idea behind &lt;strong&gt;Preview Kit&lt;/strong&gt; is simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;If I have the file, I should be able to preview the file without turning it into a full project first.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Preview Kit is a Windows application designed around quick file previewing.&lt;/p&gt;

&lt;p&gt;It supports formats such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and more.&lt;/p&gt;

&lt;p&gt;The goal isn't to replace your IDE.&lt;/p&gt;

&lt;p&gt;It isn't trying to replace React.&lt;/p&gt;

&lt;p&gt;It isn't trying to replace Vue.&lt;/p&gt;

&lt;p&gt;And it isn't another full development environment.&lt;/p&gt;

&lt;p&gt;It solves a much smaller problem:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You already have the file. You just want to see it.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  A different workflow for AI-generated code
&lt;/h2&gt;

&lt;p&gt;Here's where I think tools like Preview Kit become especially useful.&lt;/p&gt;

&lt;p&gt;Suppose you ask an AI to design a login page.&lt;/p&gt;

&lt;p&gt;The AI returns:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;LoginPage.jsx
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Instead of immediately creating a React project, installing packages and configuring a development environment, you can first preview the file.&lt;/p&gt;

&lt;p&gt;Then you can decide whether the design is actually useful.&lt;/p&gt;

&lt;p&gt;Maybe the sidebar is too large.&lt;/p&gt;

&lt;p&gt;Maybe the buttons are too small.&lt;/p&gt;

&lt;p&gt;Maybe the spacing looks wrong.&lt;/p&gt;

&lt;p&gt;Maybe you want a completely different layout.&lt;/p&gt;

&lt;p&gt;You can send that feedback back to the AI.&lt;/p&gt;

&lt;p&gt;Then preview the next version.&lt;/p&gt;

&lt;p&gt;The workflow becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Prompt
   ↓
AI generates UI
   ↓
Preview
   ↓
Give feedback
   ↓
AI improves UI
   ↓
Preview again
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That feedback loop can be much faster when you are experimenting with designs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preview first. Build later.
&lt;/h2&gt;

&lt;p&gt;This is the part that matters most to me.&lt;/p&gt;

&lt;p&gt;A generated component is not always a finished application.&lt;/p&gt;

&lt;p&gt;Sometimes it is just an experiment.&lt;/p&gt;

&lt;p&gt;Sometimes it is a mockup.&lt;/p&gt;

&lt;p&gt;Sometimes it is a prototype.&lt;/p&gt;

&lt;p&gt;Sometimes you just want to know:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;“Does this look good?”&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Creating an entire React or Vue project for every small experiment adds friction.&lt;/p&gt;

&lt;p&gt;A lightweight preview workflow lets you separate two things:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Seeing what something looks like&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;from&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Building it into a real application&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Those are not always the same task.&lt;/p&gt;

&lt;h2&gt;
  
  
  Previewing developer files should be easier
&lt;/h2&gt;

&lt;p&gt;We already accept this idea for many other file types.&lt;/p&gt;

&lt;p&gt;You double-click an image and see the image.&lt;/p&gt;

&lt;p&gt;You open a PDF and see the document.&lt;/p&gt;

&lt;p&gt;You open a video and watch the video.&lt;/p&gt;

&lt;p&gt;So when someone gives you a frontend component, why should the first step be:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Install Node.&lt;/p&gt;

&lt;p&gt;Create a project.&lt;/p&gt;

&lt;p&gt;Install dependencies.&lt;/p&gt;

&lt;p&gt;Configure the tooling.&lt;/p&gt;

&lt;p&gt;Start a server.&lt;/p&gt;

&lt;p&gt;Then finally see the component.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes that's necessary.&lt;/p&gt;

&lt;p&gt;But sometimes it feels like using a construction site just to look at a chair.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who is Preview Kit for?
&lt;/h2&gt;

&lt;p&gt;Preview Kit was originally inspired by my own problem, but I think it can be useful for several types of users.&lt;/p&gt;

&lt;h3&gt;
  
  
  AI-assisted developers
&lt;/h3&gt;

&lt;p&gt;If you frequently use ChatGPT, Claude, Gemini, Cursor, or other AI coding tools, you may regularly receive JSX, TSX, HTML, Vue, Markdown or other frontend files.&lt;/p&gt;

&lt;p&gt;Preview Kit gives you a faster way to inspect them.&lt;/p&gt;

&lt;h3&gt;
  
  
  Frontend developers
&lt;/h3&gt;

&lt;p&gt;Sometimes you're debugging or testing an individual component and don't want to spend time rebuilding a full environment just for a quick inspection.&lt;/p&gt;

&lt;h3&gt;
  
  
  Designers
&lt;/h3&gt;

&lt;p&gt;Developers increasingly send design concepts as actual frontend code.&lt;/p&gt;

&lt;p&gt;A quick preview can make it easier to review those ideas.&lt;/p&gt;

&lt;h3&gt;
  
  
  Beginners
&lt;/h3&gt;

&lt;p&gt;Learning React or Vue can involve a lot of setup.&lt;/p&gt;

&lt;p&gt;Being able to inspect a component without immediately understanding the entire toolchain can make experimentation less intimidating.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1kezlm9ua36qhw7sqy1b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1kezlm9ua36qhw7sqy1b.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Anyone working with developer files
&lt;/h3&gt;

&lt;p&gt;You may not even be a frontend developer.&lt;/p&gt;

&lt;p&gt;You may just have a &lt;code&gt;.md&lt;/code&gt;, &lt;code&gt;.svg&lt;/code&gt;, &lt;code&gt;.json&lt;/code&gt;, &lt;code&gt;.css&lt;/code&gt;, &lt;code&gt;.scss&lt;/code&gt; or other file and want to see its contents in a useful form.&lt;/p&gt;

&lt;h2&gt;
  
  
  The original reason I built it
&lt;/h2&gt;

&lt;p&gt;The story behind Preview Kit is actually pretty simple.&lt;/p&gt;

&lt;p&gt;I was building a Windows application using AI.&lt;/p&gt;

&lt;p&gt;Like many people, I asked the AI to create a demo UI for me.&lt;/p&gt;

&lt;p&gt;Instead of giving me an HTML file, it gave me a JSX file.&lt;/p&gt;

&lt;p&gt;That was new to me.&lt;/p&gt;

&lt;p&gt;I had always worked with HTML, so opening an HTML file was trivial.&lt;/p&gt;

&lt;p&gt;But when I tried to open the JSX file, I realized that the same workflow didn't apply.&lt;/p&gt;

&lt;p&gt;So I searched:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;How do I open a JSX file?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I searched Google.&lt;/p&gt;

&lt;p&gt;I asked AI.&lt;/p&gt;

&lt;p&gt;I looked at different approaches.&lt;/p&gt;

&lt;p&gt;Most of the answers were focused on setting up React or using a development environment.&lt;/p&gt;

&lt;p&gt;But that wasn't really what I was looking for.&lt;/p&gt;

&lt;p&gt;I wasn't trying to become a React build-system expert.&lt;/p&gt;

&lt;p&gt;I simply wanted to &lt;strong&gt;see the UI that the AI had generated&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Then I had an idea.&lt;/p&gt;

&lt;p&gt;If I had this problem, other people using AI-generated code would probably have it too.&lt;/p&gt;

&lt;p&gt;And if JSX had this problem, other modern file formats probably did as well.&lt;/p&gt;

&lt;p&gt;That's where the idea for Preview Kit started.&lt;/p&gt;

&lt;h2&gt;
  
  
  The bigger idea
&lt;/h2&gt;

&lt;p&gt;I don't think the future of software development is only about writing more code.&lt;/p&gt;

&lt;p&gt;It's also about reducing the friction around the code that AI generates.&lt;/p&gt;

&lt;p&gt;AI can generate a file in seconds.&lt;/p&gt;

&lt;p&gt;The next challenge is often understanding, previewing, reviewing and iterating on that file.&lt;/p&gt;

&lt;p&gt;Tools that make those steps easier can become useful parts of the AI-assisted development workflow.&lt;/p&gt;

&lt;p&gt;Preview Kit is my attempt at solving one small part of that problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it when you just want to see the file
&lt;/h2&gt;

&lt;p&gt;The next time an AI gives you something like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;component.jsx
page.tsx
Button.vue
README.md
styles.scss
icon.svg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;before creating a whole new project, ask yourself:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do I really need the full environment right now?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Maybe you just need a preview.&lt;/p&gt;

&lt;p&gt;That's the idea behind Preview Kit.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Open the file. Preview it. Decide what to do next.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Preview Kit is available for Windows through the Microsoft Store.&lt;/p&gt;

&lt;p&gt;Get &lt;a href="https://apps.microsoft.com/store/detail/9n8j3h54z4mf" rel="noopener noreferrer"&gt;Preview Kit&lt;/a&gt; on the Microsoft Store &lt;/p&gt;

</description>
      <category>ai</category>
      <category>javascript</category>
      <category>html</category>
      <category>vue</category>
    </item>
    <item>
      <title>Windows Doesn't Have a Real Internet Speed Meter... So I Built One</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Sat, 04 Jul 2026 19:09:12 +0000</pubDate>
      <link>https://dev.to/make-with-rs/windows-doesnt-have-a-real-internet-speed-meter-so-i-built-one-3n30</link>
      <guid>https://dev.to/make-with-rs/windows-doesnt-have-a-real-internet-speed-meter-so-i-built-one-3n30</guid>
      <description>&lt;p&gt;One thing that always surprised me about Windows is that there's no simple way to see your internet speed in real time.&lt;/p&gt;

&lt;p&gt;Yes, &lt;strong&gt;Task Manager&lt;/strong&gt; shows network activity.&lt;/p&gt;

&lt;p&gt;Yes, &lt;strong&gt;Settings&lt;/strong&gt; shows data usage.&lt;/p&gt;

&lt;p&gt;But neither gives you a small, always-visible internet speed meter that you can glance at while working, gaming, or downloading files.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;I wanted something that could answer these questions instantly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Is my internet actually slow?&lt;/li&gt;
&lt;li&gt;Is something downloading in the background?&lt;/li&gt;
&lt;li&gt;How much data have I used today?&lt;/li&gt;
&lt;li&gt;Why is my bandwidth suddenly maxed out?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Windows couldn't answer these without opening multiple windows.&lt;/p&gt;

&lt;h2&gt;
  
  
  So I Built &lt;a href="https://apps.microsoft.com/detail/9N9NFRWKTH8L?hl" rel="noopener noreferrer"&gt;Internet Usage Tracker&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Instead of a complex network analyzer, I wanted something simple and clean.&lt;/p&gt;

&lt;p&gt;The app includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 Real-time upload &amp;amp; download speed&lt;/li&gt;
&lt;li&gt;📊 Daily internet usage tracking&lt;/li&gt;
&lt;li&gt;🖥️ A beautiful customizable floating speed meter&lt;/li&gt;
&lt;li&gt;⚡ Lightweight performance with minimal resource usage&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The best part is that the speed meter blends naturally with your desktop, making it feel like a native Windows widget instead of another bulky application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who Is It For?
&lt;/h2&gt;

&lt;p&gt;This tool is useful if you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Download large files regularly&lt;/li&gt;
&lt;li&gt;Play online games&lt;/li&gt;
&lt;li&gt;Work from home&lt;/li&gt;
&lt;li&gt;Stream videos&lt;/li&gt;
&lt;li&gt;Have a limited internet plan&lt;/li&gt;
&lt;li&gt;Simply want to monitor your connection in real time&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;If you've ever searched for &lt;strong&gt;"How to show internet speed on Windows 10"&lt;/strong&gt;, &lt;strong&gt;"Internet speed meter for Windows 11"&lt;/strong&gt;, or &lt;strong&gt;"How to monitor internet usage on PC"&lt;/strong&gt;, this is exactly why I created &lt;strong&gt;&lt;a href="https://apps.microsoft.com/detail/9N9NFRWKTH8L?hl" rel="noopener noreferrer"&gt;Internet Usage Tracker&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I'd love to hear your feedback.&lt;/p&gt;

&lt;p&gt;What feature would make an internet speed meter perfect for you?&lt;/p&gt;

</description>
      <category>windows</category>
      <category>productivity</category>
      <category>software</category>
      <category>tool</category>
    </item>
    <item>
      <title>AI Generates the Code. PreviewKit Lets You See It Instantly.</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Sat, 04 Jul 2026 18:44:48 +0000</pubDate>
      <link>https://dev.to/make-with-rs/ai-generates-the-code-previewkit-lets-you-see-it-instantly-3kc0</link>
      <guid>https://dev.to/make-with-rs/ai-generates-the-code-previewkit-lets-you-see-it-instantly-3kc0</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp984r4qz196r3hmbui3w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fp984r4qz196r3hmbui3w.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;AI coding assistants have changed the way I build frontend applications.&lt;/p&gt;

&lt;p&gt;Instead of spending 30 minutes creating a UI component, I can describe what I want and get a React or Vue component in seconds.&lt;/p&gt;

&lt;p&gt;That's amazing.&lt;/p&gt;

&lt;p&gt;But I noticed something interesting.&lt;/p&gt;

&lt;p&gt;The faster AI became at generating code, the more obvious one old problem became:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Previewing that code was still slow.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Productivity Gap
&lt;/h2&gt;

&lt;p&gt;Imagine this workflow.&lt;/p&gt;

&lt;p&gt;You ask an AI to create a pricing card.&lt;/p&gt;

&lt;p&gt;It generates a JSX file.&lt;/p&gt;

&lt;p&gt;Now you want to know one thing:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Does it actually look good?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Instead of seeing the answer immediately, you have to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Create a React project&lt;/li&gt;
&lt;li&gt;Install dependencies&lt;/li&gt;
&lt;li&gt;Copy the component&lt;/li&gt;
&lt;li&gt;Run the development server&lt;/li&gt;
&lt;li&gt;Wait for everything to load&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ironically, previewing the component often takes longer than generating it.&lt;/p&gt;

&lt;p&gt;That doesn't make sense anymore.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Idea Behind &lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;I wanted something much simpler.&lt;/p&gt;

&lt;p&gt;I wanted frontend files to behave like normal files.&lt;/p&gt;

&lt;p&gt;Double-click.&lt;/p&gt;

&lt;p&gt;Open.&lt;/p&gt;

&lt;p&gt;Preview.&lt;/p&gt;

&lt;p&gt;Done.&lt;/p&gt;

&lt;p&gt;That's exactly what &lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; is designed to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  More Than Just JSX
&lt;/h2&gt;

&lt;p&gt;Although &lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; started as an idea for React developers, I quickly realized the same problem exists across different frontend technologies.&lt;/p&gt;

&lt;p&gt;That's why &lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; supports:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JSX&lt;/li&gt;
&lt;li&gt;Vue&lt;/li&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Whether you're testing an AI-generated component, reviewing a teammate's work, or opening an old UI prototype, the experience should be identical.&lt;/p&gt;

&lt;p&gt;No setup.&lt;/p&gt;

&lt;p&gt;No configuration.&lt;/p&gt;

&lt;p&gt;No unnecessary steps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why This Matters
&lt;/h2&gt;

&lt;p&gt;The future of development isn't just about writing code.&lt;/p&gt;

&lt;p&gt;It's about reviewing, testing, and iterating faster.&lt;/p&gt;

&lt;p&gt;AI has accelerated code generation.&lt;/p&gt;

&lt;p&gt;Developer tools now need to accelerate everything that comes after it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; helps close that gap by making visual feedback almost instant.&lt;/p&gt;

&lt;h2&gt;
  
  
  Built for Everyday Development
&lt;/h2&gt;

&lt;p&gt;I didn't build &lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; for massive enterprise projects.&lt;/p&gt;

&lt;p&gt;I built it for everyday moments.&lt;/p&gt;

&lt;p&gt;Opening a component.&lt;/p&gt;

&lt;p&gt;Checking a layout.&lt;/p&gt;

&lt;p&gt;Reviewing a UI.&lt;/p&gt;

&lt;p&gt;Testing an idea.&lt;/p&gt;

&lt;p&gt;Those are tasks we perform constantly.&lt;/p&gt;

&lt;p&gt;Removing friction from those moments makes development feel noticeably smoother.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Some tools try to solve everything.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://apps.microsoft.com/detail/9N8J3H54Z4MF?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;PreviewKit&lt;/a&gt; focuses on solving one problem really well.&lt;/p&gt;

&lt;p&gt;Opening frontend files shouldn't require creating an entire project.&lt;/p&gt;

&lt;p&gt;It should be as simple as opening an image.&lt;/p&gt;

&lt;p&gt;That's the experience I'm trying to build.&lt;/p&gt;

&lt;p&gt;If you're constantly working with JSX, Vue, or HTML files, I'd love to know:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How do you currently preview standalone components?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>vue</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>How I Built an AI-Powered Windows App to Automate Image SEO</title>
      <dc:creator>R Shahriar</dc:creator>
      <pubDate>Sat, 04 Jul 2026 18:23:25 +0000</pubDate>
      <link>https://dev.to/make-with-rs/how-i-built-an-ai-powered-windows-app-to-automate-image-seo-109h</link>
      <guid>https://dev.to/make-with-rs/how-i-built-an-ai-powered-windows-app-to-automate-image-seo-109h</guid>
      <description>&lt;p&gt;If you've ever managed a large collection of images, you've probably experienced this.&lt;/p&gt;

&lt;p&gt;Editing the images is only half the job.&lt;/p&gt;

&lt;p&gt;After exporting them, you still need to add:&lt;/p&gt;

&lt;p&gt;Titles&lt;br&gt;
Descriptions&lt;br&gt;
Alt text&lt;br&gt;
Keywords&lt;br&gt;
IPTC/XMP metadata&lt;/p&gt;

&lt;p&gt;For a handful of images, that's manageable.&lt;/p&gt;

&lt;p&gt;For hundreds of images, it becomes one of the most repetitive tasks in the entire workflow.&lt;/p&gt;

&lt;p&gt;The Problem&lt;/p&gt;

&lt;p&gt;I searched for a Windows application that could:&lt;/p&gt;

&lt;p&gt;Generate image metadata with AI&lt;br&gt;
Write IPTC and XMP metadata directly into image files&lt;br&gt;
Process multiple images in bulk&lt;br&gt;
Still allow full manual editing&lt;/p&gt;

&lt;p&gt;I found tools that handled parts of the workflow.&lt;/p&gt;

&lt;p&gt;Some could edit metadata.&lt;/p&gt;

&lt;p&gt;Some could generate AI text.&lt;/p&gt;

&lt;p&gt;But I couldn't find one focused on Image SEO from start to finish.&lt;/p&gt;

&lt;p&gt;So I decided to build it myself.&lt;/p&gt;

&lt;p&gt;Building &lt;a href="https://apps.microsoft.com/detail/9P189CZTZF3B?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;Image SEO AI&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The project eventually became &lt;a href="https://apps.microsoft.com/detail/9P189CZTZF3B?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;Image SEO AI&lt;/a&gt;, a Windows desktop application built specifically for creators who need to optimize image metadata.&lt;/p&gt;

&lt;p&gt;Instead of replacing existing photo editors, the goal was to eliminate repetitive metadata work.&lt;/p&gt;

&lt;p&gt;Today, the application can:&lt;/p&gt;

&lt;p&gt;Generate image titles with AI&lt;br&gt;
Create SEO-friendly descriptions&lt;br&gt;
Generate alt text&lt;br&gt;
Suggest relevant keywords&lt;br&gt;
Write IPTC &amp;amp; XMP metadata&lt;br&gt;
Process up to 50 images in a single batch&lt;br&gt;
Support both AI-assisted and manual editing&lt;br&gt;
One Challenge I Didn't Expect&lt;/p&gt;

&lt;p&gt;The biggest challenge wasn't AI.&lt;/p&gt;

&lt;p&gt;It was designing a workflow that still felt familiar.&lt;/p&gt;

&lt;p&gt;Many users don't want AI to make every decision.&lt;/p&gt;

&lt;p&gt;Sometimes they just want a better starting point.&lt;/p&gt;

&lt;p&gt;That's why every AI-generated field can be edited before saving.&lt;/p&gt;

&lt;p&gt;The application is designed to speed up repetitive work—not remove user control.&lt;/p&gt;

&lt;p&gt;Lessons Learned&lt;/p&gt;

&lt;p&gt;Building this project taught me a few things.&lt;/p&gt;

&lt;p&gt;AI works best as an assistant, not a replacement.&lt;br&gt;
Small workflow improvements can save hours every week.&lt;br&gt;
Metadata management is still an underserved problem.&lt;br&gt;
Simplicity often matters more than adding more features.&lt;br&gt;
What's Next?&lt;/p&gt;

&lt;p&gt;I'm continuing to improve &lt;a href="https://apps.microsoft.com/detail/9P189CZTZF3B?hl=en-us&amp;amp;gl=BD&amp;amp;ocid=pdpshare" rel="noopener noreferrer"&gt;Image SEO AI&lt;/a&gt; based on user feedback.&lt;/p&gt;

&lt;p&gt;Some of the features I'm currently exploring include:&lt;/p&gt;

&lt;p&gt;Smarter keyword suggestions&lt;br&gt;
Additional metadata standards&lt;br&gt;
Better AI prompts&lt;br&gt;
More bulk automation&lt;br&gt;
Improved export options&lt;/p&gt;

&lt;p&gt;If you regularly work with images, I'd love to hear how you currently handle metadata.&lt;/p&gt;

&lt;p&gt;Is there a feature you wish existing tools had?&lt;/p&gt;

&lt;p&gt;I'm always looking for ideas from developers, photographers, marketers, and content creators.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>seo</category>
      <category>microsoft</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
