Topstyle5 – a great editor

Topstyle 5

Topstyle, the HTML, CSS and PHP text editor has been out now for some months in version 5 and it is the best editor of its type that I have used in nearly 20 years of developing web sites. I don’t say that lightly – I’m fussy as I sit on a keyboard 9 hours a day.

I was an early user of HotDog, an HTML editor that appeared around 1995. It was such an improvement on Notepad that I bought the next two versions without hesitation. Then I discovered Homesite around 1998 and stuck with it through its sale to Macromedia and then Adobe until the latter abandoned it.

Since Adobe ditched Homesite about 5-years ago I have tried or bought HTMLKit, Webuilder, Code Lobster, Coffee Cup, Microsoft Expression Web (development now discontinued), Komodo and about 15 other HTMl and PHP editors. Some are really great and combined they would have all the features that I crave but each lacks some of Homesite’s magic.

I had toyed with Topstyle 4 but it lacked drag-and-drop and, although it seems picky, I find drag-and drop so useful that I decided Topstyle 4 wasn’t to be considered as a Homesite replacement.

Homesite was so good because it allowed each user to customise just about any repetitive task by assigning keystrokes that could be shared by a groups of workers. Repetitive operations could thus be reduced to a combination of three keys. I have always specialised in long governmental document manual mark-up of 50-to-100 pages so reducing the number of key strokes was always a goal.

An example:

Mimic this mark-up without having to reach for a mouse or use discreet sequences to activate drop-down menus followed by their options:

1. Here is a legalistic heading
This is the para that always seems to follow a legalistic heading.
    (a) and of course there is always the ordered list
    (b) where would we be without order lists?
          (i) lawyers sometimes seem to be paid by the indent
          (ii) but someone has to mark it up
              (a) enough already;
              (b) let's end this
     (c) eventually though, you reach the end.

Using the old HTML DT and DT, write a style that sets DIVs out to mimic the indents. Assign <div class=”dt></div> to a key combination (in my case, Ctr-Alt-d) and <div class=”dd”></div> (Ctrl-Shift-d) and you can construct the indents in moments by nesting the various levels of indentation. Topstyle oozes with time-saving possibilities for HTML jockies like myself.

It’s easy to add these styles to a CMS, such as WordPress but you will lose Topstyle’s ease of use so I mark most of my HTML up in Topstyle and then just drop it into WordPress. TinyMCE may be a great editor for simple documents but Topstyle eats it in every way.

After a couple of dozen similar lists in a long document you sure begin to love customised keys and you sure start to hate something that needs a menu activated with maybe a mouse click or three to achieve the same.

Thinking of all the repetitive tasks that mark-up involves, I haven’t found anything since Homesite that measures up as well as Topstyle 5. HTML Kit came close but at the time I tried (and bought) it, it was a design nightmare, complicated and intuitive to use. If HTML Kit’s programmer teamed up with a good UI designer that program would be a killer.I lasted a week with HTML Kit before deleting it. Topstyle, by comparison, is beautifully laid out, head and shoulders above anything else that I have tried for getting its screen layout just the way I prefer. It offers several ways to view sub-directories and files, such as displaying folders and their contained files side-by side in two columns or vertically one atop and one beneath. It can also display thumbnails in an images directory.

I can display windows (panels) in which I edit files on a remote server using FTP, get help with CSS definitions, preview the page and store complicated key and code sequences either as keystroke combinations or stored snippets.

Libraries store long sequences to be inserted with a click

Libraries store long sequences to be inserted with a click

Hard-to-remember sequences can be stored in a library to be called up when needed

About all it lacks that Homesite had is VBscript and a JavaScript ability to construct complex arguments with which to write dialogue boxes and build code structure with a few clicks.

Topstyle gained attention first as a CSS editor and it excels still at that. Rather than typing each line in manually, it offers auto completion upon entry of a selector, syntax checking and automatic insertion of opening and closing curly brackets. Pop-ups contain optional values for each property in the latest HTML version. Each hex colour code also takes on the background colour that it describes.

Features I’d like to see:

  • text editing colour schemes. It’s an effort, for example, to have a dark screen with neon or pastel characters, similar to TextMate and I can’t share them with others (or download ones that they offer).
  • A repeat key combination (this was a Homestyle special) that also repeats keyboard shortcuts. So for example, Ctl-Shift-P can wrap a single paragraph in – then highlight-Ctrl-Q down a long document to wrap each paragraph in <p> <p>. Believe me, by late afternoon, after a day of thumping keys, it’s a winner. In Topstyle 5 I can highlight a body of text and right-click or set a shortcut key combination to invoke paragraph tags around each paragraph but sod’s law says there’s always other mark-up in the middle that gets trapped in redundant paragraph tags.
  • Proportional fonts rather than mono-spaced (Microsoft’s Calibri, designed for screen display, is many times more attractive and legible than the sparse and bland mono-spaced font collection).

Topstyle 5 costs $US79, about the norm for this type of editor and upgrades are $US29. Considering Dreamweaver, Adobe’s equivalent, costs a few hundred dollars more and is a clever but cumbersome big program, Topstyle 5 is inexpensive and oh, so very good. And if you are going to put effort into learning Dreamweaver’s mouse-and-menu-centric interface, I’d plug instead for buying Topstyle 5, save $400 and learn HTML and CSS properly.

In-code colour values help to find your way about as you edit

In-code colour values help to find your way about as you edit


View images before inserting

View images before inserting


Disclosure: I liked the beta of Topstyle 5 so much that I contributed in a small, unpaid way to the release version’s help documentation but I have no other professional or personal connection with the company.