Edit as HTML Edit HTML content of a node with an external editor
Support Development
PayPal ● 
Bitcoin Address: 1sM2BrTH8BRgt3quiASK8TmYSafutNvDo
 ● 
Ether Address: 0xCf9eaAc56992e12EB61fD46342172d4EEff5C8e4

Advertisement
Screenshot
"Edit as HTML" integrates your browser's dev tools to an external editor like Sublime text or Atom editor. The extension is accessible from the toolbar button or directly from the dev tools. Use the toolbar button to easily select an HTML node and edit its content inside your favorite external editor. For more advanced inspection, use the default inspector of your browser and then select "Edit as HTML" sidebar pane that is added to the elements panel. Watch the tutorial video for examples or take a look at the screenshot to locate the button.

Features

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

    This extension integrates browser to an external editor. With this extension, it is possible to edit an HTML node content inside a favorite external editor and see the result in the browser without the need to refresh the page. The extension tracks file changes and refreshes the node content when the temporary file content is changed. So instead of using the developer tool as an HTML editor, you can use your favorite external editor.

    Availble extensions:

    There are two methods to activate the extension. 1) Click on the toolbar button and move your mouse over the element that needs editing and then left click on the element. This will open your external editor with a temporary file containing node's content. When this local file gets updated, the new content is replaced the old one in the browser and changes are visible. 2) Open the dev tools of your browser. Go to the "Elements" tab and you will see a new side pane with the title "Edit as HTML" in Elements panel. When a node element is selected, press the edit button and content will be sent to the external editor as a temporary file.

    Video Tutorials:

  2. What command is sent to the external editor and can I change it?

    By default, the path to a temporary file that has the content of the currently selected node is sent to the text editor. You can go to the options page and change this command per your needs. If this change might be useful to the other users, please share it in the review section of this page!

  3. Why the HTML code that is sent to the editor is not formatted correctly like what I see in the dev tools?

    The HTML code is exactly what the actual code looks like (the one that is on the server before browser parses it). Browsers format (prettify) the HTML code in the dev tools. You can use your editor to format the HTML code as well (you might need to install an extension for this).

  4. What's new in this version?

    Please check the Logs section.

  5. Can I use this extension to write the entire HTML code not just for a node?

    Yes, simply open the external editor and write a minimal HTML code and open that HTML with your browser. Now use the dev tools to select either the HTML or BODY element and then press "Edit as HTML". You will get the content in your external editor and all the changes will be sent back to the browser without the need to refresh the page.

  6. Do I need to delete the temporary files that are created while editing the HTML nodes?

    No, there is no need for manual removal of these files as they are stored in OS level temporary directory which will get deleted once per while by your operating system.

  7. Is it possible to use this extension to edit an editable area like textarea element or input[type=text]?

    Yes, this extension adds a new context menu item to context menu over editable elements. Use this option to send the content of an editable element to the external editor. Like HTML editing, the content is sent back when it gets saved by the external editor. Note that this extension uses TXT format when the content of an editable element is being modified.

  8. Can I use this extension to edit external resources?

    Yes, if your browser supports devtools integration, in the panel there is a button called "Convert to Local Resource". This item gets enabled on SCRIPT and LINK[type=text/css] elements. When executed, the extension fetches the remote content and then creates a new element of the same type and uses the remote content as its content. Then the remote resource is being deleted. Now you can select the newly created element from the inspection panel and edit it with the external editor as usual.

Matched Content

Reviews

Please keep reviews clean, avoid the use of improper language and do not post any personal information.
  • <a> Defines an anchor.

    Example: <a href="http://add0n.com">a sample link</a>

  • <pre><code> Syntax Highlighting (Supported languages: Bash, JSON, HTML, JavaScript, and CSS).

    Example: <pre><code class="javascript">var foo = 'bar';</code></pre>

  • <strong> Defines bold text
  • <blockquote> Defines a long quotation
  • <caption> Defines a table caption
  • <cite> Defines a citation
  • <em> Defines italic text
  • <p> Defines a paragraph
  • <span> Defines a section in a document
  • <s> Defines strikethrough text
  • <strike> Defines strikethrough text
  • <u> Defines underlined text
  • <br> Defines a single line break; can be used alone and don't need an ending tag

Preview

What's new in this version

Version--
Published--/--/--
Change Logs:
    Last 10 commits on GitHub
    Hover over a node to see more details

    Need help?

    If you have questions about the extension, or ideas on how to improve it, please post them on the  support site. Don't forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.

    Open IssuesIssuesForks

    Recent Blog Posts on add0n.com