https://github.com/chenxiaoyao6228/code-studio
Online web code runner for JS and NodeJS, build with Angular 18 + RxJS + WebContainers + Monaco Editor + XtermJS
https://github.com/chenxiaoyao6228/code-studio
angular code-sand-box coderunner material monaco-editor rxjs webcontainer webworker xtermjs
Last synced: 11 months ago
JSON representation
Online web code runner for JS and NodeJS, build with Angular 18 + RxJS + WebContainers + Monaco Editor + XtermJS
- Host: GitHub
- URL: https://github.com/chenxiaoyao6228/code-studio
- Owner: chenxiaoyao6228
- Created: 2024-06-09T23:27:58.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-20T13:09:54.000Z (over 1 year ago)
- Last Synced: 2025-02-14T06:56:01.717Z (about 1 year ago)
- Topics: angular, code-sand-box, coderunner, material, monaco-editor, rxjs, webcontainer, webworker, xtermjs
- Language: TypeScript
- Homepage: https://code-studio.chenxiaoyao.cn
- Size: 17.2 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Code Studio
Web Code Runner for JS and NodeJS
## Features
- [x] Create projects from existing templates (10+ templates included) without cloning or installing anything locally
- [x] Support import from [GitHub folder](https://code-studio.chenxiaoyao.cn/edit?source=https://github.com/chenxiaoyao6228/fe-notes/tree/main/React%E7%9B%B8%E5%85%B3/_demo/react-starter) or local folder
- [x] Sync your project to Gist (if GitHub token is provided) or download as ZIP
- [x] File Manager: easily create, edit, remove files and folders, with drag and drop support
- [x] Basic code editing abilities: path IntelliSense, go to definition, etc.
- [x] Integrated Console: no need to press 'F12' to open DevTools
- [x] Prettier as the default code formatter
- [x] Keyboard shortcuts support: 'CTRL(CMD) + /' to show the shortcut list
- [ ] Various VSCode theme support
- [ ] File Sharing
- [ ] Diff editor
You can experience code-studio through [this link](https://code-studio.chenxiaoyao.cn)
## Screenshots
## Development
Code Studio uses the following tech stack:
> Angular 18 + RxJS + WebContainers + Monaco Editor + XtermJS
Run the following commands to get started:
```sh
yarn install
yarn start
```
## Contribute
For anyone interested in the project, any kind of contribution is greatly appreciated.
## Reference
- https://webcontainers.io
- https://microsoft.github.io/monaco-editor/
- https://angular.dev/
- https://material.angular.io/
- https://github.com/xtermjs/xterm.js
Great thanks to these awesome open-source projects!