HTML-Kit Tools User Guide

Revised July 31, 2009. Copyright 2009 © All rights reserved.

Nutrition Facts: 5% Fat, 0% Sodium, 80% Text, 9g Sugars, Serving Size - the whole thing. Caffeine content - 50 mg/8 fl oz. Not a significant source of funny jokes.


Contrary to popular belief, HTML-Kit is not a car that make web pages in parking lots. HTML-Kit started out as a simple text editor for HTML files. Since then it has grown to support dozens more file types, extensibility through plugins and numerous productivity enhancements. In a sentence, you can use HTML-Kit to manage web sites, from editing to previewing to testing to publishing. That's not all though, it can work with text files not directly related to the web as well.

HTML-Kit Tools is the latest version of HTML-Kit. Tools, short for HTML-Kit Tools, was developed after HTML-Kit 292. Bells and whistles are nice (and flashing LEDs), but web developers liked HTML-Kit mainly because it gave them full control of their code, provided useful shortcuts and kept a small footprint. HTML-Kit Tools builds on these attributes while adding improved editor, projects for organizing multiple sites, plugins without programming, USB portability and multi-monitor previewing, to name a handful of the new features.

A web designing car would definitely need to carry a jumper cable. Happy tagging.

Questions and Feedback

If you have a question that's not answered in this document, or even if it's answered here, feel free to post it on the support forum for a speedy answer.

Feedback is to computer programs as water is to plants. So keep HTML-Kit hydrated by sending your feedback using "Help > Feedback" menu options in HTML-Kit Tools.

Installing HTML-Kit Tools

Minimum requirements

Not tested on Commodore.

A computer with the following minimum requirements is needed to run HTML-Kit Tools.

  • Windows 7, Vista, XP, 2003 or 2000
  • 500 MHz or faster Pentium-compatible processor
  • 128 MB of system RAM
  • 8 MB of free disk space
Running the setup wizard

Make sure that you discharge any static electricity before touching the setup program. You might even wash your hands just to be on the safe side.

You can install HTML-Kit Tools using its guided setup program. The setup program, named HKToolsSetup.exe, has a wizard-like interface with step-by-step instructions.

If HTML-Kit 292, the previous version of HTML-Kit, is already installed on your system, it's not necessary to uninstall it. You can continue to use HTML-Kit 292 after installing HTML-Kit Tools.

If this is your first time downloading HTML-Kit Tools, please read HTML-Kit User Assistant help page for information on how to download Tools. If the download dialog displays an option to run the setup, you can start installation directly from the browser. Otherwise, save HKToolsSetup.exe to your local computer and double click to run it.

Then follow the setup wizard to get HTML-Kit Tools up and running on your computer. The default settings can be used in most cases.

Once the setup wizard finishes installation, select "Programs > HTML-Kit Tools" from the Windows Start menu to open HTML-Kit Tools. If the option to create an icon on the desktop was enabled during installation, you can also double click the HTML-Kit Tools icon on your desktop.

Windows 2000: When running on Windows 2000, the .NET Framework 2.0 may have to be installed if it's not already present on the computer. If your computer requires it, a message box will display more information during installation. You can download the necessary files for free using the Windows Update option on the Windows Start menu.

Staying Up-To-Date

Whenever HTML-Kit Tools is updated, the latest changes are noted in the ChangeLog. This is where you can read about new features and release notes often before the information makes it to documentation.

You can keep HTML-Kit Tools updated using the "Help > Check for Updates" main menu option. This provides the latest and the most complete information related to updates.

If you prefer RSS, login to HTML-Kit User Assistant, select "Downloads > HTML-Kit Tools" and subscribe to the RSS newsfeed.

Do you stay in the loop through your social networks? Catch outgoing HTML-Kit on Facebook and Twitter.

HTML-Kit alphas require an update approximately every 60 days, or sooner if you'd rather not wait. If this doesn't work for you, please don't install alphas at this time.

First Glance

One of the first screens of HTML-Kit Tools running on your system will have the following look (once you put all the red stickers on your monitor):

Main User Interface

A. Title Bar; B. Main Menu; C. Actions Bar; D. Channels; E. Actions Bar Quick Icons; F. Kit Menu; G. Document Tabs; H. Editor; I. Gutter Area; J. Editor Context Menu; K. Customized Editor Context Menu; L. Project Windows; M. Project Toolbar; N. Plugin Window Tabs; O. Editor Tabs; P. Status Bar; Q. Status Bar Quick Access Area

