Release: Nov 6, 2013 |  OSX: 10.6 and higher

A clever and flexible web editor—with some serious clout.

The integrated Project Manager and file browser make managing your website a snap!

Start Coding in Seconds

It only takes a moment to get your workspace set up. With so many ways to start a new project, the option you need is a click or two away. Start with a clean slate using the Quick File option, or get a head start by opening a new project from a template or files that are already on your computer.

Already have a site on the web? You can start a new project in your local workspace using the files that are on your web server. Just choose the New Project From Server option and let the app download your content and get you set up.

The integrated Project Manager and file browser make managing your website a snap!

Manage Web Projects Easily

Searching for a sweet editor for OS X that keeps your projects organized? Look no further. Files can be anywhere on your system and still be part of several projects at once. Web Editor keeps them organized without making you clone them or move them around.

Jump in head-first with a quick project template: One click and your project is generated and ready to go. If you’ve got a nit-picky work style, you can define your own template and be off to a running start each time you fire up Web Editor.

Code completion and other powerful helpers are built right in. There when you need them, hidden when you don’t.

Slick Editing Tricks

Ever taken the HTML-CSS-Preview round trip? Click an element in the preview pane and jump to the corresponding code highlighted below. You’ve probably used tools like Firebug or WebKit’s inspector; now you have all that power right in your own workspace. Just edit and save!

There are even more unique features, too. Like multi-cursor positioning, automatic tag matching, block editing, drag-n’-drop coding, search-based editing, and an endless supply of personalization options.

Edit HTML and CSS with a real time, real browser preview. Click an element in the preview and the related code is selected for you!

Auto-Suggested Content

Your HTML files know which CSS files are part of the family. This means that Web Editor smartly displays CSS rule suggestions when you’re adding them to your code—and which HTML elements to suggest in your CSS files.

You can name CSS classes anything you want (but you might forget what you named them!) That’s where a list of suggested classes comes in. Rather than having to remember the exact spelling, they’re displayed in a convenient list for you. Just choose the one you’re looking for.

Edit HTML and CSS with a real time, real browser preview. Click an element in the preview and the related code is selected for you!

Clever Code Completion

In computer code, a simple typo can be the difference between working and ba-roken. Code completion keeps your syntax in the clear. It suggests a list of elements as you type, so you know your spelling is correct (and that you’re picking something that really exists!)

No need to worry about the end of the line, either. When you open a tag, bracket, or parenthesis, Web Editor automatically adds its closing partner so you don’t forget to include it.

Edit HTML and CSS with a real time, real browser preview. Click an element in the preview and the related code is selected for you!

Ultimate Personalization

Web Editor gives you the greatest workspace flexibility you’ve ever seen. Split-screen, full-screen, side-by-side, preview in, preview out, 2 monitors—all with the click of a button. Just set up your workspace the way that’s most comfortable for you.

You can import popular code highlighting color schemes or create your own. Plus, define the editor fonts and sizes, set tab width, and tweak anything else that's necessary to make Web Editor feel all yours.

Compare and merge files, change text case, or validate PHP right from the app. You can also create your own plugins!

Add Your Own Features

The Web Editor UI is intentionally clutter-free, but you can still add features that you just can’t live without. Include just about any tool that can be dreamed up using the flexible plugin system.

Simply download and install any plugin that works with Web Editor to add new features. And if you’re adventurous, you can create your own plugin from scratch. Just start a new project using the “Web Editor Plugin” template and work your magic, coding your new plugin with the power of JavaScript.

Edit HTML and CSS with a real time, real browser preview. Click an element in the preview and the related code is selected for you!

Edit Directly on the Server

Upload to S-Drive (our unique web host) or your own server straight from the Web Editor. Instead of some cryptic maze of files and folders, the S-Drive Dashboard displays all your website files in an interface that’s easy to grasp.

