{"id":14962650,"url":"https://github.com/rozek/svelte-codemirror-component","last_synced_at":"2026-01-20T06:01:47.167Z","repository":{"id":57375171,"uuid":"463068343","full_name":"rozek/svelte-codemirror-component","owner":"rozek","description":"a CodeMirror component for Svelte","archived":false,"fork":false,"pushed_at":"2022-03-01T05:44:06.000Z","size":1058,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-27T05:10:58.626Z","etag":null,"topics":["codemirror","codemirror-editor","svelte","svelte-v3","svelte3"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-24T08:33:04.000Z","updated_at":"2023-12-03T20:04:39.000Z","dependencies_parsed_at":"2022-09-05T13:21:09.693Z","dependency_job_id":null,"html_url":"https://github.com/rozek/svelte-codemirror-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/svelte-codemirror-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-codemirror-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-codemirror-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-codemirror-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-codemirror-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-codemirror-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-codemirror-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28597087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: 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":["codemirror","codemirror-editor","svelte","svelte-v3","svelte3"],"created_at":"2024-09-24T13:30:18.873Z","updated_at":"2026-01-20T06:01:47.148Z","avatar_url":"https://github.com/rozek.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-codemirror-component #\n\na simple CodeMirror component for Svelte\n\nThis module implements a simple Svelte component with a configurable [CodeMirror 5](https://codemirror.net/) instance. It is based on a [simpilar component which is part of the Svelte REPL](https://github.com/sveltejs/svelte-repl/blob/master/src/CodeMirror.svelte) and a [Svelte REPL example](https://svelte.dev/repl/a199ca2d451e4b0b92a8abd2d0e71ec6).\n\n\u003e Nota bene: like many other Svelte components, this one may also be used outside Svelte in a normal HTML document - see [Usage outside Svelte](#usage-outside-svelte) for details.\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-codemirror/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n```\nnpm install svelte-codemirror-component\n```\n\n## Usage ##\n\n`svelte-codemirror-component` should be imported in a module context and may then be used in your markup:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import CodeMirrorComponent from 'svelte-codemirror-component'\n\u003c/script\u003e\n\n\u003cCodeMirrorComponent/\u003e\n```\n\n\u003e **Warning**: as I have not yet been able to bundle [JSHint](https://jshint.com/), [JSONLint](https://github.com/zaach/jsonlint) and [CSSLint](https://github.com/CSSLint/csslint), you will have to import them yourself if you plan to use syntax checking for JavaScript, JSON or CSS files:\n\n```html\n\u003csvelte:head\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jshint/2.13.4/jshint.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/csslint/1.0.5/csslint.min.js\"\u003e\u003c/script\u003e\n\u003c/svelte:head\u003e\n\n\u003cscript context=\"module\"\u003e\n  import CodeMirrorComponent from 'svelte-codemirror-component'\n\u003c/script\u003e\n\n\u003cCodeMirrorComponent Mode='js'/\u003e\n```\n\nIf you are sensitive to the GDPR (or similar regulations) you should probably first copy the mentioned JavaScript files to your local server and reference them from there.\n\n## Bindings ##\n\n`svelte-codemirror-component` offers two bindings which give you direct access to the underlying CodeMirror instance and the current value of the edited text:\n\n* **`Editor`**\u003cbr\u003eallows to address the CodeMirror instance directly (which might be useful if you plan to react on CodeMirror events)\n* **`Value`**\u003cbr\u003e\"reactively\" binds to the currently edited text\n\n```html\n\u003cscript context=\"module\"\u003e\n  import CodeMirrorComponent from 'svelte-codemirror-component'\n\u003c/script\u003e\n\n\u003cscript \u003e\n  let Editor, Value = 'initial Value'\n  \n  $: console.log('new Value',Value)\n\u003c/script\u003e\n\n\u003cCodeMirrorComponent bind:Editor={Editor} bind:Value={Value}/\u003e\n```\n\n## Options and Bindings ##\n\nThe CodeMirror component already defines a few simple options itself - in addition to an `Options` attribute which may be used to pass any (other) options directly to the CodeMirror instance. Options will only be considered during component instantiation - later changes will be ignored.\n\n* **`Mode`**\u003cbr\u003especifies the language mode CodeMirror is working in. You may specify either `js` (for JavaScript), `svelte`, `json`, `html`, `css` or `yaml` - by default, `Mode` is set to `js`\n* **`LintOptions`**\u003cbr\u003eby default, texts edited in mode `js`, `json`, `html` or `css` are \"linted\", i.e., any syntactic errors are indicated as such in the \"gutter\" area to the left of the incorrect line. You may alternatively specify an object with specific options for the chosen linter - or simply disable linting by setting it to `false`\n* **`withLineNumbers`**\u003cbr\u003eset this option to `true` (which is also the default) in order to show line numbers in the \"gutter area\" to the left of the edited text - or to `false` otherwise\n* **`withLineWrapping`**\u003cbr\u003eset this option to `true` in order to let long lines be wrapped - or to `false` otherwise (`false` is the default)\n* **`Indentation`**\u003cbr\u003especifies the number of characters a new line should be indented automatically after the beginning of a new JavaScript or JSON block or list (i.e., after `{` or `[`) or a new HTML tag (i.e., after `\u003c`). By default, it is set to `2`\n* **`TabSize`**\u003cbr\u003especifies the number of characters a horizontal tab should proceed (by default, the tab size is set to 2)\n* **`indentWithTabs`**\u003cbr\u003eset this to `true` if you want tabs to be preserved - or `false` if you prefer spaces instead of tabs (by default, this option is set to `false`, i.e., spaces are preferred)\n* **`closeBrackets`**\u003cbr\u003eset this to `true` if you want CodeMirror to automatically insert a closing brace for you whenever you enter an opening one - or `false` otherwise (by default, no closing bracket is inserted)\n* **`closeTags`**\u003cbr\u003eset this to `true` if you want CodeMirror to automatically insert a closing `\u003e` for you whenever you enter a `\u003c` in HTML mode - or `false` otherwise (by default, opened tags are not automatically closed)\n\n## Events ##\n\nRight now, only one type of CodeMirror event is passed through to the user of a CodeMirror component:\n\n* **`change`**\u003cbr\u003ethis event is fired whenever the edited text changes. You may catch it like any other Svelte event:\u003cbr\u003e`\u003cCodeMirrorComponent on:change={your-event-handler}/\u003e`\n\n## Styling ##\n\nThe visual appearance of CodeMirror components may be adjusted by specifying styles for the CSS classes which have been assigned to the various parts of a CodeMirror instance. You should, however, take care to use rather specific CSS selectors in order to override the internal defaults. In the easiest case, you may just assign your own CSS class to a CodeMirror component and mention that in your stylesheet:\n\n```html\n\u003cstyle\u003e\n  :global(.my .CodeMirror) {\n    height:100%; /* to overwrite internal default settings */\n    background:white;\n    font-family:Courier,\"Lucida Console\",Monaco,monospace;\n    font-size:14px; font-weight:normal;\n    color:black;\n  }\n\u003c/style\u003e\n\n\u003cscript context=\"module\" lang=\"ts\"\u003e\n  import CodeMirrorComponent from 'svelte-codemirror-component'\n\u003c/script\u003e\n\n\u003cCodeMirrorComponent class=\"my\" style=\"width:480px; height:300px; border:solid 1px gray\"\n  Value='console.log(\"Hello, World!\")' Mode='js'/\u003e\n```\n\n## Usage outside Svelte ##\n\nThe (bundled version of the) CodeMirror component may also be used outside Svelte in a normal HTML page as shown in a [separate example](example_component_on_web_page.html). Just load the bundled version together with any desired linters and insert it into a given DOM element:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n \u003chead\u003e\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jshint/2.13.4/jshint.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/svelte-codemirror-component@latest/dist/svelte-codemirror-component.bundled.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", function () {\n      let JSValue  = `console.log('Hello, World!')`\n      let JSEditor = new CodeMirrorComponent({\n        target: document.getElementById('JS-Editor'),\n        props: {\n          Value:JSValue, Mode:'js',\n          style:'width:480px; height:320px; border:solid 1px; overflow:auto'\n        }\n      })\n  \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n  \u003cdiv id=\"JS-Editor\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-codemirror-component/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-codemirror-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-codemirror-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-codemirror-component/lists"}