{"id":18562455,"url":"https://github.com/replit/codemirror-css-color-picker","last_synced_at":"2025-06-26T15:32:41.997Z","repository":{"id":42962765,"uuid":"434394316","full_name":"replit/Codemirror-CSS-color-picker","owner":"replit","description":"A codemirror extension that adds a color picker input next to CSS color values. Development happens on Replit, just fork and hit run! https://replit.com/@util/Codemirror-CSS-color-picker","archived":false,"fork":false,"pushed_at":"2024-11-05T20:04:03.000Z","size":365,"stargazers_count":43,"open_issues_count":3,"forks_count":8,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-06-20T06:38:56.636Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@replit/codemirror-css-color-picker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/replit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-02T22:32:25.000Z","updated_at":"2025-04-22T07:13:01.000Z","dependencies_parsed_at":"2024-01-16T08:10:45.130Z","dependency_job_id":"72447e55-6e64-4dfc-9bce-aae00199a767","html_url":"https://github.com/replit/Codemirror-CSS-color-picker","commit_stats":{"total_commits":46,"total_committers":11,"mean_commits":4.181818181818182,"dds":0.7608695652173914,"last_synced_commit":"1b71a6fde70320bc981017380b7874c0e986d53a"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/replit/Codemirror-CSS-color-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replit%2FCodemirror-CSS-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replit%2FCodemirror-CSS-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replit%2FCodemirror-CSS-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replit%2FCodemirror-CSS-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/replit","download_url":"https://codeload.github.com/replit/Codemirror-CSS-color-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/replit%2FCodemirror-CSS-color-picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262094673,"owners_count":23258016,"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","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":[],"created_at":"2024-11-06T22:09:47.566Z","updated_at":"2025-06-26T15:32:41.947Z","avatar_url":"https://github.com/replit.png","language":"TypeScript","readme":"# CodeMirror Color Picker\n\n\u003cspan\u003e\u003ca href=\"https://replit.com/@util/Codemirror-CSS-color-picker\" title=\"Run on Replit badge\"\u003e\u003cimg src=\"https://replit.com/badge/github/replit/Codemirror-CSS-color-picker\" alt=\"Run on Replit badge\" /\u003e\u003c/a\u003e\u003c/span\u003e\n\u003cspan\u003e\u003ca href=\"https://www.npmjs.com/package/@replit/codemirror-css-color-picker\" title=\"NPM version badge\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@replit/codemirror-css-color-picker?color=blue\" alt=\"NPM version badge\" /\u003e\u003c/a\u003e\u003c/span\u003e\n\nA CodeMirror extension that adds a color picker input next to CSS color values.\n\n![preview](https://replit.com/cdn-cgi/image/width=3840,quality=80/https://storage.googleapis.com/replit/images/1632627522442_46320608eaa3f0c58bebd5fe4a10efc2.gif)\n\n### Usage\n\n```ts\nimport { basicSetup } from 'codemirror';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { css } from '@codemirror/lang-css';\nimport { colorPicker, wrapperClassName } from '@replit/codemirror-css-color-picker';\n\nnew EditorView({\n  parent: document.querySelector('#editor'),\n  state: EditorState.create({\n    doc: '.wow {\\n  color: #fff;\\n}',\n    extensions: [\n      basicSetup,\n      css(),\n      colorPicker,\n      EditorView.theme({\n        [`.${wrapperClassName}`]: {\n          outlineColor: 'transparent',\n        },\n      }),\n    ],\n  }),\n});\n```\n\n### Todos\n\n- Investigate solutions for alpha values. `input[type=\"color\"]` doesn't support alpha values, we could show another number input next to it for the alpha value.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freplit%2Fcodemirror-css-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freplit%2Fcodemirror-css-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freplit%2Fcodemirror-css-color-picker/lists"}