Last week I drew up a wireframe for a code beautifier. The next day, I decided to turn it into a real tool. The whole project took less than two days to complete.
I'd been thinking about building a new code beautifier for awhile. The idea isn't unique, but every time I use someone else's tool, I find myself reapplying the same settings and dodging advertisements every single time. 🤦🏻♂️
I wanted a simple tool that worked well without the hassle, so last week I grabbed some paper and started sketching one out. I'm a huge fan of wireframing by hand. There's just something about pencil and paper that makes the design part of my brain work better than staring at a screen.
After drawing the above wireframe, I was immediately inspired. The next day I took a break from my usual routine to turn it into a real tool. 👨🏻💻
Here's what I came up with: surrealcms.com/beautify
The editor itself takes up most of the screen, but it blends in so you don't really notice it. Instead of wasting space with instructions, I used a placeholder that disappears when you start typing.
At the bottom, I created a status bar that shows live stats about the code including the current mode, indentation settings, number of lines, number of characters, and document size in bytes. The right side of the status bar has a Clear and Clean + Copy button. The center has a logo shamelessly plugging my own service.
I don't think many developers really code on phones, but I wanted this to work on mobile devices anyway. Aside from the usual responsive techniques, I had to watch the window size and adjust the tab position when the screen becomes too narrow.
I'm using flexbox + viewport units for vertical sizing, so I also had to add a check for iOS and set the height manually because of this fun little quirk.
I wanted to keep the most commonly used settings easy to access, but also expose advanced settings for each mode. To do this, I made the settings button a popover with a link to more advanced settings inside. When a setting is changed, the UI updates immediately and the settings are persisted to localStorage.
The Advanced Settings link opens a dialog with tabs for each mode. Despite having over 30 settings total, everything is organized and easy to access so users won't feel overwhelmed.
Dark mode is all the rage these days, so it's enabled by default. There's also a light theme for those who prefer it. The entire UI changes, except for popovers and dialogs.
I considered using
prefers-color-scheme, which coincidentally
landed in Firefox 67 today, but I decided a toggle would probably be better. Browser support
isn't that great yet, plus developers are weird. (For example, I use macOS with the light theme, but
my text editor is dark.)
Here are the most relevant features:
- Syntax highlighting with tag/bracket matching
- Paste or drop files to load code
- Auto-detects indentation preference based on pasted code or dropped file
- Light/dark themes
- Clean + copy in one click
- Keyboard shortcuts
- Most JS Beautify options are configurable
- Settings get stored indefinitely in localStorage
- Minimal UI without ads (just an unobtrusive plug to my own service) 🙈
I also threw in a few easter eggs for fun. Try refreshing the page, exploring shortcuts, and sharing it on Facebook or Twitter to find them. 😉
Tools & Libs
I'm a big fan of Vue.js. It's probably overkill for this project, but the Vue CLI let me start building with all the latest tooling via one simple command.
vue create beautify-code
I didn't have to waste any time scaffolding, which helped me build this out really quickly. Plus, Vue came in handy for things like live stats, changing themes, toggling settings, etc. I used various Element UI components for things like buttons, form elements, popovers, and dialogs.
Finally, everything was hand-coded in Visual Studio Code. 😅