The Design tab is where your map’s visual personality takes shape. Rather than showing a raw event list, it renders a live preview of the full gameplay ruleset — complete with scrolling notes, background, and all active effects — while you work. As you add, edit, or remove events, the preview rebuilds in the background (with a brief loading spinner) so you always see an accurate representation of what players will experience. The sidebar on the right contains the timeline-style event list organized by event type, and a dropdown for selecting which type of event you want to add next.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/InventiveRhythm/fluXis/llms.txt
Use this file to discover all available pages before exploring further.
Layout
The Design tab has two main regions:- Center — Live preview — A 1920×1080 reference render of the gameplay scene, scaled to fit the editor window. The preview is clocked to
EditorClock, so scrubbing and playing back in the editor scrubs and plays back the preview simultaneously. - Right sidebar — Design points list — The expandable event timeline. Hover over it or press Tab to open it. A color-coded dropdown at the top lets you select the event type you want to add; the list below shows all existing events for the current map, sorted by time.
The Design tab has no left toolbox. Background dim and blur are controlled from the View menu in the menu bar and are reflected immediately in the preview.
Live Preview Details
The preview pipeline runs a fullReplayRulesetContainer fed by an auto-generated replay so notes scroll past in sync with the editor clock. The preview automatically rebuilds whenever the map changes, with a 400 ms idle timeout to prevent constant rebuilding while you are actively editing. You can force an immediate full rebuild at any time by pressing Shift + R while the Design tab is focused.
Events marked as ignoredForRebuild — specifically PulseEvent, ShaderEvent, NoteEvent, and storyboard elements — update incrementally without triggering a full ruleset rebuild.
Event Types
The Design tab manages all map events stored inMapEvents. Each type is color-coded in the sidebar and can be targeted with its own dropdown entry.
- Visual Flash
- Color Fade
- Pulse
- Playfield Motion
- Camera
- Other Events
Flash
Creates a sudden burst of color over the playfield. Flash events can be placed in the background (behind notes) or foreground (in front of notes). Useful for accenting strong beats or dramatic moments.Key properties: start color, end color, easing, duration, whether the flash is in the background.Adding an Event
Seek to the target time
Use the playback controls or click the waveform in the bottom bar to position the playhead at the moment where you want the event to start.
Select the event type
Click the color-coded dropdown at the top of the sidebar and choose the event type you want to place (e.g., Flash, Playfield Move, Shader).
Click the add button
Press the add button (the + icon next to the dropdown). A new event is created at the current playhead time with default parameters and selected automatically in the list.
Edit event parameters
The Selection Inspector appears at the bottom of the sidebar, showing the editable fields for the selected event. Modify duration, easing, color values, or other type-specific parameters. Changes are applied immediately and reflected in the live preview after its idle rebuild delay.
Editing Existing Events
Click any event row in the sidebar list to select it. The Selection Inspector at the bottom of the sidebar shows all editable fields. You can also:- Drag an event row to reposition it in time.
- Right-click an event row for a context menu with duplicate and delete options.
- Bulk delete — select multiple events with Shift+click and delete them via the context menu. This is tracked as a
EventBulkRemoveActionin the undo stack. - Bulk clone — select multiple events and clone them forward in time as a group via
EventBulkCloneAction.
EditorActionStack and can be undone/redone with Ctrl+Z / Ctrl+Y.
Previewing Effects
Because the Design tab runs a live gameplay preview, most effects are immediately visible as soon as you place them:| Effect type | Preview behavior |
|---|---|
| Flash | Fires at the correct time when playback reaches the event. |
| Color Fade | Tints the background/playfield in real time. |
| Pulse / Beat Pulse | The pulse layer updates on every frame during playback. |
| Playfield Move / Scale / Rotate | The playfield transforms smoothly during scrubbing. |
| Camera events | The CameraContainer rebuilds immediately on any camera event change. |
| Shader | The shader stack rebuilds when a new shader type is added; parameter changes update without a full rebuild. |
| Layer Fade | Fade is visible in real time. |
| Scroll Velocity / Multiplier | Note spacing changes are visible in the preview during playback. |
Aspect Ratio Enforcement
If the map’s Force 16:9 Aspect Ratio toggle is enabled in the Setup tab (orSettings.ForceAspectRatio in the Design container), the preview area is letterboxed to a strict 16:9 ratio inside an AspectRatioContainer. This matches the constrained playfield that players using non-16:9 monitors will see.
Relationship to the Events Format
The event types available in the Design tab correspond directly to the structures documented in the Map Events reference. Each event type is a strongly-typed C# class (e.g.,FlashEvent, PlayfieldMoveEvent, ShaderEvent) serialized to JSON inside the .ffx file that accompanies every .fsc chart file. For the full list of event fields and their JSON keys, see the Map Events page.