Submit A Tip Alternative Tip Form

Get Your Dev On: 5 Offline Text Editor Apps for Chrome

Workflows and environments change, but a developer always needs an editor. 

One of the biggest issues I found when using the Chromebook as a development device was the lack of good offline editors. Without a stable connection in your hotel room or local café, it’s hard to rely on a cloud IDE. But a number of editors with offline support have broken from the pack and some promising new contestants have entered the arena. Though working on your latest Android app or complex Scala project is still a ways off, many of these editors should satisfy most of a front-end developer’s needs.

This short list of 5 editors is by no means exhaustive, but it collects a few of the more interesting and usable editors out there today.

Spark

spark-editor-window

There’s no better place to start than Google’s own Spark, an IDE in the early stages of development.

Spark was recently revealed and gained significant traction in the Chrome development community. The reason? Aside from the obvious win of having a Google-backed editor for Chrome, Spark also brings a large open-source Dart and Polymer project to the table. For developers curious about the Dart programming language and Polymer library, Spark gives them both a young but capable editor and a learning environment all in one repo.

Spark is limited to editing files that already exist.

Spark uses the Ace code editor – used by the Cloud9 web IDE and GitHub – and comes with syntax highlighting for most languages out of the box. The one big omission you’ll notice, however, is the lack of New File support – that means you’ll be limited to editing files that already exist. Spark comes with a handful of editor themes if you don’t like the default, but you can very easily add your own favourite colour schemes.

And that’s where Spark adds a significant roadblock: you’ll need to build it on a desktop with the Dart SDK installed. But once you get the editor built, you can run it anywhere as an unpackaged app. The one-time setup is a small hiccup to an otherwise early, but usable editor for an offline Chrome workflow. And considering Google’s commitment to making Spark an actual IDE, expect a glut of new features – and hopefully an app in the Chrome Web Store – over the next few months.

Learn more about Spark

Text

text-editor-window

On the other end of the spectrum is Text, another Google project from the Chrome team.

As the name implies, it does one thing: edit text files. There are no promises of being a featureful IDE or stuffing gimmicks into the toolbar. The sidebar is hidden behind a “hot dog” icon and all you’ll find is the usual open/save/new actions and a handful of editor options.

If your needs are fairly humble or you’d rather not load up one of these heavier apps just to edit a single file, Text works extremely well. CodeMirror currently powers the app and does everything from bracket matching to code folding.

Even though Text is a fairly focused app, there’s still room to round out its feature set. For example, CodeMirror now supports autocompletion for JavaScript through Tern – a feature that would make this simple text editor far more powerful than the minimalistic interface lets on.

And one of the biggest advantages of the simplest editor in this round up: it’s one of only two editors in the list that can open files directly from the Chrome OS Files app.

Get ‘Text’ in the Chrome Web Store

Tailor

Hovering over a CSS colour shows a colour preview in Tailor.

Hovering over a CSS colour shows a colour preview in Tailor.

Tailor brings Adobe’s open source text editor Brackets to Chrome. Built with only web technologies, Brackets is a fledgling, though fast moving, editor that packs a punch with autocomplete, “inline” editing, and a layer of polish that’s hard to beat, even in an early port to a Chrome packaged app.

The “inline” editing lets you quickly edit JavaScript and CSS from where classes and functions are referenced so you can modify styles and callbacks from a single HTML file instead of jumping through every file used in your project. Visually editing CSS can also be a boon if you, like me, have a hard time translating a hex value into a tangible colour. Hovering over a colour brings up a popup that gives you immediate feedback for colours, gradients, and even transparency.

New projects can be created from scratch or existing Git repos.

New projects can be created from scratch or existing Git repos.

Perhaps the ‘killer’ feature that keeps Tailor at the top of my apps list: Git integration. Instead of trying to sync files through Google Drive and hoping you don’t lose an important edit, Tailor lets you import a project directly from Git and push, pull, branch, commit, and checkout right from the editor.

The downside is that committing is all-or-nothing and the other actions are hidden behind similarly simplistic menu items as well, so Tailor still won’t fit more complicated Git workflows. But it’s a tremendous start.

Brackets is also a fast moving project and Tailor is already several months behind. A few other projects have also attempted to shape Brackets into a packaged app, but each I’ve come across are just as outdated and none are on the Chrome Web Store.

Despite being several months out of date, Tailor is still a formidable editor that finally brings one of the most exciting open source projects – Brackets – to Chrome.

Get Tailor on the Chrome Web Store

ShiftEdit

shiftedit-editor-window

ShiftEdit isn’t technically an offline editor (even marketing itself as an “online IDE”), but there’s one particular use case where the potential for offline use comes in handy: when you need to edit remote file even with a flaky connection.

