The best free tools for frontend developers

A frontend project rarely fails because of the framework. It fails because the build is slow, nobody runs the tests and the bundle grows unnoticed until the site takes four seconds to load.

These eight tools are free, they work together and they are the first things I install on a new project.

Build tool

Vite

Instant dev server and fast production builds; the default choice for almost any modern frontend.

vite.dev

Framework

Astro

Ships zero JavaScript by default, which makes it hard to build a slow content site with it.

astro.build

Styling

Tailwind CSS

Utility classes that keep the CSS from growing forever as the project ages.

tailwindcss.com

Lint and format

Biome

Linter and formatter in one binary: replaces a pile of config files with a single fast tool.

biomejs.dev

Unit testing

Vitest

Tests that run in milliseconds, so people actually run them before pushing.

vitest.dev

End-to-end testing

Playwright

Real browser tests that catch the bugs unit tests never see, with traces you can replay.

playwright.dev

Component workshop

Storybook

Build and review components in isolation; invaluable once more than one person touches the UI.

storybook.js.org

Bundle size

Bundlephobia

Check what a dependency costs in kilobytes before you install it, not after.

bundlephobia.com

Pick the build tool and the linter first: those two decide how the rest of the project feels day to day.

Need it built, not just chosen?

Web apps, APIs, infrastructure and interfaces. Freelance from Barcelona, working with clients anywhere.

Get in touch


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *