Designer and Gallery

Start a preview#

Open a .slint file and choose Show Slint Preview from the editor or a component gutter icon. The selected engine opens either the integrated Designer or a native LSP preview window.

In the integrated Designer, leave the toolbar Linked. Selecting a visual element opens and centers its declaration without moving keyboard focus out of the Designer. Moving the source caret highlights its corresponding visual element. Check the target label, which identifies the component, element, and file.

Insert from the Gallery#

Search the Slint Gallery and choose a component appropriate to the project’s version. Select the intended container in the linked Designer, then drag the Gallery entry onto it. The selected element determines insertion; the pointer’s exact coordinates do not.

Keyboard users can select a Gallery entry and press Ctrl+Enter, or invoke Insert into Designer Selection with Alt+D. Imports, component declarations when needed, and the instance are applied as one undoable edit.

Review the result#

Inspect the changed source and language-server diagnostics. A structurally valid insertion can still be semantically unsuitable for its container. Undo returns the source to its previous state if the component is not appropriate.

Choose Unlinked to inspect design and source independently. Relink before visual insertion. If a compatible integrated runtime is unavailable, select native preview; source editing and language intelligence remain available.