A. HTML-Kit Tools Title Bar

There's nothing special to see here folks. It's an application title bar like any other, with maximize, minimize and restore icons.

B. Main Menu

Most commands in HTML-Kit Tools are accessible through the Main Menu. Menu options are usually written in the form "File > Projects > New Project" where the first item -- "File" -- refers to the top-most sub menu on the main menu. You can follow "File" menu to "Projects" and then invoke the "New Project" command.

These sub menus are located at the top of the main menu:

C. Actions Bar

After the main menu, the Actions Bar holds the most number of command icons. The Actions Bar is divided into major sections by tabs at the top, such as "Start" and "HTML." Icons on each tab are organized into smaller groups. Some groups have at least one icon that's larger than the rest of the icons in that group. Depending on which icon sat on the chair first, or more likely, because larger icons are used for frequently used commands such as "File Open."

Many icons can perform at least two functions -- invoke the command that's directly assigned to the icon and display more choices on a drop-down menu when the down arrow is clicked (if there's one). Some icons can perform a third function -- make you lean forward and stare at the screen.

You already know that you can select Actions Bar tabs by clicking on them. Did you know that you can scroll through tabs by moving the mouse wheel? If you prefer to use the keyboard instead, try Ctrl+F11.

D. Channels

If you got here while searching for MTV, wrong page! Channels are a brand new feature on HTML-Kit Tools Actions Bar. Instead of making tabs hold more and more icons, which may require more and more scrolling, Channels help reduce clutter on the Actions Bar. To find out what's on each tab, hover the mouse pointer over channel numbers. Channels are sometimes referred to as "Actions Bar > CH-1" or "CH-1" for short.

Shift+F11 can be used to toggle Actions Bar channels.

E. Actions Bar Quick Icons

There should be a better name for this area, but it contains commands related to creating, opening and saving documents. The difference being that these icons stay visible regardless of the currently selected Actions Bar tab or channel.

F. Kit Menu

No, this menu doesn't come with a toy. Although part of the main menu, the Kit Menu is a bit different in that "Kit Hints" are displayed in this area. As you use HTML-Kit Tools you'll see certain hints, called Kit Hints, that point to the Kit Menu.

Options on the Kit Menu include: Start Window,   Start Dialog,   Homepage on the Web,   Profile+,   Language+,   User Interface Theme+,   Edit Miscellaneous Styles,   Advanced+,   Portable Installation,   Send File Content to HTML-Kit 292,   Send File to HTML-Kit 292,   Restart

G. Document Tabs

Document Tabs display a list of currently open documents. It also displays buttons for closing documents and buttons for scrolling through tabs when there are more tabs than there is screen space. The order of documents can be changed by dragging tabs (left click and drag).

There are several ways to close documents, including pressing the middle mouse button (or the scroll wheel on some mice) while the mouse is pointing to a document tab.

For more document related commands, right click the document tab.

H. Editor

This is the main Editor area. The documents you open will fill this space. To view two or more documents side by side, drag a document tab towards the bottom of the screen until it fills one of the corners.

There's more to the editor (just a little bit) which will be covered in detail elsewhere.

I. Gutter Area

The Gutter Area of the editor is used to display line numbers, bookmarks, code folding points, and line modified indicators. What were you thinking?

J. Editor Context Menu

Also known as the right click menu, the Editor Context Menu appears when you right click inside the editor. It contains commonly used text commands such as Undo, Redo, Copy, Paste, as well as custom commands, snippets, and more.

To keep the selection while right clicking, right click inside the selection itself. Otherwise the selection will feel abandoned and disappear.

K. Customized Editor Context Menu

As part of the Editor Context Menu, custom commands and snippets that you create can be accessed through the right click menu.

Yes, you can get to custom commands through the Editor Context Menu, but to save time you can right click while the Ctrl key is pressed (Ctrl+Right Click). This will take you directly to your custom commands.

Ready-made plugins, called Caret Actions, are available for extending the context menu. Snowman nose is not included. Is your bunny looking over your shoulder? Nothing? Is this thing on?

L. Project Windows

Most of your site management functions are located in Project Windows.

