Use the following buttons to switch between dragging the circle (mobile only!), drawing a tactical line, drawing a pressing line, and moving circles based on their pressing lines :

Drag a circle (mobile only)

Draw a tactical line

Draw a pressing line

Animate circles to the endpoint of the pressing line. Only usable when pressing lines are drawn (button will have a yellow background)

Computer

Mobile

Dragging circle

Drawing tactical or pressing lines

When drawing mode is turned on, all other functionality related to the field (dragging and moving of circles, as well as drawing lines) is disabled.

Instead, you can use the setting menu to set the brush color and width and add extra markings to the field. When you're done, you can turn off drawing mode and resume your other activities

If you're unsatisfied with your work, you can use the 'Clear' button to remove all drawings from the pitch.

If you made a mistake, use the 'Undo' button to remove the last brush.

You can directly import a team through a saved .JSON file.

JSON files need to be imported in one of the two following formats:

IMPORTANT NOTE: Make sure the labels (or keys) are as shown in the template (i.e. #1, #2, etc. to #11). The tool will not recognize the JSON if they are changed.

Be aware that each formation has a predetermined position for each number (for example, the #11 will always be the left striker in a 4-4-2 and a left winger in a 4-3-3). If you download a team, this will be automatically generated for you. The order of the labels and their corresponding players in the .JSON is irrelevant. The #7 in the JSON will always match the #7 in the lineup, whether it's the first or last in the JSON.

Details

teamName: Put your team name here

formation: Recognized inputs for formations are:

Dashes and spaces will be ignored (so for example, '4-4-2 diamond' will also work). Other formations will be defaulted to a 4-3-3.

starting: Put your starting players in the positions linked to that number.

For the starters, you can also specify their shirt number (or any other label (for example: RW) you want to be shown in the circle)

colors:

Colors can be in words ['red', 'blue'], RGB [rgb(255, 0, 0)] (you can also use percentages) and hexadecimals [#ff0000].

secondType: Either 'back-up' or 'opposition'. Other inputs will be defaulted to 'back-up'.

second: Based on the input on secondType, this will contain either the back-up players or the opposition players. For back-up players, you can just add the name to the number as shown in the example. For opposition players you will have to specify the name and number similar to how it's done for the starting players.

oppoFormation: The formation that will be used for the opposition team. The recognized inputs are the same as specified above.

oppoColors: Uses the same format as colors for the main team.

Optional:

circlePositions: When downloading your team, a string containing the specific position of the circles on the pitch is created. This can be used to load your circles in specific positions as opposed to predetermined positions from formations.

oppoCirclePositions: The same as circlePositions, but for opposition circles.

You can download your team in two filetypes: .JSON and .PNG. The .JSON will be downloaded in a similar format as above based on your input when downloading. This can be useful if you want to continue working on your team later.

The .PNG will take a snapshot of the pitch on the right and can be used for sharing your team with others.

If you have any questions, feedback or any other type of remarks, you can find me on one of the following platforms:

Twitter: @peterwolbers

BlueSky: @peterwolbers.bsky.social