TopStyle's main window may be customized to suit your editing style. Docking panels enable you to rearrange the positions of the Style Inspector, File Explorer, etc. TopStyle's toolbars are similar to those used in Microsoft Office and are very easy to customize as well. Layouts are a way to save and restore the position of everything on the TopStyle display, enabling you to define different ways of working with minimal fuss. TopStyle comes with a few built-in layouts, but you can easily create your own.

main window

When you open an existing document, TopStyle will try and auto-detect the encoding for the document you're trying to open. The TopStyle editor, Inspector, etc. are all unicode-compliant. When you save your (X)HTML document, you can optionally select encoding for your document (UTF-8, UTF-16, ANSI, etc).

Unicode

TopStyle's Inspector categorizes HTML attributes so you can quickly see which are required and which are deprecated (outdated). Even better, TopStyle generates XHTML-compliant markup with a simple toggle. TopStyle's unique hyperlinking greatly simplifies navigating between documents. Click an HTML class attribute to navigate to the definition of that class in an external style sheet, or click an anchor tag or CSS link to open the linked file for editing.

Inspector

TopStyle allows you to edit online documents via FTP. The new FTP Explorer Panel allows you to drag-and-drop documents from your FTP site(s) onto the TopStyle editor. When you save your document, it is automatically uploaded to your FTP site. TopStyle makes FTP totally transparent.

Live FTP editing

TopStyle comes with a new, user-configurable HTML toolbar that is displayed above the editor. Simply click and hold down the mouse button on a HTML toolbar item, and then drag the item from the HTML toolbar anywhere into your document. When you release your mouse button, a snippet is inserted into your document.

HTML toolbar

TopStyle includes Script Insight for ASP (both JavaScript and VBScript), PHP, and ColdFusion.

ASP   PHP   ColdFusion

TopStyle includes iWebKit, a simple and advanced development framework for iPhone (and iPod touch) web app development. In addition to iWebKit, TopStyle includes new CSS definitions for iPhone OS 1.1 and iPhone OS 2.0. Last but not least, TopStyle includes a new embedded preview for Apple (mobile) Safari.

iPhone web app development

TopStyle's "Live Spelling" identifies spelling errors as you type with wavy red underlines, and allows you to act upon each identified problem with a new context menu.

Live Spelling

TopStyle's "Box Spy" provides a simple, effective way to see exactly how your CSS is affecting a specific HTML element. When Box Spy is enabled, moving the mouse over an HTML element in the embedded preview will exposes that elementís margins, padding and content box, and the elementís hierarchy will appear above the preview. Clicking an element in the hierarchy will move Box Spy to that element.

Box Spy

CSS is actually quite simple, but getting it to work in multiple browsers is a challenge. This is where TopStyle shines! TopStyle's Style Checker is a powerful tool which validates your style sheets against multiple browsers, flagging any invalid properties or values it finds. It also warns if bugs in popular browsers may cause problems even when your style sheets are perfectly valid. What's more, TopStyle enables you to pass your style sheets directly to the W3C's CSS Validation Service so you can quickly check against the official CSS specifications.

Style Checker

Web authors have been waiting a long time for a feature like TopStyle's Full Screen Preview! Split the preview between Internet Explorer, Mozilla Gecko (Mozilla FireFox) and/or WebKit (Apple Safari) for an immediate look at browser differences. You can even change the !DOCTYPE of each preview panel on-the-fly to see how different document type declarations affect your layout.

Full Screen Preview

TopStyle's powerful Site Reports enable you to see at a glance where styles are used in your site. Find out where you've applied style classes that aren't defined in any style sheets, or see what style classes you've defined that aren't being used.

Site Reports