use-monaco
Use ποΈ monaco-editor in any βοΈ React app with simple hooks π£
File Explorer
Download Latest Version (.zip)- graphql.monaco.worker.ts
- prettier.monaco.worker.ts
- typings.monaco.worker.ts
- worker-build.tsx
- _app.tsx
- graphql.tsx
- index.tsx
- monaco-provider.tsx
- plugin-config.tsx
- vscode-base.tsx
- vscode.tsx
- monaco-languages+2.1.1.patch
- abap.basic.js
- apex.basic.js
- azcli.basic.js
- bat.basic.js
- cameligo.basic.js
- clojure.basic.js
- coffee.basic.js
- cpp.basic.js
- csharp.basic.js
- csp.basic.js
- css.basic.js
- css.service.js
- dart.basic.js
- dockerfile.basic.js
- fsharp.basic.js
- go.basic.js
- graphql.basic.js
- handlebars.basic.js
- hcl.basic.js
- html.basic.js
- html.service.js
- ini.basic.js
- java.basic.js
- javascript.basic.js
- json.service.js
- julia.basic.js
- kotlin.basic.js
- less.basic.js
- lexon.basic.js
- lua.basic.js
- markdown.basic.js
- mips.basic.js
- msdax.basic.js
- mysql.basic.js
- objective-c.basic.js
- pascal.basic.js
- pascaligo.basic.js
- perl.basic.js
- pgsql.basic.js
- php.basic.js
- postiats.basic.js
- powerquery.basic.js
- powershell.basic.js
- pug.basic.js
- python.basic.js
- r.basic.js
- razor.basic.js
- redis.basic.js
- redshift.basic.js
- restructuredtext.basic.js
- ruby.basic.js
- rust.basic.js
- sb.basic.js
- scala.basic.js
- scheme.basic.js
- scss.basic.js
- shell.basic.js
- solidity.basic.js
- sophia.basic.js
- sql.basic.js
- st.basic.js
- swift.basic.js
- systemverilog.basic.js
- tcl.basic.js
- twig.basic.js
- typescript.basic.js
- typescript.service.js
- vb.basic.js
- xml.basic.js
- yaml.basic.js
- css.monaco.worker.js
- editor.monaco.worker.js
- graphql.monaco.worker.js
- html.monaco.worker.js
- json.monaco.worker.js
- prettier.monaco.worker.js
- ts.monaco.worker.js
- typings.monaco.worker.js
- simple.html
- style.css
- basic-languages.ts
- language-plugins.ts
- register.ts
- disposables.ts
- index.ts
- path.ts
- strip-comments.ts
- version.ts
- index.ts
- providers.ts
- worker-client.ts
- editors.ts
- index.ts
- load-monaco.ts
- plugin-api.ts
- shortcuts.ts
- themes.ts
- graphql.worker.ts
- index.ts
- types.ts
- utils.ts
- index.ts
- prettier.worker.ts
- index.ts
- tm-to-monaco-token.ts
- index.ts
- typings.worker.js
- atom-dark.json
- atom-light.json
- ayu-light-graphql.ts
- cobalt2.ts
- codesandbox-black.ts
- codesandbox-light.json
- codesandbox.json
- high-contrast.json
- index.ts
- lucy.json
- night-owl.json
- nightOwlNoItalics.json
- palenight-italic.json
- palenight.json
- shades-of-purple.ts
- solarized-light.json
- vscode-light.ts
- colors.ts
- dot.ts
- polyfill-theme.ts
- index.ts
- vscode-to-monaco-theme.ts
- index.ts
- json.ts
- index.ts
- useDeepCompareEffect.ts
- useEditor.ts
- useLocalStorage.ts
- useMonaco.tsx
- useMonacoEditor.ts
- useTextModel.ts
- withMonaco.tsx
- ayu-dark.ts
- ayu-light.ts
- graphql.ts
- index.ts
- monaco-themes.ts
- ocean.ts
- index.ts
- monaco-worker.ts
- index.ts
- themes.ts
- worker.ts
- package.json
- package.json
- .env
- .gitignore
- build-languages.ts
- LICENSE
- next-env.d.ts
- next.config.js
- package.json
- pkger.config.ts
- README.md
- scripts.ts
- tsconfig.build.json
- tsconfig.json
- typedoc.js
- yarn.lock
# Installation Guide
1. Get the code
git clone https://github.com/nksaraf/use-monaco
Downloads the entire project code from GitHub to your computer.
cd use-monaco
Moves into the project folder you just downloaded.
2. Docker
Easy RecommendedPrerequisites
- Git Needed to download the project code from GitHub.
- Docker Desktop Needed to build and run containers. Install it and keep it running in the background.
β οΈ This is a large repository, so this method may point to an internal sub-package rather than the actual core product. Check the full README as well.
docker build -f public/languages/dockerfile.basic.js -t use-monaco .
Builds a runnable image based on the Dockerfile.
docker run -p 8080:80 use-monaco
Runs the built image as an actual container.
Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.
3. Node.js
EasyPrerequisites
yarn add use-monaco
Type this command into your terminal and run it.
npm install use-monaco
Downloads and installs the libraries listed in package.json.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
Pulled directly from this repo's README.
// repository documentation
Was this content helpful?
(0 ratings)