Whoops, forgot one tiny detail? There’s really no need to upload your project again if you’re in the S-Drive Dashboard. Just choose the Edit option next to a text-based file to open a code editor right in the browser.

  • FEATURE ROADMAP Full Support Coming Soon We’re thinking about it
  • A Beautiful OS X Interface
  • Clean and responsive: You’ll feel right at home with the Web Editor’s windows, panels, and menus.
  • No garish UI tricks here. Just a downright powerful web development tool that’s a pleasure to use.
  • It knows what you want. Everything you need is right where you expect it to be.
  • File & Project Management Made Easy
  • Get organized: Add existing files and folders to a project, or quickly create new ones.
  • Work with multiple projects at once.
  • Project templates: Choose "New Project from Template" to get a jumpstart on a brand new website.
  • File references: Edit once, see and use those updates everywhere.
  • Keep track of file statuses: The Web Editor will let you know when files have been changed or moved.
  • Quick Files: Create them fast, add them to a project later.
  • No limits: Open an unlimited number of files and projects.
  • Easily delete, rename, and duplicate files and folders right in the project panel.
  • Upload via FTP and other common protocols from the Project Pane.
  • Save as Template: Create your own templates for a snappy start.
  • Create Project from Server: Get your site updated fast!
  • Integration with source control systems like Git and SVN.
  • Code tools that help you get your job done
  • Live WebKit Preview: See every tweak to your markup and style in real time, in a real browser.
  • Double-click to edit text right in the Preview. You can style your text this way, too.
  • Plugins: Add the features you want, or even create your own.
  • Multiple Cursor Positioning: Write the same text in many places simultaneously.
  • Simultaneous Editing: Automatically edit opening and closing tags at the same time.
  • Tag Matching: Select a tag and its matching tag is highlighted.
  • Block Editing: Move and edit big chunks of code all at once.
  • Drag n’ Drop Coding: Drag images into the editor and its code is written automatically.
  • Selection Wrapping: Add quotes to both sides of your selection with one key.
  • Smart Code Completion: Suggests elements, attributes, and selectors—including your own IDs and classes.
  • A robust Code Library: HTML, CSS, JavaScript, PHP, Ruby, Perl, Python, C++, and more, all at your fingertips.
  • Matching Bracket Indicator: See what’s been properly closed (or not) at a glance.
  • Code Auto-Selection: Click an element in the Live Preview and the corresponding HTML & CSS is highlighted.
  • Find elements fast: Click HTML code to see its corresponding element highlighted in the Live Preview.
  • Customizable Syntax Highlighting: Tweak your color scheme ’til it looks just right.
  • Share Syntax Highlighting: Import and export color schemes, even with other popular editors.
  • Code Folding: Hide blocks of code to get ’em out of the way for a bit.
  • Auto-indenting, block-indenting, indent guides, and block drag-and-drop.
  • Toggle white space guide, line numbering, and more.
  • Custom Tab Widths: Set the number of spaces inserted when tabbing.
  • Command line utility: Open projects and files from a command prompt.
  • Define placeholder variables that can be used in file and project templates.
  • The precise row and column position of the cursor is in the status bar at all times.
  • Quickly Find What You’re Looking For
  • Project-wide search and replace.
  • Find files in your project lightning-fast with the fuzzy search bar.
  • You control the scope: Search the current file, open files, or all files in a project.
  • List all open files: Hit Ctrl+Tab to pop up a comprehensive list of everything that’s open.
  • Related files drop-down: A convenient menu lists all files related to the document that’s currently selected.
  • Clean, Versatile, and Flexible Work Space
  • Three panel split-screen: Edit your HTML & CSS in separate windows and see the result in a live WebKit preview.
  • Pop out the Live Preview: Need more room? You can pop out that Preview pane and drag it onto a second monitor.
  • Preview in any browser: WebKit Live Preview not enough? Open the current file in any browser with just a click.
  • Click any element in the Live Preview and the related HTML and CSS markup is selected.
  • Edit/Browse Modes: The Live Preview can switch into “Browser Mode” so you can see exactly how your page will behave.
  • View available files in 4 different and convenient views.
  • Special characters: Open a convenient window to choose any UTF-8-valid character.
  • Bookmarks: Drop your marks and jump right to those sections in your files.
  • Create and use custom Snippets: Have bits of code you use frequently? Make a snippet and insert blocks of code in just a click.
  • Code Helpers: Interactive helpers for common coding tasks.

Now that’s a cool app!

Download the free trial version and check it out for yourself.