Your README Screenshots Are From 3 Versions Ago

I was evaluating an open source library last week. The README had four screenshots showing the UI. The actual UI looked completely different. Different layout, different colors, different sidebar. I almost closed the tab because I thought I was looking at the wrong project. This is incredibly common. Open source maintainers take README screenshots once, when they're excited about the project. Then never again. Because updating them means: Run the app locally Get it into the right state Take screenshots Crop and resize Commit the new images Hope the markdown paths still work Automate it Define your README screenshots in config: { "screenshots" : [ { "name" : "dashboard" , "url" : "http://localhost:3000/dashboard" , "selector" : ".main-content" }, { "name" : "settings" , "url" : "http://localhost:3000/settings" , "selector" : ".settings-form" , "viewports" : [ "desktop" , "mobile" ] } ] } Update them: npx heroshot Generate the markdown Instead of writing image tags manually, use the snip