Widget set documentation

I’m trying to understand more about Theia extension development.
In the documentation there is an example created using React, and it seems to reference a button widget.

What I’m trying to work out is what the widget library is. I can see that PhosphorJS is used as the underlying framework, but that doesn’t seem to provide widgets like a button or a treeview, it just seems to provide layout aspects like panels, tabs, layout algorithms and so on.

I appreciate that ultimately I can write whatever HTML I like, but for consistency I’m assuming that there is a standard widget library that extensions use, but so far I’ve been unable to find any documentation on it.


Hey @tomqwpl,

we don’t really have a standard library for HTML elements. There are certain elements, such as the SelectComponent which are custom react components, but everything else is purely styled/controlled through CSS classes. See the theia-button for example.

OK, thanks.
I guess I can use vscode-webview-ui-toolkit, but if I want to do something as simple as creating a tree view, it seems like I’m on my own?
For me this is a very strong reason to stick with vscode extensions, rather than trying to make use of the extra flexibility that a native theia extension would provide.

@tomqwpl We also do have a TreeWidget. There’s no real documentation on everything, developers using Theia are often times expected to dig trough the codebase themselves, due to the size of it.

I’m not sure how well the vscode-webview-ui-toolkit works in Theia, as it might not react correctly to changes in themes when not embedded within a webview.