{"id":17981334,"url":"https://github.com/rohitghatol/react-monaco-editor-example","last_synced_at":"2026-03-01T01:33:14.439Z","repository":{"id":53267438,"uuid":"177927829","full_name":"rohitghatol/react-monaco-editor-example","owner":"rohitghatol","description":"This is a example of how to use Microsoft Monaco Editor for coding Typescript functions using react-monaco library","archived":false,"fork":false,"pushed_at":"2019-03-27T08:21:43.000Z","size":7212,"stargazers_count":26,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T09:05:09.742Z","etag":null,"topics":["editor","ide","monaco-editor","react","typescript","webbased"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rohitghatol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-27T05:59:36.000Z","updated_at":"2024-07-13T17:50:32.000Z","dependencies_parsed_at":"2022-08-27T06:22:14.459Z","dependency_job_id":null,"html_url":"https://github.com/rohitghatol/react-monaco-editor-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rohitghatol/react-monaco-editor-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitghatol%2Freact-monaco-editor-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitghatol%2Freact-monaco-editor-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitghatol%2Freact-monaco-editor-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitghatol%2Freact-monaco-editor-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohitghatol","download_url":"https://codeload.github.com/rohitghatol/react-monaco-editor-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitghatol%2Freact-monaco-editor-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29957368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","ide","monaco-editor","react","typescript","webbased"],"created_at":"2024-10-29T18:09:30.262Z","updated_at":"2026-03-01T01:33:14.410Z","avatar_url":"https://github.com/rohitghatol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Microsoft Monaco Editor using react-monaco\nThis is a example of how to use Microsoft Monaco Editor for coding Typescript functions using react-monaco library\n\nDemo - https://rohitghatol.github.io/react-monaco-editor-example/ \n\n\n![App Preview](/images/screenshot-001.png)\n# Setup\n\n1. Install CRA\n\n    ```\n    $\u003e npm i create-react-app\n    ```\n\n2. Create React Project\n\n    ```\n    $\u003e create-react-app react-monaco-example    \n    ```\n\n3. Eject React Scripts\n\n    ```\n    $\u003e cd react-monaco-editor\n    $\u003e npm run eject\n    \n    ```\n\n4. Install React Monaco Editor and make changes to webpack\n\n    ```\n    $\u003e npm i react-monaco-editor -S\n    $\u003e npm i monaco-editor-webpack-plugin -D\n    ```\n    \n    Edit react-monaco-example/config/webpack.config.js file\n    \n    * Add Import at the top\n    ```\n    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\n    ```\n\n    * Add Plugin in the plugin space\n    ```\n    new MonacoWebpackPlugin(),\n    ```\n\n5. Create a React Component for Monaco Editor\n\n    ```\n    components/SimpleTypescriptEditor.jsx\n    ```\n    \n    ```\n    import React,{Component} from 'react';\n    import MonacoEditor from 'react-monaco-editor'\n    \n    const code =\n    `\n    \n    // Define Typescript Interface Employee\n    interface Employee {\n        firstName: String;\n        lastName: String;\n        contractor?: Boolean;\n    }\n    \n    // Use Typescript Interface Employee. \n    // This should show you an error on john \n    // as required attribute lastName is missing\n    const john:Employee = {\n        firstName:\"John\",\n        // lastName:\"Smith\"\n        // contractor:true\n    }\n    \n    `\n    export class SimpleTypescriptEditor extends Component {\n    \n    \n        constructor(props){\n            super(props);\n            this.state = {\n                code\n            }\n        }\n    \n        onChange(newValue, e) {\n            // console.log('onChange', newValue, e);\n        }\n    \n        render() {\n            return (\n                \u003cMonacoEditor\n                    width=\"600\"\n                    height=\"800\"\n                    language=\"typescript\"\n                    theme=\"vs-dark\"\n                    defaultValue=''\n                    value={this.state.code}\n                    onChange={this.onChange}\n                /\u003e\n            )\n        }\n    }\n    ```\n    \n    \n    ---\n    ```\n    // types/index.js\n    import {content as modelContent} from './models';\n    import {content as lambdaContent} from './lambda';\n    import {content as ramdaContent} from './ramda';\n    \n    export const files = {\n        \"models/index.d.ts\": modelContent,\n        \"ramda/index.d.ts\": ramdaContent,\n        \"lambda/index.d.ts\": lambdaContent,\n    };\n\n    ```\n    ```\n    // types/models.js\n    export const content =\n    `\n    export interface Item {\n       id: String;\n       name: String;\n       value: String;\n    }\n    \n    export interface Result {\n       id: String;\n       name: String;\n       value: String;\n    }\n    `\n    ```\n\n    ```\n    // types/lambda.js\n    export const content =\n    `\n    import {Item} from 'models';\n    \n    export interface Event {\n        input: Item[]\n     }\n    \n    export interface Context {\n       \n    }\n    `\n\n    ```    \n    \n    \n    ```\n    components/AdvancedTypescriptEditor.jsx\n    ```\n    \n    ```\n    import React,{Component} from 'react';\n    import MonacoEditor from 'react-monaco-editor'\n    import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';\n    import {Uri} from 'monaco-editor/esm/vs/editor/editor.api';\n    \n    import {files} from './typings';\n    \n    const code =\n    `\n    //--------------------------\n    // Contents of \"models\"\n    //--------------------------\n    //\n    // export interface Item {\n    //    id: String;\n    //    name: String;\n    //    value: String;\n    // }\n    //\n    // export interface Result {\n    //    id: String;\n    //    name: String;\n    //    value: String;\n    // }\n    \n    //--------------------------\n    // Contents of \"lambda\"\n    //--------------------------\n    //\n    // import {Item} from 'models';\n    //\n    // export interface Event {\n    //     input: Item[]\n    // }\n    //\n    // export interface Context {\n    //  \n    // }\n    \n    \n    import {Event, Context} from \"lambda\";\n    import {Item, Result} from \"models\"\n    import * as R from \"ramda\";\n     \n    export const lambda = async (event:Event, context:Context): Promise\u003cResult[]\u003e =\u003e {\n        \n        const result:Result[] = R.map((input:Item) =\u003e ({\n            id: input.id,\n            name: input.name,\n            value: input.value\n        }),event.input);\n        \n        return result;\n    }\n    \n    \n    \n    \n    `\n    export class AdvancedTypescriptEditor extends Component {\n    \n    \n        constructor(props){\n            super(props);\n            this.state = {\n                code\n            }\n        }\n    \n        onChange(newValue, e) {\n            // console.log('onChange', newValue, e);\n        }\n    \n        editorWillMount(monaco) {\n    \n            // validation settings\n            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n                noSemanticValidation: false,\n                noSyntaxValidation: false\n            });\n    \n            // compiler options\n            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n                target: monaco.languages.typescript.ScriptTarget.ES6,\n                allowNonTsExtensions: true\n            });\n    \n            for (const fileName in files) {\n                const fakePath = `file:///node_modules/@types/${fileName}`;\n    \n                monaco.languages.typescript.typescriptDefaults.addExtraLib(\n                    files[fileName],\n                    fakePath\n                );\n            }\n    \n    \n        }\n    \n    \n    \n        editorDidMount(editor, monaco) {\n            editor.focus();\n        }\n    \n        render() {\n            const options = {\n                selectOnLineNumbers: true,\n                model: monaco.editor.getModel(Uri.parse(\"file:///main.tsx\"))\n                    ||\n                    monaco.editor.createModel(code, \"typescript\", monaco.Uri.parse(\"file:///main.tsx\"))\n            }\n            return (\n                \u003cMonacoEditor\n                    width=\"800\"\n                    height=\"800\"\n                    language=\"typescript\"\n                    theme=\"vs-dark\"\n                    defaultValue=''\n                    value={this.state.code}\n                    onChange={this.onChange}\n                    editorWillMount={this.editorWillMount}\n                    editorDidMount={this.editorDidMount}\n                    options={options}\n                /\u003e\n            )\n        }\n    }\n    ```\n    ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitghatol%2Freact-monaco-editor-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohitghatol%2Freact-monaco-editor-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitghatol%2Freact-monaco-editor-example/lists"}