Building small web tools has become one of the ways I learn what actually works in the browser.
Recently, while working on Toolsyte, I built a Football Formation Builder that allows users to create a football lineup visually by choosing a formation and positioning players on a pitch.
The goal was fairly simple: make something that works directly in the browser, is easy to understand, and doesn't require users to create an account just to build a formation.
You can try the Football Formation Builder here:
https://toolsyte.com/tools/sports/football-formation-builder/
What I wanted to build
The basic idea was to give users a football pitch where they could build their own team visually.
Instead of creating a static page showing diagrams of formations, I wanted the formation itself to be interactive.
A user should be able to choose a formation, see the players arranged on the pitch, and customize the lineup.
This also meant thinking beyond just desktop screens. A football formation builder is something people may open on a phone, so the interface needed to remain usable on smaller screens as well.
Keeping the tool browser-based
Toolsyte is primarily built around lightweight web tools, so I didn't want this project to require a large framework or complicated infrastructure.
The formation builder uses the same general approach:
HTML for the structure
CSS for the interface and football pitch
JavaScript for the interactive behaviour
Keeping the tool browser-based also means that most of the interaction can happen immediately on the page.
For this type of utility, that simplicity was important to me.
The football pitch was the interesting part
A normal calculator usually follows a straightforward pattern:
Input → calculation → result
A formation builder is different.
The result itself is visual.
The interface has to represent a football pitch while placing multiple players in positions that make sense for the selected formation.
For example, changing formations means changing how those player positions are distributed across the pitch.
That made the project more interesting than simply displaying a predefined image for every formation.
Making formations reusable
One thing I wanted to avoid was treating every formation as an entirely separate interface.
The pitch remains the same.
What changes is the arrangement of the players.
That makes it possible for the application to use the selected formation to determine where the players should appear rather than loading a completely different pitch every time.
It also makes the tool easier to expand as additional formation options are added.
Responsive design mattered more than I expected
A football pitch naturally wants a reasonable amount of screen space.
Desktop gives you plenty of it.
Mobile doesn't.
So part of building the tool was making sure that the pitch, players and surrounding controls could still work when the available width became much smaller.
This is one of the recurring lessons I've had while building web tools: something that looks simple on desktop can require considerably more thought once you test it on a phone.
Building the tool as part of a larger collection
The Football Formation Builder isn't a standalone project.
It's part of Toolsyte, where I've been building different browser-based tools, calculators and interactive utilities.
That has influenced how I approach new tools.
Instead of asking only:
"Can I make this?"
I've started asking:
"Can someone understand what this does immediately?"
and:
"Can they actually use it comfortably without unnecessary steps?"
Those questions have become increasingly important as I've built more tools.
What I learned from this project
The biggest lesson wasn't really about football.
It was about building interactive tools around visual information.
A traditional calculator can hide most of its logic behind a form and show a number at the end.
With something like a formation builder, the interface is part of the result.
Player positioning, pitch proportions, controls, responsiveness and usability all have to work together.
It was a useful reminder that even relatively small web tools can involve interesting UI problems.
What's next
I'm continuing to experiment with interactive tools on Toolsyte, including calculators, quizzes and other browser-based utilities.
For the Football Formation Builder specifically, the aim is to keep it useful without turning a straightforward tool into something unnecessarily complicated.
If you're interested in trying it, you can find it here:
Football Formation Builder:
https://toolsyte.com/tools/sports/football-formation-builder/
I'd also be interested to hear how other developers would approach a visual tool like this using plain JavaScript.
Top comments (0)