Modern fluid typography editor

Web app created in Svelte for editing and keeping track of fluid typography values in web development projects. It took the Internet by storm on the launch day - it was acknowledged and shared by many notable figures in the web development community. It reached over 8,000 visitors and over 100 stars on GitHub in the first week since launch.

As I was going over “CSS for JS devs” course by Josh Comeau, I came accross his implementation of fluid typography graph. Although it was made for demo purposes, it inspired me to build upon his work and create a fully-fledged tool that developers could use in their day-to-day work.

I had a project lined up at work and I wanted to quickly build a tool that would help me fine-tune fluid typography values. As I was learning Svelte at the time, I wanted to create a Svelte app from scratch to solidify my understanding of the framework.

This app features two modes or views:

Graph mode - visual representation of fluid behavior
Table mode - track values at specific customizable set of breakpoints

Graph mode — In "table mode", users can track fluid typography values at specific breakpoints. These breakpoints can be edited.

The app also allows users to store values and share them with others via URL. This comes in handy in documentation or project code and users can easily check out the fluid behavior and better understand how this configuration behaves.

After week or so of building this app, I’ve decided to share it with the world and sent out the following tweet.

🎉 I've launched a new project 🎉

Introducing "Modern Fluid Typography Editor" - an awesome & handy tool for any #frontend #webdeveloper . Create and fine-tune fluid typography values in your projects with ease. It generates a #CSS clamp code snippet.https://t.co/nkDUg0xTPS
— Adrian Bece (アドリアン・ベツエ) (@AdrianBeceDev) December 6, 2021

In just an hour, it went somewhat viral and it was retweeted, liked and commented on by many notable figures from the development community like Jen Simmons, Brad Frost, Josh Comeau, Stephanie Eckles, Addy Osmani, Henri Helvetica, FrontendMasters, Vercel team and many others. Needless to say, the project was a huge success and I was happy that it reached so many people.

Community tweets about the project — I am grateful to have received this overwhelming support from the incredible dev community. This tweet has been viewed over 110,000 times as a result!

I saw your project the other day and was totally enamored by the design. It’s very well done. The tool itself addresses a helpful use-case too. Great stuff.
Addy Osmani
Engineering Manager at Google

The project went beyond Twitter and it was featured in numerous newsletters like Codrops and aggregate sites like WebDesignNews. In its first week, it achieved 8,000 visits and over 100 stars on GitHub.