shiftedit-autocomplete

Autocomplete offers suggestions for a number of web safe fonts.

ShiftEdit ostensibly offers offline editing, but not for your local files, as it doesn’t yet integrate with Chrome’s filesystem APIs. Despite this glaring issue, ShiftEdit handles itself well when you do need to work on remote sites and dropped connections are inevitable.

Indeed, ShiftEdit was the only editor I had when I first bought my Chromebook and needed to make important changes to remote files in a busy café with intermittent wifi. ShiftEdit lets you know when you’ve gone offline and when the connection has been restored and changes can be uploaded again.

The editor itself uses Ace and has a large number of customisation options – including tab size, font size, and even support for a CSS colour picker – as well as a number of niceties like a split editor for side-by-side editing and a “Live View” to inspect HTML on the fly. But as nice as these features can be, the entire user interface can be rather unresponsive, especially on an ARM Chromebook.

ShiftEdit requires you to sign in and is the only editor in the list with a paid version that comes with revision history and Dreamweaver compatibility.

Get ShiftEdit in the Chrome Web Store

Caret

caret-editor-window

Caret took me by surprise. With over 14,000 users, Caret isn’t obscure by any means, but it did take some serendipitous searching to find this well-received and seemingly feature complete editor.

Indeed, Caret feels a lot like Sublime Text in your browser. And what’s more, it opens files straight from the Chrome OS Files app and offers the most extensive set of options I’ve seen for a Chrome editor yet: everything from fine-grained editor options to keyboard shortcuts and even macro support.

The 'Command Palette' offering command suggestions.

The ‘Command Palette’ offering command suggestions.

Caret uses Ace like several other editors, but with many more features already working out of the box rather than sitting in an interminable backlog. With so many obvious and hidden features, it can be overwhelming trying to find a single function in all the menus, but Caret inherits the “Command Palette” from Sublime Text, throwing every option behind a simple search box that means you won’t need to remember what shortcut you assigned to an obscure function you use only once a month.

The only downside is the lack of Git support – and considering Tailor is one of the few (if only) Chrome editors supporting it, it’s a fairly small point, but one which would make Caret even more enticing than it already is. The developer has indicated he’d prefer an “intent” system like Android to leave Git duties to an external app. Though the more generalised Web Intents API has been disabled since Chrome 24, its reappearance down the line could bode well for Git support in Caret and any apps looking to make Chrome a killer cross-platform development environment.

Get Caret in the Chrome Web Store

Have a favourite Chrome editor we didn’t cover? Let us know in the comments!

  • niagr

    Great post, very useful.

  • Kenny Strawn

    I’m surprised Google’s other code editor wasn’t even considered here…

  • MaitreyaVyas

    Using Caret!

  • bmlsayshi

    Thank you for this article! When I first got an arm chromebook a year ago I looked into this and couldn’t figure out a good solution without using another linux distro. It’s nice to know that solutions have been created in the past year :)

  • Ian

    You fogot to mention SourceKit!

  • http://www.benjaminbradley.com benjaminbradley

    I love Caret. I use Sublime Text on my other computers so this was a natural transition when using a Chromebook. I also heavily use CodeAnywhere for dev work.

    • Obed David Perez Uri

      Benjamin could you please tell me more about your Chrome Dev experience?

  • Alex

    Where’s stackedit mention?

  • https://www.kevinhorek.com/ Kevin Horek

    https://codio.com/ is my favorite right now

  • http://www.mobiers.com/ Mobiers.com

    I really love the Text, it reminds you the the dream viewer editing. Easy to use, this post simply explain all the text editor apps for chrome.

  • ojdon

    Neutron drive needs a well deserve mention. Edit drove files on the fly!

  • mik straz

    do any of there offline editors have auto-complete or code completion…and if not do you know of any that do..

  • Stu Wild

    I have my Samsung 5 series setup with Ubuntu using the Crouton install on an external SanDisk Cruzer USB, then kept it lightweight with Brackets (that has code-completion) syncing with DropBox. This means I could setup a local LAMP server as well.

  • Troll lol

    Caret has to be the best text/code editor for chrome, its only got one downside for me, it doesn’t save code in the right file type, instead it saves it in a .dat filetype, then you have to rename the file to the right one, it saves already created files correctly though, just newly created files.

  • Карим Мусаев

    Tailor +
    Caret +
    Text
    Zed Code Editor
    ShiftEdit
    Neutron Drive
    Koding +
    Codenvy
    Akshell

  • Zef Hemel

    Consider having a look at Zed (https://chrome.google.com/webstore/detail/zed-code-editor/pfmjnmeipppmcebplngmhfkleiinphhp ) I think it is way more capable than many of the editors mentioned here — see website: http://zedapp.org