CoffeeCup HTML Editor is a code editor for Windows used to write and maintain websites by hand in HTML and CSS. It also supports PHP pages. It is not a drag-and-drop page builder: you work in the raw code. The editor supplies tag suggestions, a validator, a live preview, reusable code blocks and a built-in uploader. It is a paid program with a trial period, and CoffeeCup also offers a separate Free HTML Editor with a smaller feature set.
Starting pages and website projects
The welcome screen offers several starting points: a blank static HTML page, a responsive template, a larger site project or a PHP file. You can also create new HTML or CSS files from scratch or open them from the computer. Open From Web lets you pull files directly from a web server. It works with any public site, not only your own.
Responsive templates install into the HTML Editor in a couple of clicks and add a ready-made design, which you then edit as ordinary code.
Larger sites are organized as Website Projects. A project is tied to a local folder shown in the My Websites tab. The My Computer tab lets you browse the drive and copy files in. Right-clicking a project file inserts a link to it in the current page. Each project also stores a server profile, the remote root folder and the site’s address for publishing.
Code completion, tag reference and validation
As you type, code completion suggests tags and attributes. It also reads the CSS files referenced by the page and suggests their selectors. You can edit the tag definitions behind the suggestions to add custom attributes to an element’s completion list.
Tag highlighting marks the matching opening and closing tag of the element under the cursor. This helps when tracking down the end of a long, nested div. A built-in tag reference, together with Code, Snippets and Characters tabs, gives quick access to elements, ready-made code and special characters. The validation tool checks a page’s code and reports problems that would make it invalid.
Library items for repeated code
Menus, headers, footers and other blocks that repeat across pages can be saved as library items in the CoffeeCup HTML Editor. You select code on a page and save it as a library item, or create one from the Library tab. Each item is stored as an .lbi file, a format also used by Dreamweaver, so existing .lbi files can be imported.
When an item is inserted, the editor wraps it in HTML comment markers that identify it. After the library item is edited, you can update the current page, all open pages or every page in the project. A results pane lists each page that changed. Updates can also run automatically when the item is saved. The next update overwrites edits made by hand inside the markers. Removing the markers disconnects that page from the item.
Structured data with schema.org
The Schema tab adds schema.org structured data as HTML microdata. You first pick a context, such as a blog, organization, local business, product or event, and the HTML Editor shows the matching types and properties. You can drag these into the code as wrappers. Alternatively, you can highlight existing text and double-click a property to wrap it in the correct itemscope, itemtype and itemprop attributes.
Previewing pages while coding
A split-screen preview, opened from the View menu or with F12, shows the rendered page directly below the code. The same preview can be detached into an external window and kept on a second monitor, leaving the full editor window for code. You can also open pages from the local computer in other browsers. The preferences let you register up to ten additional browsers for cross-browser checks.
Uploading over FTP or syncing to S-Drive
The CoffeeCup HTML Editor includes its own FTP uploader. A server profile stores the host, login, port and passive mode setting. It also stores whether existing files on the server are overwritten, skipped or confirmed. You can upload selected files or the entire Website Project with its folder structure intact. You can also save several profiles to switch between, for example, a test site and the live site. Before upload, the project can check that linked stylesheets, images and other dependent files are present.
As an alternative to FTP, the editor can sync a project with CoffeeCup’s S-Drive hosting using a CoffeeCup account. You can use a new or existing domain. Syncing makes the hosted site an exact copy of the project: it deletes files on the server that are not in the project.
Paid editor and Free HTML Editor
The paid CoffeeCup HTML Editor includes everything above. The separate Free HTML Editor covers the core coding work: new HTML and CSS files, templates, Website Projects, the tag reference, code completion, the validation tool and both preview modes. Its users can also try the premium features for a limited period after installation.
