[Q&A] How to view Slint Preview on Zed editor

[0xkelvin]

Do we have show preview feature on Zed editor ?

[ogoffart]

I am not familiar with the zed editor, but you should look for "code actions" or "code lenses" when having the cursor on the name of a component in a .slint file.

(I'm assuming you have the extension )

If you figure it out, please leave a comment on how to do it.

[SO9010]

@0xkelvin I had a look at the code for the Zed extension, it looks like it's mostly just highlighting for now:

https://gitlab.com/flukejones/zed-slint

I am assuming that you are using the slint extension from the Zed extension store!

[srtnnm]

@0xkelvin I had a look at the code for the Zed extension, it looks like it's mostly just highlighting for now:

https://gitlab.com/flukejones/zed-slint

I am assuming that you are using the slint extension from the Zed extension store!

it seems that zed-editor doesn't give plugins as many features as vscode does

[hunger]

The zed devs I spoke with at rustlab said that Zed does not yet support custom commands.

Showing the preview is a custom command, so I think that explains why this does not work.

[szecket]

I just started using the Zed editor with slint and have been using the slint-viewer

Install using cargo install slint-viewer

I can then load a specific component from a specific file

[whatakey]

The zed devs I spoke with at rustlab said that Zed does not yet support custom commands.

Hello @hunger

By custom commands do you means Tasks and Runnables? if so, both are on stable Zed since May 2024

[hunger]

No, I mean custom Commands executed by the language server via workspace/executeCommand.

Our LS defines "Show Preview" as such a command and tells the editor to put that in all the places it makes sense. When the editor triggers the Show Preview command, then the langauge server opens the live-preview UI built into itself.

[nic-obert]

If anyone is willing and able to implement the preview feature for Slint files, go ahead and make a pull request to the zed-slint project. An issue proposing this feature has already been filed there a couple of weeks ago, but the repository owner hasn't responded yet.

[hunger]

It would be cool if we could get the live-preview and not just the slint-viewer... The live-preview is built into the slint LS, it works in every editor that actually supports the LS defining commands and code actions.

From what I understood in Nov. when meeting zed devs was that Zed did not have the "call commands defined by the LS" feature. Once it is there, it should be pretty easy to make this work in Zed as well.

[armyofevilrobots]

It's been a minute, but I just tested the live preview in Zed. You can right click on the name of a component, ie "MainWindow" in this example:

export component MainWindow inherits Window {

You'll see the "code actions" option, which will bring up the preview option. This option will bring up the preview window.