<?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: Oliger Chen</title>
    <description>The latest articles on DEV Community by Oliger Chen (@oligerchen).</description>
    <link>https://dev.to/oligerchen</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%2F4228297%2F0536658d-432f-4080-8e02-78a402b0026e.png</url>
      <title>DEV Community: Oliger Chen</title>
      <link>https://dev.to/oligerchen</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/oligerchen"/>
    <language>en</language>
    <item>
      <title>How to Update Text in Documentation Screenshots Without Starting Over</title>
      <dc:creator>Oliger Chen</dc:creator>
      <pubDate>Fri, 06 Nov 2026 01:24:03 +0000</pubDate>
      <link>https://dev.to/oligerchen/how-to-update-text-in-documentation-screenshots-without-starting-over-5ec8</link>
      <guid>https://dev.to/oligerchen/how-to-update-text-in-documentation-screenshots-without-starting-over-5ec8</guid>
      <description>&lt;p&gt;A button gets renamed. A settings page gets a new label. Your documentation is still accurate, but the screenshot now tells readers to look for something that no longer exists.&lt;/p&gt;

&lt;p&gt;Retaking the screenshot sounds easy—until you need to recreate the right account, populate the demo data, navigate to the correct screen, and match the original crop.&lt;/p&gt;

&lt;p&gt;For a small wording change, editing the existing image can be a useful option. The key is knowing when that shortcut is appropriate and checking that the result still represents the product accurately.&lt;/p&gt;

&lt;p&gt;This guide walks through that decision and a practical workflow for making a focused text update.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The example below uses a fictional application screen and a hypothetical interface change to explain the workflow.&lt;/em&gt;&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%2F2dp51rjsgkna1zztg5rb.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%2F2dp51rjsgkna1zztg5rb.png" alt="Full-screen comparison of the original fictional interface and the supplied PicText result" width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Left: the original fictional application screen. Right: the supplied PicText result. The main heading changes from “Team settings” to “Workspace settings”; surrounding details also need review.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  First, decide whether to edit or recapture
&lt;/h2&gt;

&lt;p&gt;Before opening an image editor, check what actually changed in the product.&lt;/p&gt;

&lt;p&gt;A screenshot helps readers connect written instructions with a real interface. Your update should preserve that connection.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;What changed?&lt;/th&gt;
&lt;th&gt;Recommended approach&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;A typo in an explanatory image&lt;/td&gt;
&lt;td&gt;Edit the text&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;A label changed, but its position and behavior stayed the same&lt;/td&gt;
&lt;td&gt;Consider a focused text edit&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;A button moved or a menu was reorganized&lt;/td&gt;
&lt;td&gt;Capture a new screenshot&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;The workflow or available options changed&lt;/td&gt;
&lt;td&gt;Capture a new screenshot and review the instructions&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Several parts of the interface changed&lt;/td&gt;
&lt;td&gt;Recreate the screenshot&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Also check whether you have a better source available. If the image came from an editable design file, updating that file may be straightforward. If your project already generates documentation screenshots automatically, regenerate the affected image.&lt;/p&gt;

&lt;p&gt;Direct image editing is most useful when you have a finished screenshot, a small correction, and no convenient way to reproduce the original scene.&lt;/p&gt;

&lt;h2&gt;
  
  
  An example: a renamed settings label
&lt;/h2&gt;

&lt;p&gt;Consider a tutorial with this instruction:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Open &lt;strong&gt;Team settings&lt;/strong&gt;, then select &lt;strong&gt;Members&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The product now calls the same page &lt;strong&gt;Workspace settings&lt;/strong&gt;. Its location and behavior have stayed the same.&lt;/p&gt;

&lt;p&gt;You have two things to update:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The written instruction.&lt;/li&gt;
&lt;li&gt;The label visible in the screenshot.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Changing only the paragraph leaves readers comparing two different names. Changing only the image creates the same problem in reverse.&lt;/p&gt;

&lt;p&gt;Before editing, open the current application and confirm the exact wording, capitalization, and location. Use that interface as your reference throughout the update.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make the smallest useful change
&lt;/h2&gt;

&lt;p&gt;For this kind of task, the &lt;a href="https://pictext.ai/screenshot-editor/" rel="noopener noreferrer"&gt;PicText screenshot editor&lt;/a&gt; lets you work directly with text already embedded in an image.&lt;/p&gt;

&lt;p&gt;The basic workflow is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Upload the original screenshot.&lt;/li&gt;
&lt;li&gt;Identify the text you want to replace.&lt;/li&gt;
&lt;li&gt;Enter the replacement wording.&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;Edit&lt;/strong&gt; to generate the edited image.&lt;/li&gt;
&lt;li&gt;Compare it with the original before downloading.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can enter the existing wording manually or use AI text detection to help identify readable text.&lt;/p&gt;

