{"id":13649247,"url":"https://github.com/rhysd/react-vim-wasm","last_synced_at":"2025-09-05T13:35:24.150Z","repository":{"id":35013285,"uuid":"194523669","full_name":"rhysd/react-vim-wasm","owner":"rhysd","description":"Vim editor embedded in your React web application","archived":false,"fork":false,"pushed_at":"2023-05-24T00:46:54.000Z","size":8008,"stargazers_count":145,"open_issues_count":9,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-20T18:52:56.441Z","etag":null,"topics":["component","react","vim","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://rhysd.github.io/react-vim-wasm/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rhysd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-06-30T14:12:47.000Z","updated_at":"2025-07-11T13:17:02.000Z","dependencies_parsed_at":"2024-01-14T11:00:17.227Z","dependency_job_id":"d90ec16d-47e2-4927-bc10-e10dc639f7d3","html_url":"https://github.com/rhysd/react-vim-wasm","commit_stats":{"total_commits":77,"total_committers":3,"mean_commits":"25.666666666666668","dds":"0.33766233766233766","last_synced_commit":"6520f0eda397f5c10f753d0a4771ad5e41e57402"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/rhysd/react-vim-wasm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhysd%2Freact-vim-wasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhysd%2Freact-vim-wasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhysd%2Freact-vim-wasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhysd%2Freact-vim-wasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhysd","download_url":"https://codeload.github.com/rhysd/react-vim-wasm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhysd%2Freact-vim-wasm/sbom","scorecard":{"id":774607,"data":{"date":"2025-08-11","repo":{"name":"github.com/rhysd/react-vim-wasm","commit":"6520f0eda397f5c10f753d0a4771ad5e41e57402"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.6,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/1 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: npmCommand not pinned by hash: scripts/deploy.sh:11","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.txt:0","Info: FSF or OSI recognized license: MIT License: LICENSE.txt:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 29 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"67 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T03:12:13.113Z","repository_id":35013285,"created_at":"2025-08-23T03:12:13.113Z","updated_at":"2025-08-23T03:12:13.113Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273766497,"owners_count":25164369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","react","vim","wasm","webassembly"],"created_at":"2024-08-02T01:04:52.796Z","updated_at":"2025-09-05T13:35:24.075Z","avatar_url":"https://github.com/rhysd.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"React component for vim.wasm\n============================\n[![npm version](https://badge.fury.io/js/react-vim-wasm.svg)][npm]\n[![Build Status](https://travis-ci.org/rhysd/react-vim-wasm.svg?branch=master)](https://travis-ci.org/rhysd/react-vim-wasm)\n\n[`react-vim-wasm` npm package][npm] provides [React](https://github.com/facebook/react) component for\n[vim.wasm](https://github.com/rhysd/vim.wasm). Vim editor can be easily embedded into your React\nweb application.\n\nPlease visit [demo][] to see a live example.\n\n## Installation\n\nInstall the package via [npm](https://www.npmjs.com) package manager. Please note that this component\nsupports React 16.8.0 or later.\n\n```\nnpm install --save react react-vim-wasm\n```\n\n## Usage\n\n### `\u003cVim/\u003e` component\n\n```javascript\nimport * as React from 'react';\nimport { useCallback } from 'react';\nimport { Vim } from 'react-vim-wasm';\n\nconst onVimExit = useCallback(s =\u003e alert(`Vim exited with status ${s}`), []);\nconst onFileExport = useCallback((f, buf) =\u003e console.log('file exported:', f, buf), []);\nconst onError = useCallback(e =\u003e alert(`Error! ${e.message}`), []);\n\n\u003cVim\n    worker=\"/path/to/vim-wasm/vim.js\"\n    onVimExit={onVimExit}\n    onFileExport={onFileExport}\n    readClipboard={navigator.clipboard \u0026\u0026 navigator.clipboard.readText}\n    onWriteClipboard={navigator.clipboard \u0026\u0026 navigator.clipboard.writeText}\n    onError={onError}\n/\u003e\n```\n\nBy using this component, all setup is done in the component lifecycle; Prepare `\u003ccanvas/\u003e` and `\u003cinput/\u003e`,\nload and start Vim editor instance in Web Worker, clean up the worker on Vim ends.\n\nFor real example, please read [example code](./example).\n\nProperties of `\u003cVim/\u003e` are as follows:\n\n| Property Name      | Description                                                        | Type                            | Default Value |\n|--------------------|--------------------------------------------------------------------|---------------------------------|---------------|\n| `worker`           | File path to worker script `vim.js` in `vim-wasm` package.         | `string`                        | NOT OPTIONAL  |\n| `className`        | Class name added to underlying `\u003ccanvas/\u003e` DOM element.            | `string`                        | `undefined`   |\n| `style`            | `style` attribute value of underlying `\u003ccanvas/\u003e` dom element.     | `Object`                        | `undefined`   |\n| `id`               | `id` attribute value of underlying `\u003ccanvas/\u003e` dom element.        | `string`                        | `undefined`   |\n| `debug`            | Enable JavaScript debug logging to console.                        | `boolean`                       | `false`       |\n| `perf`             | Enable performance tracing and dump result at Vim exiting.         | `boolean`                       | `false`       |\n| `clipboard`        | Explicitly enable/disable clipboard register support.              | `boolean`                       | `true`        |\n| `files`            | Object that file paths to file contents.                           | `{ [fpath: string]: string }`   | `{}`          |\n| `dirs`             | Array of new directory paths created before Vim startup.           | `string[]`                      | `[]`          |\n| `persistentDirs`   | Array of existing directory paths which are persistent with IDB.   | `string[]`                      | `[]`          |\n| `cmdArgs`          | Array of command line arguments passed to `vim` process.           | `string[]`                      | `[]`          |\n| `fetchFiles`       | Mapping from local filesystem paths to remote resources like URLs. | `{ [fpath: string]: string }`   | `undefined`   |\n| `onVimCreated`     | Callback called at creating a `VimWasm` instance.                  | `(VimWasm) =\u003e void`             | `undefined`   |\n| `onError`          | Callback called when an error is thrown in worker.                 | `(Error) =\u003e void`               | `undefined`   |\n| `onVimInit`        | Callback called at initializing Vim worker instance.               | `() =\u003e void`                    | `undefined`   |\n| `onVimExit`        | Callback called at Vim exiting.                                    | `(number) =\u003e void`              | `undefined`   |\n| `onFileExport`     | Callback called when `:export` is run.                             | `(string, ArrayBuffer) =\u003e void` | `undefined`   |\n| `onTitleUpdate`    | Callback called when window title is updated.                      | `(string) =\u003e void`              | `undefined`   |\n| `readClipboard`    | Async function to read a clipboard text.                           | `async () =\u003e string`            | `undefined`   |\n| `onWriteClipboard` | Async function to write a clipboard text.                          | `async (string) =\u003e void`        | `undefined`   |\n| `drawer`           | User-defined screen drawer instance (see below section).           | `ScreenDrawer`                  | `undefined`   |\n\nAll properties other than `worker` are optional. For filetype support, please read\n[these docs](https://github.com/rhysd/vim.wasm/tree/wasm/wasm#filesystem-setup) also.\n\n### `useVim()` hook\n\nThis package provides `useVim()` React hook function. Thanks to [React Hooks architecture](https://reactjs.org/docs/hooks-intro.html),\nVim instance management logic can be integrated into your component easily.\n\n```javascript\nimport * as React from 'react';\nimport { useVim } from 'react-vim-wasm';\n\nconst YourComponent = props =\u003e {\n    const [canvasRef, inputRef, vim] = useVim({\n        worker: '/path/to/vim-wasm/vim.js',\n        // The same as \u003cVim/\u003e props...\n    });\n\n    // Access to `vim` instance if you want\n\n    // Set refs to render screen and handle key inputs\n    return \u003c\u003e\n        \u003ccanvas ref={canvasRef} /\u003e\n        \u003cinput ref={inputRef} /\u003e\n    \u003c/\u003e;\n};\n```\n\n`useVim()` returns 3-elements array.\n\nThe first element is a ref to a canvas element to render Vim screen. You must put it to `\u003ccanvas/\u003e`\nelement in your component. This value is set to `null` if `drawer` property is set.\n\nThe second element is a ref to a input element to catch key input. You must put it to `\u003cinput/\u003e` element\nin your component. This value is set to `null` if `drawer` property is set.\n\nThe third element is a `VimWasm` instance. Some operations (such as calling `.cmdline()` method) can be done\nvia this instance. Please read [vim.wasm document](https://github.com/rhysd/vim.wasm/tree/wasm/wasm#readme)\nfor more details.\n\n### `checkVimWasmIsAvailable()` utility\n\n[vim.wasm](https://github.com/rhysd/vim.wasm) requires `Worker`, `SharedArrayBuffer` and `Atomics`\nand some browsers don't meet the requirements.\n\nThis package provides `checkVimWasmIsAvailable` utility function to check browser compatibility.\nIt returns an error message as `string` when the current browser is incompatible, otherwise `undefined`.\n\n```js\nimport { checkVimWasmIsAvailable } from 'react-vim-wasm';\n\nconst errmsg = checkVimWasmIsAvailable();\nif (errmsg) {\n    alert(errmsg);\n}\n```\n\n### Custom Screen Drawer\n\nUser-defined custom renderer can be defined through `drawer` property of `\u003cVim/\u003e` component or\n`useVim()` hook.\n\nThe `drawer` property is an instance which implements `ScreenDrawer` interface defined in `vim-wasm/vimwasm.d.ts`.\nPlease read [this code](https://github.com/rhysd/vim.wasm/blob/wasm/wasm/vimwasm.ts) to know the interface.\n\nBy defining your class implementing the interface, your class can render Vim screen instead of `\u003ccanvas/\u003e`.\n\nNote that key down must be handled by your implementation using `VimWasm.sendKeydown()` method and\nresize event also must be handled using `VimWasm.resize()` method.\n\nFor a real example, please read [`DummyDrawer` class](https://github.com/rhysd/vim.wasm/blob/wasm/wasm/test/helper.ts)\nwhich is used for testing draw events.\n\n### TypeScript Support\n\nThis package provides complete [TypeScript](https://www.typescriptlang.org) support.\nPlease read `index.d.ts` type definitions file put in installed package directory.\n\n## Development\n\nSome scripts are defined in `package.json`.\n\n```sh\n# Start TypeScript compiler and parcel bundler with watch mode.\n# Example site is hosted at http://localhost:1234 and enables hot-reload.\n$ npm run watch\n\n# Release build\n$ npm run build\n\n# Check lint and formatter\n$ npm run lint\n\n# Check lint and formatter with automatic fixes\n$ npm run fix\n\n# Deploy to gh-pages\n$ npm run gh-pages\n\n# Build and run unit tests\n$ npm run watch:test # Watch files and run tests on change\n$ npm test           # Single run\n$ npm run karma      # Start Karma server\n```\n\n## License\n\nThis repository is licensed under [MIT License](./LICENSE.txt).\n\n[npm]: https://www.npmjs.com/package/react-vim-wasm\n[demo]: https://rhysd.github.io/react-vim-wasm\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhysd%2Freact-vim-wasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhysd%2Freact-vim-wasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhysd%2Freact-vim-wasm/lists"}