Redesigned (Wr)editor, Note Manager, and more!

You might have noticed over the course of the past week or so that pieces of Write.app have suddenly changed. I hope it wasn't confusing for anyone but I felt I needed to get the new changes live as soon as they were tested and working. With all the hundreds of new users we've been acquiring over the past 3 weeks I felt it was important that they know that Write.app is actively being improved and worked on almost daily.

So here's what has changed in the past two weeks:

  • The app itself got a nice redesign
  • Added a new support page for users to give feedback
  • Redesigned the homepage
  • Added a new Documentation section
  • Open source surpise (skip to the end of the post to find out what it is)!

Wreditor and Note manager updates

The first thing you'll notice when you log into your account is the new look that Wreditor, our note editor, has gotten. This is the heart of our application and we love it so much that we want anyone to be able to run a copy of it on their own computer or website. So we open sourced it! More about that in a second. First, here's what's changed in Wreditor:

New layout

One of the pieces of feedback we've gotten most often is that many have been confused as to how to change the editor theme and save notes and fiddle with options. Previously, those controls were too hidden. In the redesign I laid them out right next to the editing area. There are no hidden options in the new version of Wreditor. You can still choose which notebook to save your note in (requires that you create a notebook in the Note manager) and make notes public but those options are now out in the open. We also added the ability for you to download your writing as a plain text file. Clicking the link under the save button will download your note to your computer (note that you must have an up to date browser for this to work). If you choose to save a note to your computer you must also press the big save button as well if you'd like your note to be saved to your account as well.

New live preview and distraction free mode

The editor, which is now known as Wreditor if I didn't mention it a million times by now, is now completely rebuilt. It is built on top of CodeMirror, an amazing open source web based text editor. It offers syntax highlighting which is really great if you choose to write using Markdown syntax and lets you choose between 16 different themes. Live preview is no longer side by side with the editor. That was distracting and confusing from what we heard from you, the users. So instead of getting rid of it, we added an icon right next to the distraction-free icon that allows you to jump into and out of live-preview mode as you edit. This is great for users of Markdown. Another great feature for Markdown fans is bracket autocompletion. Brackets, quotes, and parenthesis will now autoclose for you when you type them. Oh, and there's a new option to show line numbers in your notes! Wreditor has been seriously upgraded.

Distraction-free mode has also gotten a bit of an upgrade too. The button to enter distraction-free mode is in the corner of the title box next to the live-preview button. In the new version of distraction-free mode more space is dedicated to your writing. There is no persistent toolbar at the bottom of your screen anymore. To exit distraction-free mode you simply click the arrow icon in the top right corner of the screen. Distraction-free mode now comes with 16 different themes, 3 of which were created for Write.app, one being adapted from the wonderful Mou Markdown editor app for Mac (with permission from Mou's creator, of course), and the rest are pretty standard color schemes you would find in most native code editors.

Note Manager

The note manager has kept the same layout with some minor changes. The link is now called "Notes" rather than "Manage". I found that wording was a bit confusing with Settings being right next to it. The note manager now lists all of your notebooks on the left hand side of the page and shows your notes on the right.

Creating new notebooks is no longer a hidden function. Just give your new notebook a name by filling in the text box below the list of notebooks and hit the 'Create notebook' button.

Filtering notes by notebook and searching for individual notes just got easier too. Clicking any notebook in your list of notebooks will show you all notes saved in that notebook. The search box at the top of the page allows you to search your list of notes by keyword in real-time. As you type the note manager will show you the closest matches as they happen. Can't remember what you called that note with the Chili recipe? Just search "recipe" and the note manager will find it.

Settings

The settings page works the same and has the same layout as before. The only difference now is that its look was slightly updated to match the rest of the app's theme. Sorry, no big updated there this time.

Homepage redesign

As you might have noticed I've redesigned the homepage too. It was due for a serious redesign for quite a while but I was just so focused on the app's functionality that I never got around to it until now. Since the redesign traffic and signups have surged. I think I must have done something right there.

Documentation and Support

One of the big gripes new users have had was the lack of documentation and help on how to use Write.app. The new design has been implemented partly to address those concerns and make it easier to use Write.app without needing help. But I understand that sometimes an intuitive design is not intuitive for everyone. That's why as part of the redesign I created a new documentation section. The documentation is very far from complete but there are currently articles on getting started with Write.app and a guide to Write.app's Markdown implementation and how to use it. New articles will be added over the course of the next month. The list of articles on the docs page now do not all work. Many are blank links. I'm sorry to do that and I understand it can be annoying and misleading. However, rest assured that every article that is listed there will have a link to back it in the coming month.

In addition to help docs I've also created a way for users to easily give feedback. No more annoying mailto: links in the footer. Write.app now has a proper feedback form. Registered and non-registered visitors alike can now get in touch and let me know about any problems or suggestions or even ask questions that the help docs don't address.

Open source surpise

I'm very happy to also announce that Wreditor, Write.app's text editor implementation built on CodeMirror is now open source. You can get a copy for yourself on the official Write.app GitHub account.

Wreditor works completely independently of Write.app. You can use it locally on your own computer without an internet connection. Or you can put it online and use it there. Or you could even use Wreditor inside an existing web app of your own. There are a few differences between the open source Wreditor and the Write.app implementation but for the most part they share much of the same codebase.

Open source Wreditor includes:

  • Theme switching and 12+ themes
  • Distraction-free mode
  • Save notes to your computer, work offline
  • An included web server startup script for those who aren't developers (only tested on Mac)
  • Turn line numbers on/off

Soon I'll be adding the ability for anyone to use their own copy of Wreditor to save notes to their Write.app account using our as-yet unannounced API. Yep, one day soon you'll be able to run a copy of Write.app locally and sync it with this Website.

Interested in seeing how it works? You can check out the demo here.

That's all for today. I'll be sending out an email announcing all this soon too! As always, let me know if you find bugs.

Notes:

Wreditor's known bugs

At this point the one very obvious bug in Wreditor is when you first enter distraction-free mode. The cursor seems to not be where you want it to be. The current workaround is to scroll to the end of your note, click the very end of it so that the cursor is still blinking and hit the backspace key once. It deletes one character that you'll have to fill in again but it resets the cursor position and lets you continue writing from that point on.

More notes