Wordleit Markdown Editor

There is no doubt that most developers love writing blogs or technical articles. Sometimes we love writing about something we learned or tech news or even something personal that we think it might be beneficial for other people, but writing takes time and time is not something that can be easily found within our busy days. Speech to text technology appeared to solve that for us, but it was mainly used by story writers and reporters but not by web developers and tech content creators! For a long time we used that technology to serve the user but not to serve ourselves, and from here I created Wordleit Editor.

Image description

What it does

Wordleit Editor is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. It's supported with Deepgram AI Speech Recognition service.

If you're addicted to tech writing, Wordleit isn't going to help you recover anytime soon, as with Deepgram AI speech and it's super accurate transcription you will be able to speak what's on your mind into an article and then style it with only few clicks or vocal commands. The AI speech to text is also useful for writing articles from your phone anytime during the day.

Wordleit Demo Gif
Markdown Overview Gif

Beside writing with your voice, you can use Magic keys. They are keywords you can use while recording in order to apply a specific markdown action. I tried to include as many as I could and make things as smooth as possible at the same time.

magic keys gif
Magic Keys Demo

Not only you can use speech to text technology from Deepgram but also you can use text to speech where you can make your device read back to you whatever you wrote. this will help you review your articles without having to read it over and over again to spot mistakes.

Also you can upload any mp3 file to Wordleit and receive your mp3 file as a text in the Markdown Editor! This allowing you to transform any audio, course or tutorial you like into an article of your own.

The idea is to make you write more, better, faster and help you write anytime and from anywhere.

Link to the tool live demo:

https://wordleit.herokuapp.com/

How I built it

Wordleit provides side by side preview and it's using MarkedJS so that you have everything Github Flavored Markdown offers and styled with TailwindCSS to match Dev.to dark theme. The toolbar has the most common markdown syntax including tables, code blocks and many more.

My plans for Wordleit as overall is to build free products where AI Speech Recognition services is used for the benefit of developers and my first project on it is this Wrodleit Editor. I built it with Laravel as I have big plans for making it an essential tool for web developers and create user profile for each user where he/she can keep drafts and any unfinished work.

Challenges I ran into

I tried to find API that can convert Youtube video to mp3 to avoid having to use a different tool to do so and then upload the mp3 file to Wordleit. Unfortunately I couldn't find any proper API out there that sends back the mp3 file as a response. I decided to just release the project until I figure this out.

Accomplishments that I'm proud of

I'm proud of the whole project if i'm being honest. It's the first time for me to work with Deepgram AI Speech to text technology but I absolutely loved it! The project now has so many useful features for writers.

1- Side by side preview.

2- Markdown Toolbar. 

3- AI speech to text for writing.

4- Magic Keys for vocal commands.

5- Mp3 to text import.

6- Text to speech.

What I learned

I learned so many things from this project. It allowed me to text my capabilities of learning new technologies and merge them with my current development stack. This is a superpower for a web developer because the market is always changing and new technologies are always arise.

What's next for Wordleit

1- Allowing users to save drafts.

2- Youtube to mp3.

3- Code coloring.

28 Mar 2022

Keywords
Markdown
editor
texteditor
Webdevelopment
Coding
Tools
Tech
Design
laravel
vuejs
tailwindcss
deepgram
texttospeech
speechtotext
mp3totext

Fueler top Icons

We are not just another social platform

We aspire to become a platform that inspire you to create and helps you become self reliant with your skills and proof of work.

CTA msg box Fueler