What is the "Edit as HTML" extension and how does it work?

This extension connects your browser to an external editor, allowing you to edit the content of an HTML node within your preferred external editor. You can observe the results in the browser in real-time without refreshing the page. The extension monitors file changes, automatically updating the node content when the temporary file content is modified. This way, you can leverage your favorite external editor instead of relying on the developer tool as an HTML editor.

Available extensions:

• Edit with Sublime Text (Mozilla Add-ons, Chrome WebStore, Opera Add-ons, Edge Addons)
• Edit with Notepad++ (Mozilla Add-ons, Chrome WebStore)
• Edit with VIM (Mozilla Add-ons)

There are two ways to activate the extension:

• Click on the action button, hover your mouse over the element you wish to edit, and then left-click on the element. This action opens your external editor with a temporary file containing the node's content. As this local file gets updated, the new content replaces the old one in the browser, making the changes visible.
• Open your browser's developer tools, navigate to the "Elements" tab, and locate a new side pane titled "Edit as HTML" in the Elements panel. When a node element is selected, click the edit button, and the content will be transmitted to the external editor as a temporary file. This option is not active for all extensions.

Video Tutorials:

• Windows: https://youtu.be/xX-j-HQ8WJI
• Linux and Mac: https://youtu.be/8r756Z3wQ8M

Is it possible to modify the command sent to the external editor, and if so, what is the default command?

By default, the command sends the path to a temporary file containing the content of the currently selected node to the text editor. You can customize this command according to your preferences by visiting the options page. If you believe your modification could benefit other users, please consider sharing it in the review section on this page!

Why does the HTML code sent to the editor lack the formatting seen in the dev tools?

The HTML code sent to the editor is a direct representation of the actual code on the server before the browser parses it. DevTools in browsers format (prettify) the HTML code for readability. If you wish to format the HTML code in your editor to match, you may need to install an extension for this purpose.

What's new in this version?

Please check the Logs section.

Is it possible to use this extension for composing an entire HTML document, rather than just for a node?

You can achieve this by opening the external editor and creating a basic HTML code. Open the HTML file with your browser, use the dev tools to select either the HTML or BODY element, then click "Edit as HTML." The content will be transferred to your external editor, and any modifications made will be sent back to the browser without requiring a page refresh.

Is it necessary to manually delete the temporary files generated during the editing of HTML nodes?

No, manual deletion of these files is unnecessary. They are stored in the operating system's temporary directory, which is automatically cleared periodically.

Can I use this extension to edit a writable area, such as a textarea element or input[type=text]?

This extension introduces a new context menu item for editable elements. You can use this option to transfer the content of an editable element to the external editor. Similar to HTML editing, the content is sent back upon saving by the external editor. It's important to note that this extension employs TXT format when modifying the content of an editable element.

Is it possible to use this extension for editing external resources?

If your browser supports DevTools integration, you will find a button in the panel labeled "Convert to Local Resource." This option is available for SCRIPT and LINK[type=text/css] elements. When activated, the extension retrieves the remote content and creates a new same-type element with the remote content. Subsequently, the remote resource is removed. You can select the newly created element from the inspection panel and edit it using the external editor as usual.