Wern Ancheta

Adventures in Web Development.

Introduction to Octo-wysiwyg

| Comments

I’ve quit my job recently so lots of time freed up for me to learn something and work on personal projects that I’ve been thinking of doing since last year. And so the past couple of weeks I’ve been busy working on a personal project and learning more on tooling to improve my productivity as a developer.

Enough about my life story. This blog post is about the project that I was working on recently, and that is Octo-wysiwyg. The first project that I finally got started among the many others that have been buried in the todo list for ages.

Octo-wysiwyg is an app for easily creating posts in Octopress. Yes Octopress is pretty much complete and you can easily create posts by opening up a terminal and using the rake new_post['title of your blog post'] command. But after that you usually have to search for the newly created file in the octopress/source/_posts folder and open it up on a text-editor before you can begin writing. That’s ok but you have to go through those steps every time you want to write something. And also you don’t get a live HTML preview of the things that you’re writing since you are on a text-editor. You can probably use sites like markable.in or dillinger.io if you only want a live preview but after that you would need to paste what you have written into the original markdown file that was generated by Octopress.

Enter Octo-wysiwyg, this app allows you to easily create posts by adding keyboard shortcuts to generate common markdown syntax like headings, images, blockquotes, and code blocks.


Copy it anywhere on your file system. Then update the config.rb to include the proper file paths.

This app depends on the following ruby gems so you also have to install it before you can start using the app:

  • sinatra
  • redcarpet
  • data_uri
  • stringex

Using the App

Execute the following command from the terminal:

ruby /path/to/octo-wysiwyg/octo-wysiwyg.rb

Or if you want to use shotgun:

shotgun /path/to/octo-wysiwyg/octo-wysiwyg.rb

Then access it from the browser when using Sinatra:


Or shotgun:


Creating a New Post

You can create a new post by accessing http://localhost:9393/new from your browser. The port number assumes that you’re using the shotgun ruby gem. If you’re using sinatra use 4567 as the port. This will give you the following UI:

new post

All you have to do is input the title of your post and click the ‘create post’ button or press enter.

Updating Existing Posts

There are two ways to update existing posts. You can either do it from the edit page (http://localhost:9393/edit) or from the list page (http://localhost:9393/list). If you do it from the edit page you will have to browse for a markdown file from the octopress/source/_posts folder and click on ‘upload’. If you do it from the list page, you can simply select from the list of posts by clicking on the link:

list of posts

Once you’ve selected a post you will be redirected to the edit page which looks something like this: edit page

Note that the posts are arranged based on the date that the post was first published.

Deleting Posts

You cannot delete existing posts. However, you can set the post to publish: false. This will prevent the post from getting published on your blog the next time you deploy using rake gen_deploy.

Keyboard Shortcuts

You can use the following keyboard shortcuts to easily generate markdown syntax:

  • ctrl + s – save post
  • ctrl + 1 to ctrl + 6 – headings 1 to 6
  • f1 – code block
  • f2 – read more link
  • ctrl + b – bold
  • ctrl + i – italic
  • ctrl + q – blockquote
  • ctrl + g – insert markdown image tag
  • ctrl + u – upload image – this will prompt you to upload an image, the uploaded image will be automatically added on the current document and the uploaded image will be copied over to the octopress image directory that you selected


A demo of the app is available here though I’ve disabled the upload feature to prevent usage abuse.

Future Plans

As people usually say, start with something simple and then iterate afterwards. I’m pretty much satisfied with the current features of this app now. The proof is that I’m currently using it to write this blog post. However I want to make use of my remaining free time to work on another project so I’m going to suspend the development of this project for now. Here are some of the features that I plan to add in the future:

  • emmet-like syntax for generating html and css code
  • creating pages
  • line numbers for markdown


If you want to contribute to this project, or you noticed some issues, or you want to throw in some ideas for the next version please visit the octo-wysiwyg github page I’d really appreciate i