Create "wizards" with an extension


I’d like to be able to create a simple wizard, maybe as a popover modal window, which displays when clicking a widget button.

It would consist of a simple form to gather user input and pass these values to a task after submit.

What would be a starter way to design this? I found the following thread:

I’m not familiar with React (I usually work with Angular) but am willing to learn if “this is the way”


(OK I just realized *-extension-widget.tsx actually is a React Widget! So I guess I’ll have to learn React now :-))

You could have a look at the About dialog for a simple example of how to set up a modal dialog. That’s what got me started at least. :slight_smile:

1 Like

I’m stuck with forms. The basic React example does not work in a Theia Widget:

Is anyone aware of an existing extension making use of forms?

(I found this guide, I’m currently looking into it:

Did you get the TypeFox Theia Workshop project to work? The JSON-Form Widget is exactly what I’d need for my own project, but unfortunately the sources are outdated and no longer work with the latest version of Theia.

I’m not at work currently, but I’ll get back to you by the beginning of February.

1 Like

@cradke I have an updated branch to fix the deprecations (language-specific extensions are deprecated):

I have not spent more time updating the example besides getting it to build and run, but hopefully it’ll help you with your own use-case (you’ll likely have to fix styling and so on):


Awesome, thank you very much, @vince-fugnitto! I’ll try it out as soon as I find the time.

1 Like

Hi @cradke,

Did you manage to make it work? I’m currently trying to. When the extension is active, Theia’s menus are not displayed and I get that on startup:

root ERROR DefaultJsonSchemaContribution.registerSchemas is taking more than 500.0 ms, new schemas are ignored.

In the web console:

I’ll start investigating :slight_smile:

The schema registration and the indexedDB errors are most likely unrelated. If you want to fix the indexedDB error, try to avoid running the app in an incognito mode/tab, or make sure you’re Firefox (if you are using that) can remember history.

1 Like

Hey @vincent,

I built the Electron app and it ran fine, I only had to make one change to specify the protocol for the Bootstrap CSS to be loaded in Electron, here:

I didn’t try to run the browser app. Possibly the problems you’re having are exclusive to it. :thinking:

1 Like

I got it working. I’m not sure why it failed the first time. I think I was using @theia/core latest instead of next.

In the workshop example, when I open the custom editor and make a change so that the model state gets dirty, the respective JSON file gets opened in Monaco editor as well. Only the Monaco editor tab shows the little dot indicating a dirty state and allows saving of the changes.

I would like my users to work in the custom editor only, though, so I am wondering what I have to do so the custom editor can be self-contained. Presumably, I need to implement SaveableSource? What about Navigatable or StatefulWidget, as EditorWidget does? Or should I rather just extend EditorWidget instead of BaseWidget?

1 Like

Interesting, I did notice that too. The opened file is modified in place.