If you're upgrading from HTML-Kit 292, project windows can do Workspace tasks and more. One glaring difference is that you can open multiple project windows if needed, where as you could only open one Workspace window in HTML-Kit 292. When you install HTML-Kit Tools for the first time, it'll create a default project with all the local and remote folders from your HTML-Kit 292 Workspace. Making it easier to start accessing files and FTP sites from HTML-Kit Tools.

In addition to the project context menu, project items can display two other types of right click menus. To quickly access commands related to the system and third-party applications, such as SVN, right click while pressing the Shift key (Shift+Right Click). Right click while pressing Ctrl to jump to custom commands (Ctrl+Right Click).

Can you think of a joke about projects? Something that doubles as a good ice breaker on a date.

M. Project Toolbar

The Project Toolbar provides shortcuts for accessing project related commands otherwise available on the right click menu. So you could go directly to Batch Actions without having to browse through a long menu.

Don't want toolbars to take up space in project windows? Turn it off by going to "Edit > Preferences > Projects."

N. Plugin Window Tabs

Similar to Document Tabs, tabs at the bottom of "Plugin Windows" display a list of currently open Plugin Windows. Examples of Plugin Windows include Start window, project windows, snippets, templates, the dorm room window with the extra air conditioner box, and more.

O. Editor Tabs

There's one more type of tabs. Tabs on the bottom of each editor window makes it easier to switch between the editor, preview, output and Tidy windows.

F12 key is a quick way to toggle between the editor and the preview.

P. Status Bar

The Status Bar is used to display the current line number, tag position, hints and other document indicators. When in the preview window, the Status Bar displays links and browser messages.

Did you know that clicking "Line" on the Status Bar brings up incremental Go To dialog? Did you also know that clicking on Column does nothing? Strange.

Q. Status Bar Quick Access Area

This area, with its lazy made up name, is currently used to display the default project icon. When no project is open, this icon brings up the default project. When one or more projects are open, it displays information about the current project.


Previewing HTML files

There are many ways to preview HTML files in HTML-Kit Tools. This is probably the quickest:

  • Open a HTML file (with .html or other listed HTML file extension).
  • Click the "Preview" tab on the bottom of the editor.

F12 key is a shortcut for previewing the current document while editing. Pressing F12 again, while in the preview, brings back the editor.

Previewing CSS files

Since CSS files are there to provide style information, there's nothing to preview in the CSS file itself. However, HTML-Kit Tools makes it easier to test style sheets by letting you select a HTML file to go with a CSS file that's being previewed. This HTML file is called the "Host File" that host style information.

  • Open a CSS file (with .css or other listed CSS file extension).
  • Click the "Preview" tab on the bottom of the editor.
  • If prompted to provide a host file, select a HTML file. Preferably, this should be the HTML file which will eventually refer to the CSS file being edited.
Previewing XSLT files

Working with extensible stylesheet language files (XSL) and XSL transformations (XSLT)? Previewing XSLT files in HTML-Kit Tools is easier than remembering those terms.

  • Open a XSLT file (with .xslt file extension).
  • Click the "Preview" tab on the bottom of the editor.
  • If prompted to provide an input file, select a XML file which will feed data to the XSLT.


HTML-Kit Tools preferences are categorized into the following main sections.


See Also

Frequently Asked Questions

Not all frequently asked questions are frequently asked. Some weren't even asked once.

What's HTML-Kit Tools?
HTML-Kit Tools is the new version of HTML-Kit.
What's HTML-Kit Build 300 then?
HTML-Kit Build 300 was another name for HTML-Kit Tools.
When the development of HTML-Kit Tools started, it was referred to as Build 300. HTML-Kit Build 288 was one of the very early versions of HTML-Kit. Then came Build 290, followed by Build 292. HTML-Kit Build 300 would have been the logical name for the next version in line. However, because of the many new features in this latest version, it's now called HTML-Kit Tools.
When will HTML-Kit Tools be available?
HTML-Kit Tools is available now. It's been in use side-by-side HTML-Kit 292 and in production environments since late 2006.
Is HTML-Kit Tools an incremental update to HTML-Kit 292?
No, HTML-Kit Tools is a new version written from the ground up to support current and emerging standards. On the other hand, it's still rooted in years of experience with previous versions of HTML-Kit.
What's new in HTML-Kit Tools?
There are many new major features in HTML-Kit Tools, including a more intuitive user interface; projects with virtual and remote/FTP folders; code folding; ability to take HTML-Kit Tools, settings, templates and plugins in portable USB devices; out-of-the-box file versioning and backup; new HTML Tidy interface that can highlight suggested code improvements; document structure and functions view for HTML, XHTML, XML, CSS and scripts including PHP; and many more.
For a list of the latest additions, please see HTML-Kit Tools Change Log. You can also view screenshots and videos.
Downloading HTML-Kit Tools
Where can I get HTML-Kit Tools?
HTML-Kit Tools is available to the registered users of HTML-Kit. Registered users can download the latest HTML-Kit Tools updates from the User Assistant. Please see the Help section in the User Assistant for information on how to create a login and download extras.
What do I get if I register HTML-Kit?
The registered users of HTML-Kit get access to extra HTML-Kit 292 add-ons, the latest HTML-Kit Tools alphas and a free upgrade to the final release of HTML-Kit Tools 1.0. For the current list of extras and for more information, please see HTML-Kit registration.
Installing HTML-Kit Tools
What are the minimum requirements for running HTML-Kit Tools?

