Capture a Webpage Using HTML
Capturing a webpage as HTML lets Content Developers and Instructional Designers bring a web-based screen into Skyllful Studio, and this article explains how to capture the page with the SingleFile Chrome extension, edit the HTML, and add the screen to the Screen Library.
What tools do you need?
You need the following tools before you begin.
- Google Chrome browser.
- The SingleFile Chrome extension.
- A plain text editor, such as Notepad.
Before you begin
Capture only webpages you are authorized to use. Before you capture a page, make sure any dynamic content you want to include is visible on screen. Sign in, expand menus, and load images first, because SingleFile captures only what is visible when you save.
How do you capture a webpage with SingleFile?
| Step | Action |
|---|---|
| 1 | Install the SingleFile extension from the Chrome Web Store. |
| 2 | Pin SingleFile to your Chrome toolbar. |
| 3 | Open the webpage you want to capture. |
| 4 | Make all dynamic content visible on the page. |
| 5 | Select the SingleFile icon in the toolbar. |
| 6 | Select Save in the popup. Insert image here: s2_0X_img01_singlefile-save.png — The SingleFile popup in Chrome with the Save option visible; highlight the SingleFile toolbar icon and the Save button. Alt: The SingleFile extension popup in Chrome with the Save button highlighted. |
What happens after you capture the page?
SingleFile processes the page and downloads a single HTML file that contains the whole page.
How do you open the captured file for editing?
| Step | Action |
|---|---|
| 1 | Right-click the downloaded HTML file. |
| 2 | Select Open with, then choose Notepad. |
How do you find the HTML code to edit?
| Step | Action |
|---|---|
| 1 | Open a second copy of the HTML file in Chrome. Right-click the file, select Open with, then choose Google Chrome. |
| 2 | Open Developer Tools. Select the three-dot menu, then More tools, then Developer tools. You can also press Ctrl + Shift + I. |
| 3 | Select the element inspector in Developer Tools. |
| 4 | Hover over the element you want to edit. |
| 5 | Right-click the highlighted element in the Elements panel and select Copy element. Insert image here: s2_0X_img02_chrome-inspect-element.png — Chrome Developer Tools open with the element inspector active and an element highlighted in the Elements panel; highlight the element inspector icon and the Copy element option. Alt: Chrome Developer Tools with the element inspector active and the Copy element option shown. |
Note: When you hover over an element, Chrome highlights the matching code in the Elements panel of Developer Tools.
How do you edit the HTML in your text editor?
| Step | Action |
|---|---|
| 1 | In Notepad, press Ctrl + F and paste the copied element to find it in the code. |
| 2 | Edit the highlighted code as needed. |
| 3 | Press Ctrl + S to save your changes. |
| 4 | Open the saved file in Chrome to review your changes. |
How do you add the screen to Skyllful Studio?
| Step | Action |
|---|---|
| 1 | Upload the updated HTML file to the Screen Library in Skyllful Studio. |
Note: A captured webpage is added as an HTML screen, shown by the HTML Screen Type Badge in the Screen Library.
Important notes
SingleFile captures only the content that is visible when you save, so load all dynamic content first. Capture webpages only when you are authorized to use them.
Related Articles
- [LINK TO: Capture Content] — An overview of ways to capture screens in Skyllful Studio.
- [LINK TO: Edit an HTML Capture] — How to edit an HTML screen after you capture it.
- [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