DEV Community

Cover image for How I built a "Text to Handwriting Converter" ✍️
Fatih Telis
Fatih Telis

Posted on

How I built a "Text to Handwriting Converter" ✍️

Hi everyone, I hope you are all fine. 😊

Today, I want to talk about how I developed a text to handwriting converter for my all-in-one toolbox project - 10015.io.

When I decided to code a text to handwriting converter, I analyzed the tools on the web and the main problem was there are lots of settings which confuses people in these tools and it is not easy to get the result immediately. So, my main aim was to build a "minimalistic converter" which does all the dirty job behind the scenes.

There are just 3 settings in the tool I developed. You can choose:

  • Handwriting font
  • Ink color
  • Paper type

That's it. I didn't add any other settings which will make the tool complicated. Here is the settings section of the tool.

Text to Handwriting Converter

You can choose different paper types as background. I have a configuration file for each paper type which adjusts the paddings and line heights automatically. You can even send a love letter to your lover by using this tool. πŸ˜‰

Text to Handwriting

Here you can create your own handwriting text.

https://10015.io/tools/text-to-handwriting-converter

I used "html2canvas" npm package for converting the results into jpeg and "jspdf" package for converting it to PDF. All other process is to adjust the paper layout and text. For adding Google Fonts to the project dynamically, I used react-webfont-loader by dr-kobros.

For more online tools, you can visit 10015.io.

If you have any question about the development or suggestions about the text to handwriting converter, feel free to ask.

Top comments (0)