Code-GUI bidirectional editing via LSP

For Slint [https://slint.dev], a (native) GUI Toolkit, I've also developed a LSP server that do live preview and editing. You can try it online at https://slintpad.com : if you click on the toolbar button to enable the right panel, you can edit the properties from the UI, and this is all done through the LSP and can be integrated in any editor that supports it.

cool! how does this work? e.g. how do you know which UI element matches which text element, do you track it while rendering? How do you propagate changes in the UI? do you update the text and then re-render the whole UI?

I use the the code lenses of code action feature of the LSP so that the user can start a preview. The LSP server will then open a native window on desktop.

Every time the users do some change in the code, the editor sends the document and we re-render the preview.

I use the textDocument/documentHighlight request to know when elements are being selected from the code so I can highlight them in the preview.

When selecting an element in the preview UI, my LSP server sends a window/showDocument to position the cursor at the right location. And if the user changes property or do change in the file, we do a workspace/applyEdit command with the changes.

Btw, the code is there: https://github.com/slint-ui/slint/tree/master/tools/lsp