The modern world recognizes the power of words. With Internet being transformed into an information hub, more and more people hook onto it to monitor all sorts of stuff ranging from food to technology to travel and leisure. In such a setting, one of the best ways to make oneself useful is by being a part of the community that makes such valuable information available. Writers and bloggers are an enormous part of this community. And this post is about a tool that is bound to make the work of bloggers and writers easy. We’re talking about StackEdit here and trying to find out how much water this online in-browser editor holds.

StackEdit – In Browser Editor for Smart Writers

When you hear the name StackEdit, it hardly strikes you as an online writing tool with awesome features that can simplify the work of bloggers and writers to a great extent. But that’s exactly what it is. StackEdit is an in-browser Markdown editor that promises to deliver an unrivalled writing experience. It lets you create articles and blog posts that you can publish on a number of social platforms simultaneously. And if you’re thinking there’s nothing great about it, wait till you hear about all the controls it offers you.

The tool encompasses almost the range of capabilities packed into NotePad++ or WordPad or other offline popular writing tools. Of course it isn’t as diverse as Microsoft Word, but as far as blogging or posting articles is concerned, it lets you achieve everything you need. Powered by What-You-See-Is-What-You-Get controls, the editor helps you visualize the final rendering of your documents before you actually post them online. What’s more, you can integrate StackEdit with Google Drive and Dropbox to save your documents directly to the cloud.

Additional highlights of the tool include:

• “Scroll Sync” extension to bind the editors’ scrollbars so that you can keep a constant eye on the output’s final look while writing
• Built-in “Spell checker” to carry out multilingual spelling checks and display suggestions for correction
• Various customizable options available to personalize writing settings and create personal extensions
• Allows direct upload of documents to Blogger, GitHub, Tumblr, WordPress, etc
• Documents can be uploaded in Markdown format, HTML, or using Underscore template engine
• Facilitates collaboration on common documents, automatically merges modifications from multiple collaborators
• Supports insertion of inline comments and discussions like Word or Google Docs
• Includes an offline mode that allows you to write on the move just like a desktop application

With advanced capabilities of inserting mathematical expressions into documents and creating UML diagrams using simple syntax, StackEdit is quickly becoming one of the most popular in-browser writing editors of all time.

Here’s how to use StackEdit

Visit the tool’s homepage and click on “Start writing now!” in the top menu. This will redirect you to a screen divided into 2 panels – left one for editing and right one to preview the output. The preview window is toggle-able and you can close it if distracts you while writing. By default you’ll see some text displayed in the editor. It is dummy text that you can delete but we’ll advise against it since going through it can give you helpful pointers about the tool’s syntax.

