Building richer experience (file tree, tabs, fuzzy search)

[agentcooper]

It is not easy to run VSCode in the browser, but many apps need more than a text editor: things like file tree, tabs, fuzzy search are of course buildable, but hard to get right. Is it in the roadmap to extract more things from VSCode as a reusable standalone components?

References:

• VSCode in the browser: 1, 2.

[CosmoMyzrailGorynych]

Solution.

But if seriously, Monaco is a code editor, not an IDE or VSCode. I believe that your needs are out of the scope of this project. They look like asking to build a whole app for you.

If you want a reusable, ready-made file tree component, go use some React component or such. If you want fuzzy search, use Fuse or other libraries. Tabs? Oh man, it's just an array of strings and a view, c'mon.

[agentcooper]

@CosmoMyzrailGorynych I'm sorry if my initial question did sound arrogant. My intention with this question was a broader discussion of how people build web playgrounds/IDEs today.

Monaco was extracted out of VSCode codebase. VSCode has other great components like performant file tree. They have a popup for a command palette (right click –> command palette), however AFAIK there is no public API to re-use it for custom needs like fuzzy search. Another thing that might be hard to get right (that already exists in VSCode) is multi-editor layout (e.g. two or more editors on the screen).

It is definitely possible to compose other available components together and people do that. I wonder what is the longer term plan of VSCode/Monaco given that Microsoft is building other IDEs on top of Monaco.

[orta]

It's publicly stated here that the live code team are exploring moving Visual Studio Code online, whether that turns into code being more modular as external imports I'm unsure.

[CosmoMyzrailGorynych]

My intention with this question was a broader discussion of how people build web playgrounds/IDEs today.

The thing is that most playgrounds/IDEs will have specific needs. One thing is making an online VSCode clone, and another — is making something on top of VSCode/Monaco.
IRL example is my game editor ct.js that has tabs, but these are more like four predefined sections of code (ye olde screenshot of it), so no generic solution for tabs there. I also don't think that ct.js will ever have a file tree, as there are tons of stuff beyond code files and it is against my vision in general.

I hope that monaco will remain a self-contained code editor as it is now. Additions like a file tree/tabs in monaco-editor will only make creating apps harder, though ofc they all can turn into a higher-level module called monaco-ide or such :b That's why I think such feature requests are out of scope, though monaco team knows for better.

[vadimkantorov]

Some code about file tree seems already distributed along with Monaco Editor? (alleged here https://github.com/BlueMagnificent/monaco-tree )

[ghost]

I just launched a project that includes the Monaco editor plus a file tree and tabs.

https://github.com/bootrino/reactoxide