TypeScript Web-Based IDE

Question

Given the fact that TypeScript is Open Source, is this Web-Based IDE also available as a tool that can be downloaded anywhere?

I'm developing a web application in which the client can write a user-defined expression (with user-defined variables and predefined methods) which is evaluated, compiled and used at runtime on the server using C# .Net. Using TypeScript and its wonderful web-based editor's features like syntax or error highlighting, code completion, method signature suggestion, etc, saves me lots of trouble in the user interface.

So is this editor also part of TypeScript? If not, is there any other open source solutions with similar capabilities?

Fenton · Accepted Answer · 2017-08-30T08:53:06.227

12

Update 2017: The Monaco editor used in the TypeScript Playground has been made available on GitHub.

You can also take a look at Visual Studio Code, for a more out-of-browser experience.

There is also a TypeScript editor build on the ACE Editor, which is also on GitHub.

edited Aug 30 '17 at 08:53

answered Jan 11 '13 at 18:37

Fenton

241,084
71
387
401

niutech · Answer 2 · 2014-01-28T16:18:18.703

10

There are some web IDEs with support of TypeScript, namely:

Cloud9
CATS
JSBin (choose TypeScript from dropdown)
Baz

If you think about making a new one, you could base on one of my 2 projects: TypeScript Compile or TypeScript Interpret ;)

edited Jan 28 '14 at 16:18

answered Jan 22 '13 at 21:58

niutech

28,923
15
96
106

TouchDevelop is written in TypesScript, but does not support it, it has its own language instead. – thSoft Jan 28 '14 at 11:48
Cloud9 is not offering TypeScript currently. The blog entry linked no longer exist. – Andrew Savinykh Aug 17 '15 at 10:29

score 3 · Answer 3 · edited May 23 '17 at 11:53

The editor used on the playground is informally known as Monaco and it's used in Visual Studio Code.

UPDATE 11.22.2015: Visual Studio Code is now open source, which means we have access to the source of the Monaco Editor. I think this should now give us the ability to use the Monaco Editor in a browser, I'm waiting on a response to my question in the VS Code repostiroy.

The 'editor' (the thing that renders the code with syntax highlighting, line numbers, etc..) part of Visual Studio Code is Microsoft's Monaco editor. It is the same editor used for OneDrive, Windows Azure, TypeScript Playground, and Visual Studio Online. I have yet to find any real documentation on this editor from Microsoft but there are some articles about it around the web.

Read more about Visual Studio Code here.

score 2 · Answer 4 · answered Jan 11 '13 at 20:47

2

There is an implementation of it which is open source:

https://github.com/jbaron/typescript-playground-on-ace

answered Jan 11 '13 at 20:47

Oleg Mihailik

2,514
2
19
32

I've forked this and made my own more advanced version with the latest typescript 1.5 support: https://github.com/drake7707/Typescript-Editor – Drakarah Aug 17 '15 at 18:39

score 1 · Answer 5 · answered Oct 30 '13 at 09:36

1

there is goormIDE which is also cloud IDE this is open source or service version

if you use node.js, just type this command

$ npm install goorm -g

answered Oct 30 '13 at 09:36

user2931881

21
1

score 1 · Answer 6 · answered Oct 25 '18 at 13:59

I've played with TypeScript Compiler API both in node.js and in the browser. Also with monaco-editor:

Playground and COmpiler API examples 100% in the browser https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/
TS compiler examples and playground which are evaluated in the server: https://typescript-api-playground.glitch.me
And an effort (WIP) to build a TS project editor using monaco-editor and typescript 100% in the browser.
more info here: https://github.com/cancerberoSgx/typescript-in-the-browser

yes, TypeScript and monaco editor look good, enjoy!

score 0 · Answer 7 · answered Dec 27 '13 at 16:21

0

Koding provides a VM with Root so you can install whatever tools you need, and in this case, TypeScript via npm install -g typescript.

VM Domain and Apache is included, so previewing your work in your browser is also easy :)

answered Dec 27 '13 at 16:21

Lee Olayvar

3,660
6
30
36

score 0 · Answer 8 · answered Jan 14 '14 at 13:33

0

For very simple stuff you can try out https://chrome.google.com/webstore/detail/typescript-editey/liedfkjkedgcgpddoijfeeeeoikcbmaf

Your typescript files will be converted to a js file on the fly and your site will be hosted for free on Google Drive.

answered Jan 14 '14 at 13:33

dflorey

1,828
3
19
31

score 0 · Answer 9 · answered Apr 17 '15 at 23:09

I am using CATS, and I really like it because of two things:

The IDE is not so bad. It does it job done, and once you practice with it, you'll like it!
It's portable

THe last is the feature I like the most, because I don't have to install anything (at least, under Windows), and you don't need Visual Studio (it's around 9 Gb and two hours installing).

The TypeScript Playground is a nice editor, but if you need to test small scripts, or want to try something that can be done only in one file!

score 0 · Answer 10 · answered Aug 30 '17 at 03:09

0

The editor for the Typescript Playground is called Monaco, and it's available on GH / npm / etc.

http://github.com/Microsoft/monaco-editor

https://www.npmjs.com/package/monaco-editor

answered Aug 30 '17 at 03:09

NiloCK

571
1
11
33

score 0 · Answer 11 · answered Oct 04 '17 at 13:34

As TypeScript's playground source code has not been made available until now, I've published an implementation—also based on the Monaco Editor—with some enhancements regarding compiler options and code execution:

GitHub Repository: https://github.com/fabiandev/typescript-playground
Online Playground: https://fabiandev.github.io/typescript-playground/

score 0 · Answer 12 · answered Mar 19 '21 at 09:56

0

The following cloud IDEs have decent TypeScript support:

answered Mar 19 '21 at 09:56

thSoft

21,755
5
88
103

TypeScript Web-Based IDE

12 Answers12

Linked