Live preview and hot reload

[FelixZY]

Is your feature request related to a problem? Please describe.

Front-end developers oftentimes find themselves working in a tight edit -> preview loop. The longer the time from code change to preview, the slower and more tedious the process becomes.

Describe the solution you'd like

It would be awesome if there was a tool to preview individual egui widgets and ui snippets!

I'm thinking the easiest implementation might be to provide a preview macro, similarly to android compose's @Preview-annotation, and a custom main method to be used in a separate binary in the developer's project. This "egui::preview_app()" would work similarly to Preview.js in my mind, showing a list of widgets or individual widgets depending on navigation. Something like:

#[egui::preview]
fn my_screen(???) -> ??? {
    ui.do_stuff();
}

fn main() {
    egui::preview_app();
}

Combined with instructions on how to configure some type of hot reload, this could be a great productivity boost for developers.

Describe alternatives you've considered

• Edit -> build -> run -> navigate -> inspect -> repeat
  • Slow and bulky
• Edit -> hot reload -> inspect -> repeat
  • Better but still requires navigation to the content from inside the app. Sometimes this might be inconvenient. There may also be other reasons hot reload is not compatible with a project as a whole.
• Completely standalone preview application installable via cargo install
  • Definitely an improvement for DX but seems a lot harder to implement as the preview application and the previewed components would be completely separated. A future improvement on the initial concept?

Additional context

This type of feature is available via first party developer tools for SwiftUI and jetpack compose (Android). It is also available for many JavaScript frameworks via third party tooling (see e.g. Preview.js, storybook).

Makepad is betting hard on this, though I think they are going about things the wrong way by limiting the preview to their own IDE. Allowing IDE developers/plugin authors to create a plugin to wrap the standalone previewer is probably a better way to go for general adoption (see e.g. Preview.js for vscode). Allowing the tool to "jump" to components via some sort of IPC would probably make such plugins even more useful.

This has been requested on Reddit but I have been unable to find any related issues in the egui repo.