https://github.com/alankrantas/monaco-ts-live-editor
Write, lint and run JavaScript/TypeScript online
https://github.com/alankrantas/monaco-ts-live-editor
coding-tool monaco-editor online-editor react typescript vite
Last synced: 2 months ago
JSON representation
Write, lint and run JavaScript/TypeScript online
- Host: GitHub
- URL: https://github.com/alankrantas/monaco-ts-live-editor
- Owner: alankrantas
- License: mit
- Created: 2024-04-19T09:41:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-01T09:22:25.000Z (10 months ago)
- Last Synced: 2025-10-01T11:20:56.231Z (10 months ago)
- Topics: coding-tool, monaco-editor, online-editor, react, typescript, vite
- Language: TypeScript
- Homepage: https://alankrantas.github.io/monaco-ts-live-editor/
- Size: 739 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Monaco TypeScript Live Editor
> Try it [here](https://alankrantas.github.io/monaco-ts-live-editor/).
A simple demonstration to wrap [`@monaco-editor/react`](https://www.npmjs.com/package/@monaco-editor/react) into an online TypeScript editor component with IntelliSense support and script execution functionality. The React app is [created/built by Vite](https://vitejs.dev/) and deployed to GitHub Pages using Github Actions.
When the "Strict Mode" is enabled, the Monaco editor would apply the following TypeScript rules for the IntelliSense:
- `allowUnreachableCode`: `false`
- `allowUnusedLabels`: `false`
- `exactOptionalPropertyTypes`: `true`
- `noFallthroughCasesInSwitch`: `true`
- `noImplicitAny`: `true`
- `noImplicitOverride`: `true`
- `noImplicitReturns`: `true`
- `noImplicitThis`: `true`
- `noPropertyAccessFromIndexSignature`: `true`
- `noUncheckedIndexedAccess`: `true`
- `noUnusedLocals`: `true`
- `noUnusedParameters`: `true`
- `strict`: `true`
- `strictBindCallApply`: `true`
- `strictBuiltinIteratorReturn`: `true`
- `strictFunctionTypes`: `true`
- `strictNullChecks`: `true`
- `strictPropertyInitialization`: `true`
`checkJs` is set to `true` and `target`/`module` are set to `ESNext`.
If you want to add declaration files (`.d.ts`), see the comment in `/src/component/MonacoEditor.tsx`.
## Development
### `yarn`
Install dependencies.
### `yarn dev` or `yarn start`
Start the dev server.
### `yarn build`
Build a production at `./dist`.
### `yarn preview` or `yarn serve`
Serve and view the built production.
### `yarn commit`
Commit changes.