Montide
A home for everyday developer tools — 93 utilities across 11 features, from JSON and JWTs to images, PDFs and color, all running entirely in your browser. I designed and built the product, the brand, the design system and the motion from scratch.
Visit montide.appTools that respect your data
Formatting a JSON payload, decoding a JWT, removing an image background or signing a PDF shouldn't mean uploading it to a stranger's server. Every Montide tool runs locally in the browser — no sign-up, no uploads, no waiting — so it's safe to use on real work.
A manta for a mark
Montide's logo is a manta ray, a sea-going cousin of the dragonfly on this site. It is built the same way: four translucent wings that blend where they overlap, a tapered slate tail and lavender fins. With its wings spread, the silhouette also reads as an M — mountain and tide in one shape.
The same six colors run through the whole product: every feature color, the status colors and the little wave in the footer are mixed from them, so the app and its mark always feel like one family.
Everything is one keystroke away
Press Ctrl K from anywhere to search every feature, tool and action — including switching theme or language. It matches names, descriptions and keywords, ignores Vietnamese accents, and is fully keyboard-driven, with a highlight that glides between results.
The home page is a launcher you arrange yourself: pin the features or single tools you use most, reorder, hide or recolor them, and jump back into the tools you opened last from the “Recently used” row.
Built like a real dashboard
Every tool lives in the same shell: an icon rail, a feature menu and a header that all take on the color of the feature you are in — blue for Generators, teal for Converters, yellow for Formatters. The layout shares its tokens with the internal dashboards I build at work, so headers, spacing and type all line up. Try both themes:
Make it yours
A preferences panel lets people pick text size, typeface, density and corner radius, or reduce motion. Everything is driven by CSS variables, so the whole interface — header height, sidebar width, controls — rescales live without a reload.
Choices are saved per browser and applied by a tiny script before first paint, so a returning visitor never sees the page jump from the defaults to their own settings.
Small tools, done properly
Each tool gets the same care: live previews, sensible defaults, keyboard-friendly inputs, copy and download everywhere, and your last input remembered between visits.
Heavier work stays local too: images are compressed with WebAssembly codecs in a worker, backgrounds are removed by an on-device model, and PDFs are merged, split, signed and watermarked without leaving the tab. Tools are split into their own chunks, so opening one only loads the code it needs.
Motion with a purpose
Movement explains where you are going. A home card's icon morphs into the sidebar as the page opens, tools rise into place, the active marker glides along the sidebar, and switching theme spreads out in a circle from the button you pressed. The greeting decodes itself from katakana, a nod to this site, and the manta flaps its wings when you hover the logo.
It is all built on CSS and the browser's View Transitions API, with no animation library. Only transform and opacity animate, so it stays smooth on modest hardware, and it switches off with the system's or Montide's own reduce-motion setting.
At home on any screen
On phones the rail folds into a drawer, the home grid packs into a compact two-column layout and every tool stacks into a single column, in both the light theme and a near-black dark mode for late nights.
Under the hood
Next.js 16 with the App Router, React 19 and MUI 9. Pages are prerendered, tools load on demand, image codecs run in a Web Worker, and preferences are applied before first paint so nothing flickers. Structured data, a sitemap and Open Graph cards help people find it.
Try Montide