Creating Custom Templates

Templates are SVG files. You can design them however you like — any shape, any layout — as long as they include the correct placeholder keys. Joystick Diagrams will replace those keys with your actual bindings when you export.

Template Format

All templates must be in SVG format. SVG (Scaleable Vector Graphics) works in all modern browsers, scales infinitely without quality loss, and can be as large as you need. You can design a template as simple or as detailed as you wish.

How Templates Work

Place placeholder keys anywhere inside your SVG — as text labels, inside boxes, circles, or callout shapes. Joystick Diagrams scans the SVG for these keys and replaces each one with the corresponding binding from your profile.

For the full list of supported keys, see the Template Schema reference.

How to Edit or Create SVGs

We recommend Draw.IO — it's free, available as a web app or desktop application, and works seamlessly with the bundled templates. Other SVG editors may work for creating templates from scratch, but editing the bundled templates with other tools may cause compatibility issues due to how Draw.IO structures its files.

Never overwrite the bundled templates with your customized versions. Application updates may replace them. Save your custom templates to a separate location.

Using the Starter Template

The quickest way to get started is with the Starter Template — a pre-built SVG that includes examples of every placeholder type (buttons, axes, POVs, and modifiers). Download it, open it in Draw.IO, and adapt it for your device.

Step-by-Step

Download the Starter Template and save it to your computer.
Open it in Draw.IO.
Import an image of your device (or leave the placeholder if you don't have one).
Add, move, or relabel buttons, POV directions, and axes to match your device.
Replace placeholder text with the correct schema keys.
Save your finished template as an SVG file.
In Joystick Diagrams, configure the template against your device and test your export.

Starter Template Preview

SVG Editing Tutorials

New to Draw.IO? The SVG Tutorials page has curated video guides covering the basics — selecting and moving objects, editing labels, and connecting shapes.

Contribute your template! If you've created a template for a device that isn't in the library, consider sharing it with the community via Discord. Your contribution could help dozens of other sim pilots.