Edit an HTML Capture
Editing an HTML capture lets Content Developers and Instructional Designers change a screen they captured with the SingleFile Chrome extension, using a plain text editor and Chrome Developer Tools to find and edit the exact code.
What tools do you need?
You need the following before you begin.
- The HTML file you captured with SingleFile.
- Google Chrome browser.
- A plain text editor, such as Notepad. For large files, use Visual Studio Code or Notepad++ (both are free).
Before you begin
Save a backup first. Make a copy of the downloaded HTML file and edit the copy, not the original. This protects your original file if an edit breaks the page.
How do you edit an HTML capture?
| Step | Action |
|---|---|
| 1 | Make a copy of the downloaded HTML file. Edit the copy, not the original. |
| 2 | Open the copy in Notepad. Right-click the file, select Open with, then choose Notepad. |
| 3 | Open the same file in Chrome. Right-click the file, select Open with, then choose Google Chrome. |
| 4 | Open Developer Tools in Chrome. Select the three-dot menu, then More tools, then Developer tools. You can also press Ctrl + Shift + I. |
| 5 | Select the element inspector, then hover over the item you want to edit. |
| 6 | Right-click the highlighted code in the Elements panel, select Copy, then Copy element. Insert image here: s2_0X_img01_inspect-and-edit-html.png — Chrome Developer Tools open beside Notepad, with an element highlighted in the Elements panel and the Copy element option shown; highlight the element inspector icon, the highlighted element, and the Copy element option. Alt: Chrome Developer Tools with an element highlighted and the Copy element option shown next to the HTML open in Notepad. |
| 7 | In Notepad, press Ctrl + F, paste part of the copied code, and press Enter to find it. |
| 8 | Make your changes, then press Ctrl + S to save. |
| 9 | Return to the Chrome tab and press Ctrl + R to refresh and see your changes. |
Note: When you hover over an item with the element inspector, Chrome highlights the matching code in the Elements panel of Developer Tools.
What happens when you refresh Chrome?
Chrome reloads the saved HTML file and displays your latest edits. If your changes do not appear, close and reopen the file in Chrome.
What are the best practices for editing HTML captures?
- Load everything before you save. When you capture with SingleFile, scroll the page and let all images, menus, and pop-ups load first. SingleFile saves only what is loaded.
- Use the inspector to find code. Press Ctrl + Shift + I and hover to find the exact element instead of guessing. This is faster and avoids breaking the layout.
- Edit small sections at a time. Make one or two edits, save, and check in Chrome before doing more. Large edits make errors hard to trace.
- Keep Notepad formatting clean. Do not press Enter or add extra spaces in long lines of code. HTML structure is sensitive to formatting changes.
- Search with unique text. When you search in Notepad, copy a unique part of the element, such as a class or ID name. Common words like div or span return many matches.
How do you troubleshoot common problems?
| Issue | Possible cause | Quick fix |
|---|---|---|
| Your edits do not show up | You are viewing the old saved version | Close and reopen the file in Chrome after saving. |
| The layout looks broken | A missing bracket or tag | Undo your last change, or open your backup file. |
| You cannot find the section in Notepad | The code line is too long or repeated | Search for a unique class or text snippet inside the element. |
| Developer Tools looks confusing | Too many panes or tabs are open | Select Elements at the top of the Developer Tools window. That is where you edit. |
| The file will not open in Notepad | The file is too large for Notepad | Open it in Visual Studio Code or Notepad++ (both are free). |
| You edited text but not visuals | Images and styling are controlled by CSS | Edit only the text between the tags, for example <p>your text here</p>. |
| SingleFile did not capture everything | The page loaded content after you selected Save | Reopen the page, wait for everything to appear, and save again. |
What if you cannot edit the capture?
Contact your Local Administrator first. If your Local Administrator cannot resolve the issue, submit a case through the Skyllful support portal.
Related Articles
- [LINK TO: Capture a Webpage Using HTML] — How to capture a webpage as HTML before you edit it.
- [LINK TO: Capture Content] — An overview of ways to capture screens in Skyllful Studio.
- [LINK TO: Best Practices for High-Quality Screen Captures] — How to capture clean, usable screens.
Last Reviewed: July 29, 2026 | Skyllful Knowledge Base | Content Developers, Instructional Designers