&lt;p&gt;For our example, the replacement would be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Existing text: &lt;code&gt;Team settings&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;New text: &lt;code&gt;Workspace settings&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Keep the edit focused on that label. A narrow change is easier to review than several unrelated updates made at once.&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%2Fmubfbpdev5kpit1ld0oa.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%2Fmubfbpdev5kpit1ld0oa.png" alt="Actual PicText editor showing the source image and Manual Edit text replacement fields" width="800" height="514"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Actual PicText editor showing the source image and Manual Edit text replacement fields&lt;br&gt;
The actual PicText editor in Manual Edit mode. The replacement field is horizontally clipped in this capture; the intended replacement is “Workspace settings”.&lt;/p&gt;

&lt;h2&gt;
  
  
  Review the result beyond the new words
&lt;/h2&gt;

&lt;p&gt;A successful edit needs more than correct spelling.&lt;/p&gt;

&lt;p&gt;Image editing tools can approximate the original appearance, but exact font matching and unchanged surrounding details are not guaranteed. A longer replacement can also introduce spacing problems.&lt;/p&gt;

&lt;p&gt;Review the output at two sizes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;At normal reading size&lt;/strong&gt;, check whether the screenshot is easy to follow inside the article. Does the label remain readable? Is the intended control still obvious?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;At full resolution&lt;/strong&gt;, inspect the edited area closely:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does the text match the current application?&lt;/li&gt;
&lt;li&gt;Is the font size consistent with nearby labels?&lt;/li&gt;
&lt;li&gt;Does the baseline align with adjacent text?&lt;/li&gt;
&lt;li&gt;Is there enough space around the replacement?&lt;/li&gt;
&lt;li&gt;Are borders, icons, and background details intact?&lt;/li&gt;
&lt;li&gt;Did anything outside the intended area change?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Compare the entire image as well as the edited region. A convincing label is not enough if another part of the screenshot has changed unexpectedly.&lt;/p&gt;

&lt;p&gt;If the replacement looks cramped or inconsistent, recapturing the screen may be the better use of your time.&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%2Ftv8abnfl9aeddlhsfc19.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%2Ftv8abnfl9aeddlhsfc19.png" alt="Matching close-ups of the original and PicText result, showing heading, subtitle, and navigation tabs" width="798" height="154"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Compare the heading, subtitle, and tabs at the same display scale. These crops preserve the supplied result without retouching.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In the supplied result, the heading reads “Workspace settings”, but the subtitle also changes from “workspace preferences” to “workspaces preferences”. Letter shapes and spacing differ as well. This is why I would review the whole image before using it in documentation, and recapture the screen if those differences cannot be corrected.&lt;/p&gt;

&lt;h2&gt;
  
  
  Update the surrounding documentation
&lt;/h2&gt;

&lt;p&gt;Once the image is ready, review the paragraph, caption, and alt text that accompany it.&lt;/p&gt;

&lt;p&gt;Search the relevant documentation for the old label. It may appear in another step, a troubleshooting section, or a second screenshot.&lt;/p&gt;

&lt;p&gt;For documentation stored in a repository, a simple search can help:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rg -n "Team settings" docs/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Review each match in context. Some references may describe an older product version and should remain unchanged.&lt;/p&gt;

&lt;p&gt;Commit the updated image and its related text together. A clear commit message, such as &lt;code&gt;docs: update workspace settings terminology&lt;/code&gt;, makes the reason for the change easier to understand later.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make the next update easier
&lt;/h2&gt;

&lt;p&gt;Screenshot maintenance becomes simpler when you keep a few details alongside your documentation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The original image.&lt;/li&gt;
&lt;li&gt;The application route or screen shown.&lt;/li&gt;
&lt;li&gt;The demo state needed to reproduce it.&lt;/li&gt;
&lt;li&gt;The viewport dimensions.&lt;/li&gt;
&lt;li&gt;The product version or capture date, when relevant.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For frequently changing screens, consider generating screenshots from a repeatable demo environment. For labels that change often, numbered callouts with explanations in the article can reduce how much wording is embedded in the image.&lt;/p&gt;

&lt;p&gt;A focused text edit can extend the life of a useful screenshot. Its value comes from keeping the documentation accurate while reducing the work needed for a small correction.&lt;/p&gt;

&lt;p&gt;Before publishing, make one final comparison with the current application: can a reader follow the instructions and find exactly what the screenshot shows?&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
