Introducing the new rich text editor — Writing better on Hashnode

Greetings, fellow developers! Hope your day is going well. :)

I'm here to tell you about two new things, Broadcasts, and the new WYSIWYG Hashnode Editor.

Broadcasts? Sounds familiar… 📣

Broadcasts are stories from the Hashnode team; a medium through which we would keep you updated on everything that's Hashnode meta — platform announcements, updates, and tips.

Yes, we took inspiration from Github Broadcasts. Please don't tell them. ;)

Broadcasts don't appear in your feed; they are only visible on the right sidebar in the homepage, until you dismiss them.

Coming to the second thing, — the crux of this broadcast — I'm here to give you a rundown on all the features that are supported in the new WYSIWYG Hashnode Editor. 📣

The New WYSIWYG Editor 💁

What You See Is What You Get

You've probably already been acquainted with the new editor by now. The salient feature of the editor is that you have an instantaneous preview of your content.Speaking of preview, there are various ways through which you can format your content.

Floating Toolbar

The Floating Toolbar appears, when you make a text selection in the editor. You can choose the appropriate action from the toolbar to format your text accordingly. Here's everything you could do from within the toolbar:

• Styling inline text to Bold, Italic, and CODE
• Adding a link to a text selection
• Turning a selected paragraph of text into a heading, block-quote, unordered/ordered list
• Turning two or more selected paragraphs of text into a code-block

Check out the above GIF to get it all in a jiffy. (Now you know how I pronounce GIF 😅)

The Plus Toolbar

The plus toolbar, which appears at the start of an empty paragraph, can be used to add:

• an image
• an embed block
• an empty code block
• a markdown-format table (which will be converted into a HTML table, on publish)
• a horizontal divider

Markdown Shortcuts

For developers who prefer a keyboard over a mouse; the editor has support for a few common markdown shortcuts. Please refer to the above GIF, for an overview of the BOLD markdown shortcut in action.

Embed anything

The new editor let's you embed anything from the web, from a tweet to a YouTube video. Just click on the embed button in the Plus Toolbar, and paste the URL. Here are some random embeds.

David Heinemeier Hansson's popular tweet:

My favorite Steve Jobs speech:

Random BBC podcast from SoundCloud:

We ❤️ Open Source

We'll be open sourcing this new Editor 🎉, along with a guide so you can capitalise on our efforts, and get upto speed, if you are looking forward to building a rich text editor for the web; or you can just take a gander at what's underneath. 🙂

There's still a lot of room for improvement to make the current editor, one of the best WYSIWYG editors out there; and we are committed to get there soon.

We appreciate all the positive words, feedback, and suggestions that you have been sending our way. Please keep them coming, while we strive to stay consistent with our efforts to keep improving your Hashnode experience.