{"id":2128,"date":"2021-08-11T14:19:00","date_gmt":"2021-08-11T18:19:00","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=2128"},"modified":"2026-08-26T12:11:17","modified_gmt":"2026-08-26T16:11:17","slug":"file-manager-code-editor","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/cpanel\/file-manager-code-editor\/","title":{"rendered":"How to Edit HTML Code in cPanel"},"content":{"rendered":"

You do not need a separate File Transfer Protocol (FTP) client or a text editor on your computer to edit HTML code in cPanel. File Manager includes two built-in editors. The HTML Editor makes visual changes to .html<\/code> files, and the Edit tool opens direct code editing for any text-based file. This guide covers both, starting with the HTML Editor.<\/p>\n\n\n\n

Warning:<\/strong> Editing a live file can break your site if you make a mistake. Back up the file first by right-clicking it in File Manager and selecting Copy<\/strong>, or download a copy using an FTP or SFTP (Secure File Transfer Protocol) client. See the FTP getting started guide<\/a> for connection details. If you want a full safety net, clone your site with Softaculous<\/a> and test your changes there first.<\/p>\n\n\n\n

Note:<\/strong> Older versions of cPanel had a separate \u201cCode Editor\u201d tool and a different HTML editor. In current cPanel, the Edit<\/strong> button opens the code editor, and the HTML Editor has a new interface. If you are following an older tutorial, use the steps below instead.<\/p>\n\n\n\n

Open File Manager<\/h2>\n\n\n\n

Both editors live inside File Manager, so start there before you choose a tool.<\/p>\n\n\n\n

    \n
  1. Log in to cPanel<\/a>.<\/li>\n\n\n\n
  2. In the Files<\/strong> section, click File Manager<\/strong>. See the File Manager guide<\/a> if you need a refresher on navigating it.<\/li>\n\n\n\n
  3. Navigate to the folder that contains the file you want to edit, then select it with a single click.<\/li>\n<\/ol>\n\n\n
    \n
    \"File<\/figure>\n<\/div>\n\n\n

    With the file selected, the toolbar lights up the tools that apply to it. Which tool you use next depends on the file type.<\/p>\n\n\n\n

    Edit HTML Code in cPanel with the HTML Editor<\/h2>\n\n\n\n

    The HTML Editor is a visual editor built only for .html<\/code> files. Its toolbar button stays grayed out until you select an HTML file, so select an HTML page before you look for the button.<\/p>\n\n\n\n

      \n
    1. Select the .html<\/code> file you want to edit, then click HTML Editor<\/strong> in the toolbar. You can also right-click the file and choose HTML Editor<\/strong>, which appears as the last option on the menu.
      \"Right-click<\/li>\n\n\n\n
    2. In the HTML Editor<\/strong> dialog, confirm the file path shown next to \u201cYou will be editing:\u201d, then choose the correct entry from the Please select the URL where this file will be served from<\/strong> drop-down. Click the Help<\/strong> link next to the drop-down if you are not sure which entry to pick.<\/li>\n\n\n\n
    3. Review the two warnings in the dialog: external assets may fail to load in browsers that block mixed (HTTP and HTTPS) content, and JavaScript execution is disabled in the editor for security reasons. Click Edit<\/strong> to continue. cPanel opens the HTML Editor in a new browser tab.
      \"HTML<\/li>\n\n\n\n
    4. Make your changes using the formatting toolbar (bold, lists, alignment, tables, links, and similar tools), or click the <\/><\/strong> button at the top right to switch to the raw HTML source.<\/li>\n\n\n\n
    5. Click the save (disk) icon in the top left corner to save your changes.<\/li>\n<\/ol>\n\n\n\n

      The HTML Editor is the fastest way to make visual edits without touching markup directly. If you need to edit the underlying code of any file type, including HTML, the Edit tool covers that instead.<\/p>\n\n\n\n

      Edit Code in cPanel with the Edit Tool<\/h2>\n\n\n\n

      The Edit tool opens a code editor with syntax highlighting for any text-based file, including .php<\/code>, .css<\/code>, .js<\/code>, .html<\/code>, .txt<\/code>, and .htaccess<\/code>. Use it when you want to work directly in the code instead of a visual layout.<\/p>\n\n\n\n

        \n
      1. Select the file you want to edit, then click Edit<\/strong> in the toolbar. You can also right-click the file and choose Edit<\/strong> from the context menu.<\/li>\n\n\n\n
      2. In the Edit<\/strong> dialog, confirm the path shown next to \u201cYou will be editing:\u201d. The dialog warns you to back up the original file before converting character sets, since that action can produce unexpected results. The Disable Encoding Check<\/strong> button stops this dialog from appearing again, which cPanel suggests only if you work exclusively in English or other Western languages.
        \"File<\/li>\n\n\n\n
      3. Click Edit<\/strong> to continue. cPanel opens the code editor in a new browser tab.<\/li>\n\n\n\n
      4. Make your changes. The editor detects the language for syntax highlighting, and you can adjust the font size, toggle word wrap, or use the search and undo\/redo controls in the toolbar as needed.
        \"cPanel<\/li>\n\n\n\n
      5. Click the blue Save Changes<\/strong> button in the top right, then click Close<\/strong> when you are done.<\/li>\n<\/ol>\n\n\n\n

        Both tools write your changes straight to the live file when you save, so it helps to know exactly what each interface offers before you rely on it. Here is a closer look at both.<\/p>\n\n\n\n

        HTML Editor and Edit Tool Features<\/h2>\n\n\n\n

        HTML Editor<\/h3>\n\n\n\n