A computer with the following minimum requirements is needed to run HTML-Kit Tools.

  • Windows 7, Vista, XP, 2003 or 2000
  • 500 MHz or faster Pentium-compatible processor
  • 128 MB of system RAM
  • 8 MB of free disk space
How do I install HTML-Kit Tools?
Installing HTML-Kit Tools is as simple as running the setup wizard. You can find more information including minimum requirements on this page.

In addition to the standard installation, HTML-Kit Tools can also be installed on portable devices such as USB drives.

How do I open HTML-Kit Tools?
HTML-Kit Tools will be added to the Windows Start menu under "Programs > HTML-Kit Tools" when you run the setup program. You can use this icon to open HTML-Kit Tools.
Upgrading from HTML-Kit 292
How do I find out which version of HTML-Kit I'm using?
If you select "Help > About" from the main menu, the build or the version number should be displayed near the top of the dialog.
I'm currently using HTML-Kit 292. Can I use both?
Yes, you can install HTML-Kit Tools without uninstalling HTML-Kit 292. You'll be able to continue using HTML-Kit 292 with the plugins you've installed. It's even possible to open both HTML-Kit Tools and HTML-Kit 292 at the same time to exchange data between the two applications.
I don't have HTML-Kit 292. Do I have to install it first?
No, you can install and use HTML-Kit Tools even if you haven't installed HTML-Kit 292.
I have many FTP servers in HTML-Kit 292 Workspace. How difficult would it be to import them to HTML-Kit Tools?
You can import FTP server and local folder settings by selecting "File > Projects > Import HTML-Kit 292 Workspace" from the main menu in HTML-Kit Tools.
Will every HTML-Kit 292 plugin I have work in HTML-Kit Tools?
HTML-Kit Tools has a new plugins interface and a new set of plugins. Popular HTML-Kit 292 plugins like bsStyle, tmCSS, twJavaScript, bsPHPMySQL and more are already available for HTML-Kit Tools. Other HTML-Kit 292 plugins are being considered on request (please use "Help > Feedback" main menu option to send your requests). In some cases, it may not even be necessary to install a plugin because HTML-Kit Tools has many built-in features that replace functionality previously only available through plugins.
Reinstalling HTML-Kit Tools
How do I move HTML-Kit Tools to a new computer?
  • Install HTML-Kit Tools on the new computer.
  • Close Tools on both the new computer and the old computer.
  • Copy *.hsf files in the installation directory from the old computer to the new computer. By default, HTML-Kit Tools is installed to 'C:\Program Files\HTML-Kit\Tools\bin\'.
  • Finally, restart Tools on the new computer. The projects, snippets, preferences and other information from the old installation should now appear in the new installation.
How do I customize Colorizer colors?
Please see Colorizer Styles for details.
How did you create this site? Did you use a content management system (CMS)?
This site was created using HTML-Kit Tools and plugins for it. Some of the older pages on the HTML-Kit site were created using HTML-Kit 292 and plugins.
Where is HTML-Kit developed?
HTML-Kit is developed in the beautiful Florida Panhandle. Developers around the world have written plugins for HTML-Kit. For a list of plugin authors, please see HTML-Kit People.

To be continued...

RSS newsfeed for HTML-Kit Facebook page on HTML-Kit HTML-Kit on Twitter HTML-Kit Support Channel on YouTube
© 2009 All Rights Reserved.  |  Privacy Statement    
HTML design aid