Markdown is a widely used tool to create styled text. It is most popular where text needs to fill different roles: to be readable, but also to fit into a designed page or app.
Used by Wikipedia, Squarespace, Github, and countless other entities, knowing Markdown is a great skill to have.
I designed this editor to test Markdown syntax, and to also teach myself the basics of ReactJS and SASS.
Some quick wireframes helped me stay focused and iterate ideas without digging into too much code at first.
With the user flow defined, the next step was to write some code! I use Codepen.io to quickly test out ideas and share with others.
The challenge I faced as I was learning React was how state is handled between parent and children components. Once I understood the order of operations, it became similar to coding in HTML.
SASS was very helpful here as well, it saved me from writing lots of code to cover multiple browser platforms.
The cycle of reading, trying, failing, and learning....
The final product works well, and was a great way to teach myself to code in React. I've embedded it below so you can try it out!
See the Pen React Markdown Previewer by Corey (@SquawPaw) on CodePen.