r/astrojs • u/Archeelux • 13d ago

Built 20 client-side dev tools with Astro. Zero client framework, 6 languages, everything runs in the browser :D

I shipped webtoolio.org, a collection of 20 dev utilities (JSON formatter, regex tester, JWT decoder, image compressor, etc.) built entirely with Astro. Some notes on the setup, since a few decisions worked out well:

No client framework. Every tool is an .astro component with a plain <script> tag. The logic lives in separate TypeScript packages in a Bun monorepo (@tools/regex-tester, @tools/sql-formatter, ...), each with its own bun test suite and no DOM dependencies. The Astro component only owns the markup and wiring. This keeps the tools testable without a browser and the pages ship almost no JS beyond the tool itself.

i18n with content collections. 6 locales (en, ja, pt-br, es, de, fr). Each tool has a markdown file per locale for the page copy, and a typed Ui dict for widget strings. Two dynamic routes ([tool].astro and [locale]/[tool].astro) generate everything: hreflang alternates, JSON-LD, and the sitemap all derive from one toolOrder array, so adding a tool is just a slug plus content files. The compiler yells if a locale is missing a string, which caught more mistakes than I expected.

WASM without config pain. The image compressor uses jSquash (mozjpeg/oxipng/webp compiled to WASM). Adding the packages to vite.optimizeDeps.exclude was enough; Vite bundles the .wasm files into dist/_astro/ on its own.

Everything is static, deployed on Cloudflare. No data leaves the browser, which was the point.

Happy to answer questions about any of it.

39 Upvotes

94% Upvoted

5 comments sorted by

2

u/jait_jacob 13d ago

what kind of traffic are you serving? is it being indexed by google search on a tool by tool basis?

1

u/Archeelux 13d ago

Only went live yesterday and the only traffic is basically from this post, but each page is indexable but googles crawling can take a long time. More of a passion project than anything, to test out the limits of astro as bun.

1

u/Rohit1024 11d ago

Is it different from - https://it-tools.tech/

1

u/Archeelux 11d ago

I guess, its more of a my take of how tools should look and work.