The syntax of the tool resembles HTML with tags specifying text attributes, for example, to insert icons tags are used. Catching the other shortcuts is simple too. We quickly made out that to make some text bold we had to enclose it within asterix pairs (**text**) and marking some text as headings (H3) required prefixing it with the same number of hash signs (###). Similarly, figuring out the trick behind inserting bullet lists and keyboard button images was easy.

We recommend that you read the full dummy text displayed in the editor to know about StackEdit’s features in detail. If you do need to delete the text, copy-past it elsewhere and then go ahead. This could save many of your potential work hours that you might have to spend in the future to find out precious shortcuts about the tool (like how to insert a table of contents or create UML diagrams using text syntax).

In addition to the text you’ll find a host of other editing options in the file menu including Bold, Italics, Hyperlink, Code-Sample, Image, etc. Simply click on any of them to insert the respective tags in the text and you’ll be good to go. In the same menu you’ll find undo-redo buttons as well as a button that allows you to insert comments into the documents you create.

On the left-most corner of the file menu you’ll find a hash button which reveals additional options like import / export document, share, publish, convert to Markdown, etc. It will also give you access to account settings. Lastly, on the right-most corner of the file menu, a folder button will allow you to create new document, delete an existing document, as well as manage your documents.

Plus VS Minus

We were actually quite impressed by StackEdit. The tool was so simple, yet so brilliant. It gave us access to all options needed to create perfect looking documents and upload them to various social platforms easily. Moreover, it included a bunch of editing options and features at par with popular offline editors like Word.

But, there were also a few drawbacks we noticed, the biggest one being the absence of a ‘Save’ button. The documents were stored only in the browser’s local storage. There was no option to create an account wherein you could perhaps save the documents you create. So in case the browser crashed, we could lose all our text and changes. Another one was that although once connected to the tool’s site, you can get disconnected and work offline, to initially establish a session you need an Internet connection. This contradicts the tool’s claim to support offline working.

• Brilliant in-browser Markdown editor for writers / bloggers – @stackedit stackedit.io/ via @supermonitoring

  Tweet this

Final Verdict

StackEdit is actually a great tool, though with a few limitations. But then considering it doesn’t need you to pay even a single penny, not having to sign up could be counted as a benefit if the makers can provide a way to save documents.

No matter how talented or gifted a developer is, at some point and for some tasks, he might need a little help, if not from a peer then from an online source. Any technology expert can vouch for the fact that unless you have photographic memory (literally) you simply cannot remember each and every library, syntax or API related to a particular programming language at any given point of time. Thus, each tech-guru keeps monitoring the Internet to find out and keep handy some really useful websites or online tools that he can access as and when needed to come up with a perfectly working code snippet.

However, at max you can remember a handful of dedicated websites or URLs. What if there could be a way for a whole bunch of code development related documents to be present at one place for easy access? Moreover, what if this library (of sorts) could be customized on choice and updated with the latest changes? If you’re a programmer, you’re probably quite intrigued about what it is we’re getting at. Well, we’re talking about none other than DevDocs – the online super interface that combines multiple API documentations in a fast, organized and searchable manner.

DevDocs – a programmer’s heaven!

And we mean that! The guys behind DevDocs modestly call it an API documentation browser when it actually is a lot more than that. It is in fact, a hub for quick-access reference manuals of just about every popular programming language and library that is used to create frond-ends. It specifically lists all APIs of these languages with their official documentation in such a manner that makes using the tool seem like child’s play. There is no learning curve required for using the tool; you can read through it or search for a particular API just like you would with an e-book. Remember the help and guide that are installed on your computer when you install a programming language’s editor? Imagine the guide of every front-end language you know combined into one omnipresent online tool – yep! That’s DevDocs for you.

The awesomeness of the tool doesn’t end there. The languages whose manuals are present have an arrow displayed before their name on which you can click to expand the manual contents. The most interesting part is that as any other tool, there might be a few languages whose reference manuals you might not find on first access (meaning they’re disabled by default). But before you say ‘aha!’ let us tell you that the tool allows you to instantly download the manual for those languages from various online sources with a few clicks.

Now if you’re wondering what happens to those manuals if you don’t have an Internet connection – well, DevDocs has a solution for that too. It gives you the option to download the documentation for any language onto your system and use it in ‘Offline’ mode. Could it gain any more points in user-friendliness?

How to use the tool

As mentioned earlier, there is practically no learning curve involved and you can verify that by visiting the tool’s website. As soon as you land there, you’ll see different front-end programming languages listed in a tree-view manner in the left hand side of the screen. Click on the arrow adjacent to the language name to expand its contents. Then click on any item to view its associated material on the right hand side.

By default, you’ll be able to view the manuals for 5 – 6 most used languages with the others listed under a ‘DISABLED’ marker. To view the documentation for any language that’s disabled, ‘Enable’ it first. For this you can either click on the enable link that flashes on hovering over the language name or go to ‘Select Documentation’ setting at the bottom of the left hand panel. Then select the language and version you wish to enable and see the associated content downloaded into the tool within seconds.

Convenient options on the upper right corner of the screen allow you to:

• Offline: download manuals to your computer to refer offline
• About: find out who created the tool, about the associated licenses, about plugins and extensions and answers to frequently asked questions
• News: browse notifications about new documentations added to the tool
• Tips: view the guide to using the tool

The tool is open source and it invites users to submit their ideas, any bugs they find and their suggestions to improve the code. It’s hosted on GitHub and can be deployed easily to run or host user versions.

Pros VS Cons

You mean more benefits that the obvious ones mentioned above? Actually, there are a few worth mentioning:

• The DevDocs interface is highly responsive, powered by Fuzzy search algorithms that makes searching for keywords in documentations superfast
• The tool is fully optimized for mobile devices
• You can install the tool as any other search engine (like Google or Bing) since it supports OpenSearch
• A number of easy keyboard shortcuts make working with the tool very simple

Trying to find faults in a tool that’s as helpful and as simple-to-the-point-of-cuteness is just wrong. Its open source so free, it combines so many documentations at one place, is self-updating and is easy to use. There’s simply nothing wrong with it.

• Reference manuals for 50+ front-end languages within one simple tool: devdocs.io/ @DevDocs via @supermonitoring

  Tweet this

Concluding Lines

If you haven’t used it yet or don’t plan to use it, at least cast a cursory glance at it. You won’t be able to move over it if you even remotely have anything to do with coding.