Final Fantasy XIV Raid Planner

raid.yaji.dev

This is a tool for quickly diagramming raid strategies for Final Fantasy XIV, inspired by RaidPlan.io.

It is a fork of XIVPlan by joelspadin

Non-exhaustive list of changes from the original:

• Plans are stored on the Server when "Share" is pressed. For sharing/editing seperate share/edit links are used similar to raidplan.io
• Share links have a read-only view without the edit UI
• Rectangle Selection

Development

This project has two processes during local development: a Vite frontend and a Bun/Express API server for plan sharing and persistence.

Prerequisites

• Bun (used by the API server and recommended for installing dependencies)

Setup

From the repository root:

bun install
cd server && bun install

Running both servers

Use two terminals.

Terminal 1 — frontend (repository root):

bun run dev

Vite serves the app (by default at http://localhost:5173) and proxies /api requests to the backend.

Terminal 2 — API server (server/ directory):

cd server
bun run dev

The API listens on http://localhost:3001 by default. Vite’s dev proxy forwards /api to that port, so the frontend can call the API without extra configuration.

Sharing and loading remote plans requires the API server to be running. Other editing features work with only the frontend.

Usage

Click Help in the upper-right or press F1 to see an explanation of the UI and a list of keyboard and mouse shortcuts.

The left panel lets you adjust the appearance of the arena and add objects to it by dragging and dropping them onto the arena.

Click an object in the scene to select it. Drag one of the handles that appears to adjust the object's size and shape, or drag elsewhere on the object to move it.

The right panel shows a list of all objects in the current scene. You can select and delete objects here, and you can drag and drop objects in the list to change the layer in which they are ordered (objects at the top of the list render above ones at the bottom).

The right panel also lets you change detailed properties of the selected objects. If multiple objects are selected, then you can change any property shared by all of the objects. If a property's control does not show a value, that means the selected objects have different values for that property.

At the top of the view, you can add new steps to the plan and switch between steps.

Saving and Sharing Plans

You can share a raidplan with others by pressing the "Share" button in the top toolbar. This will generate a share and an edit link. The edit link will allow you to update the raidplan that people see at the share link.

Background Images

When loading an SVG file as the arena background image, XIVPlan will inject the following CSS variables:

Variable	Description
--xiv-colorBackground	Color of the background outside the arena.
--xiv-colorArena	Color of the arena floor.
--xiv-colorArenaLight	A slightly lighter arena floor color.
--xiv-colorArenaDark	A slightly darker arena floor color.
--xiv-colorBorder	Color of the border around the arena floor.
--xiv-colorBorderTickMajor	Color of the major tick marks when border ticks are enabled.
--xiv-colorBorderTickMinor	Color of the minor tick marks when border ticks are enabled.
--xiv-colorGrid	Color of grid lines.

Alternatives

RaidPlan.io now supports FFXIV.

FF14 Toolbox Gaming Space is a more powerful tool that supports animations and much more. I find its UI cumbersome to use though, so it is not well suited to quickly diagramming during raids.

XIVPlan the original.

Icons from FFXIV

Many of the icons are copied directly or derived from Final Fantasy XIV game assets. To make sure icons are processed consistently when they are updated, for example when new jobs are added, the upstream project uses a separate tool for extracting and editing icons. See https://github.com/joelspadin/xivplan-icon-generator for more details.

If you want to add a new image from a game asset, please do not use images that were extracted and possibly modified by other people. First, make a PR to add it to the icon generator. Then use the icon generator to extract it directly from the game and resize it as needed. Then you can include the result of that in a PR.

Credits

Undo/redo logic is based on frontendphil/react-undo-redo

Job, role, marker, and enemy icons are © SQUARE ENIX CO., LTD. All Rights Reserved.

Limit cut counter icons by yullanellis.

Some arena background images by kotarou3.