Q-SYS Plugin Layout Editor Help

Getting Started

Drag controls or graphics from the toolbox on the left onto the canvas. Select objects to edit their properties in the panel on the right. The Lua output at the bottom auto-generates as you work.

Controls

• Button — Momentary, toggle, or trigger button
• Knob / Fader — Rotary or linear value control with configurable range
• Indicator — LED, meter, or status indicator
• Text — Text input, combo box, list box, or meter

Graphics

• Label — Static text label
• GroupBox — Bordered container with title
• Header — Centered text with a horizontal rule
• Image — Base64-encoded raster image
• SVG — Base64-encoded SVG graphic

Canvas

• Click an object to select it; Shift+click to toggle selection
• Click and drag on empty canvas to rubber-band select
• Drag objects to move them; drag handles to resize. Hold Ctrl (Cmd on Mac) while dragging to bypass grid snapping
• The blue border is the target page size (used for alignment reference)
• The orange dashed border is the bounding box of all objects

Pages

Use the page tabs at the top of the canvas to manage multiple pages. Each page can have its own target size. Objects assigned to "All Pages" appear on every page.

Control Arrays

Set the Count property to a value greater than 1 to create an array of controls. Array members share the same name and control definition, and are named Name 1, Name 2, etc. in Q-SYS.

Keyboard Shortcuts

Shortcut	Action
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Delete / Backspace	Delete selected objects
Ctrl+A	Select all objects
Ctrl+D	Duplicate selected objects
Escape	Deselect all
Arrow keys	Move selected objects (by grid size, or 1px with Ctrl)
Shift+Arrow keys	Resize selected objects (by grid size, or 1px with Ctrl)
Ctrl+Shift+Arrow keys	Align selected objects (left, right, top, bottom)
Ctrl+F	Bring to front
Ctrl+B	Send to back
Ctrl+PageDown	Next page
Ctrl+PageUp	Previous page
Shift+click toolbox item	Add control/graphic at canvas center
Double-click object	Focus Name (controls) or Text (graphics) property

Toolbar

Alignment

Aligns objects to the first-selected (or last-selected, per settings). Requires 2+ objects selected.

Spacing

Spaces objects evenly between the outermost positions. Requires 3+ objects.

Sizing

Makes selected objects the same width, height, or both, matching the anchor object.

Packing

Packs objects tightly together. Pack Left/Right aligns edges and stacks vertically. Pack Top/Bottom aligns edges and stacks horizontally. Requires 2+ objects.

Center on Page

Centers the selection group within the target page size.

Distribute

Distributes objects with equal spacing across the full target page width or height.

Z-Order

Bring to Front / Send to Back reorders objects within the rendering stack.

Saving and Loading

• Save — Downloads the project as a JSON file
• Load — Opens a JSON project file
• Auto-save — Your work is automatically saved to browser local storage

Lua Output

The generated Lua code includes GetControls, GetControlLayout, GetPages (if multiple pages), and EventHandler stubs. The code updates automatically as you work. Click Copy to copy to the clipboard. The panel can be collapsed or maximized.

Selecting a control or graphic on the canvas highlights its corresponding code blocks in the Lua output.

Known Limitations

• Control appearance on the canvas is a wireframe approximation, not a pixel-accurate representation of Q-SYS Designer. Fine-tuning of appearance (colors, fonts, corner radii, etc.) should be verified in Q-SYS Designer.
• Generated Lua code is a starting point and is not guaranteed to compile or run correctly. Always review and test in Q-SYS Designer before deploying.
• Not all Q-SYS control layout properties are supported. Some properties (e.g., ClassName, WordWrap, IconColor, CustomButtonUp/Down) are not yet available in the editor.
• The Media layout style is not supported.
• Meter and fader visual previews are static representations and do not reflect actual signal levels or control positions.
• The auto-generated Status control is only placed on the canvas when creating a new project. If the Status control is deleted from the canvas, the Lua codegen will still emit it if the setting is enabled, but without a layout entry.
• Knob controls do not support hiding the textbox (ShowTextbox), matching Q-SYS Designer behavior.
• Q-SYS Designer automatically inverts certain colors (e.g., label text, group box text) when switching between dark and light mode. This editor does not replicate that behavior — colors are rendered as specified. Use the canvas theme toggle to preview your layout against both backgrounds.
• Font rendering may differ from Q-SYS Designer since this editor uses browser fonts rather than the Q-SYS font engine.
• GroupBox borders may not appear exactly as they will in Q-SYS Designer, but they're close enough to get the point across.

Troubleshooting

If the editor fails to load or behaves unexpectedly, append ?reset=true to the URL (e.g. layout.html?reset=true) to clear all saved data and settings. The page will reload with a fresh state. This also resets the disclaimer acknowledgement.