Post delisted

Hey there! We are sorry, Hashnode moderators think this post shouldn't be on Hashnode. If this is a mistake, please reach out to one of the moderators.

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.

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

Brian Jackson's photo

Wow, hashnode keeps getting better and better!

Salman Kazmi's photo

Hi Syed Fazle Rahman,

Great work! Keep it up. The editor is really crisp.

Hashnode... way to go.

Luis's photo

Is there a link to the editor repo?

Hamish Thompson's photo

It's not open source yet! Luis

Divyendu Singh's photo

The editor is really solid! Can't wait for it to be open-sourced :)

Marek Dlugos's photo

36weeks from publishing the article and the editor is not open source yet :(

Syed Fazle Rahman's photo

Hey Marek, We have been actively working hard to improve other parts of Hashnode. We haven't paid much attention towards open sourcing the editor. However, it is in the pipeline.

Roopak A N's photo

Super cool editor.

I have seen similar on in Dropbox paper. I think you guys forked out from the same project.

Syed Fazle Rahman's photo

Dropbox Paper is not open source. We've built this editor from scratch. UX wise, we have taken inspiration from them. :) Roopak

Lachlan Campbell's photo

Any updates on open-sourcing this? :)