{"id":14384789,"url":"https://github.com/chili-epfl/collab-react-components","last_synced_at":"2026-01-31T18:19:45.376Z","repository":{"id":57203092,"uuid":"93533965","full_name":"chili-epfl/collab-react-components","owner":"chili-epfl","description":"React components for collaborative editing: text, rich text, and complex forms","archived":false,"fork":false,"pushed_at":"2017-09-27T10:01:42.000Z","size":167817,"stargazers_count":49,"open_issues_count":3,"forks_count":13,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-12-21T13:33:41.266Z","etag":null,"topics":["collaborative-editing","collaborative-form","react","react-jsonschema-form","react-quill","sharedb"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/chili-epfl.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":"2017-06-06T15:27:44.000Z","updated_at":"2024-04-10T00:29:27.000Z","dependencies_parsed_at":"2022-09-15T13:21:05.240Z","dependency_job_id":null,"html_url":"https://github.com/chili-epfl/collab-react-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chili-epfl/collab-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chili-epfl%2Fcollab-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chili-epfl%2Fcollab-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chili-epfl%2Fcollab-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chili-epfl%2Fcollab-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chili-epfl","download_url":"https://codeload.github.com/chili-epfl/collab-react-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chili-epfl%2Fcollab-react-components/sbom","scorecard":{"id":277617,"data":{"date":"2025-08-11","repo":{"name":"github.com/chili-epfl/collab-react-components","commit":"a14c2acbccaa8fbfd1a4cb61770b578fc90d17b2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"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":"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":"Code-Review","score":0,"reason":"Found 1/25 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":"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":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"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":"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":"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":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"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:0","Info: FSF or OSI recognized license: MIT License: LICENSE: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 7 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"}}]},"last_synced_at":"2025-08-17T14:56:05.863Z","repository_id":57203092,"created_at":"2025-08-17T14:56:05.863Z","updated_at":"2025-08-17T14:56:05.863Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28949284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T14:26:55.697Z","status":"ssl_error","status_checked_at":"2026-01-31T14:26:52.545Z","response_time":128,"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":["collaborative-editing","collaborative-form","react","react-jsonschema-form","react-quill","sharedb"],"created_at":"2024-08-28T18:01:40.346Z","updated_at":"2026-01-31T18:19:45.359Z","avatar_url":"https://github.com/chili-epfl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# collab-react-components\n\nDatabase backend and collaborative React components.\nThis package is an abstraction layer to the famous collaborative database backend [ShareDB](https://github.com/share/sharedb). \n\nThe current available components are:\n - A simple collaborative editor\n - A rich collaborative editor based on [React-Quill](https://github.com/zenoamaro/react-quill)\n - A collaborative form based on [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form)\n\n## Example apps\nMultiple example apps are present in the `demos` directory. Feel free look at\nthem for a real implementation.\n\nTo start the demo applications, just clone the repository, move to the desired demo,\ninstall the npm packages and start the application:\n\n```\ncd demos/collab-editor\nnpm install\nnpm start\n```\n\n## Table of contents\n- [Installation](#installation)\n- [Server initialization](#server-initialization)\n    - [The CollabCollection class](#the-collabcollection-class)\n- [Usage](#usage)\n    - [Server API](#server-api)\n    - [Simple collaborative Editor](#simple-collaborative-editor)\n    - [Collaborative Form](#collaborative-form)\n    - [Rich Collaborative Editor](#rich-collaborative-editor)\n- [License](#license)\n---\n\n## Installation\n- Requires React 15.4.0+.\n\u003e Note: The \"master\" branch of the repository reflects the published stable release.\n\n```\n$ npm install --save collab-react-components\n```\n\n\u003e Note: It is recommended to use [Bootstrap](http://getbootstrap.com/) \nwith this package for better rendering of the form elements.\n\n## Server initialization\nIn order to use the collaborative functionalities, you will need to start a new\nCollabServer instance. One way to do it is on startup:\n\n```JavaScript\nconst CollabServer = require('collab-react-components').Server;\n\n// app is you Express app for example.\n\nCollabServer.start(app);\n```\nYou can also stop the server by calling:\n\n```JavaScript\nCollabServer.stop();\n```\n\u003e Note: See the demos for an example of implementation with an\n[Express](https://expressjs.com/) server.\n\n### The CollabCollection class\n\nThe `CollabCollection` class represents a new collaborative collection of documents on the server.\nCollaborative Collections collection can be persisted to disk using MongoDB or in memory if no options\nare passed to the server. To use MongoDB, set up a database and pass its URL\nto the `CollabServer`. For example:\n\n```JavaScript\nconst MongoClient = require('mongodb').MongoClient;\n\n// Create a MongoDB server\nconst url = 'mongodb://localhost:27017/my-collaborative-app';\nMongoClient.connect(url)\n  .catch(function (err) {\n    if (err) throw err;\n  })\n;\n\nconst options = {\n  db: {\n    type: 'mongo',\n    url\n  }\n};\n\n// Create a CollabServer instance with MongoDB\nCollabServer.start(app, options);\n```\n\u003eNote: For the moment, only MongoDB is supported as a persistence layer.\n\nOnce a `CollabCollection` is created, you will be able to query its content\nusing the `CollabCollection` methods.\n\n## Usage\nFor a basic implementation, see the demos applications.\n\n### Server API\n\nThe `CollabCollection` class methods are the following:\n\n- `create(id, data = '')`: Creates a new collaborative document for a simple editor with `id` (String) and with initial `data` (String).\n- `createForm(id, schema)`: Creates a new collaborative form with `id` (String) and with initial data corresponding to the `schema`, where\n`schema` is a `react-jsonschema-form` schema.\n- `createRichText(id, data='')`: Creates a new collaborative document for a rich editor with `id` (String) and with initial `data` (String).\n- `remove(id)`: Deletes a document with ID `id`. \n\n### Simple Collaborative Editor\n\nTo implement a simple collaborative editor (textarea), start by instantiating\na new `CollabCollection` on the server, taking as parameter the name of the collaborative collection:\n\n```JavaScript\nconst CollabCollection = require('collab-react-components').Collection;\n\nconst documents = new CollabCollection(\"documents\");\ndocuments.create(\"editor1\");\n```\n\n#### Client API\n\nCall `CollabEditor` from the client\n\n```jsx\nimport React from 'react';\nimport { CollabEditor } from 'collab-react-components/dist/client';\n\n\u003cCollabEditor\n    id=\"myEditor\"\n    collectionName=\"documents\"\n/\u003e\n```\nProps of `CollabEditor`:\n- `id`: ID of the document to fetch from the database\n- `collectionName`: Name of the collection\n- `rows`: \"rows\" attribute of the textarea\n- `classNames`: default is `form-control`\n- `onChange(text)`: Function called on every local modification.\n`text` is a string representing the current value of the editor.\n\n### Collaborative Form\n\u003eNote: The collaborative form is based on [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form)\n\nTo implement a collaborative form, start by instantiating a new `CollabCollection` on the server,\ntaking as parameter the name of the collection and a schema:\n\n```JavaScript\nconst CollabCollection = require('collab-react-components').Collection;\n\nconst forms = new CollabCollection(\"forms\");\nconst schema = {\n      title: \"My collaborative form\",\n      type: \"object\",\n      required: [\"input\", \"textarea\"],\n      properties: {\n        input: {type: \"string\", title: \"Input\"},\n        textarea: {type: \"string\", title: \"Textarea\", default: 'Default text'},\n      }\n    };\nforms.createForm(\"form1\", schema);\n```\nThis will create a new collaborative document on the database containing the\ncollaborative data of the form.\n\n#### Client API\n\nJust call `CollabForm` from the client.\n\n\u003e Note: You should not use the widget `password` in a collaborative form.\nAt least not until the data is encrypted on the database.\n\n```jsx\nimport React from 'react';\nimport { CollabForm } from 'collab-react-components/dist/client';\n\n\u003cCollabForm\n    id=\"MyForm\" \n    collectionName=\"forms\"\n/\u003e\n```\n\u003e Note: `CollabForm` can be used exactly like `Form` from `react-jsonschema-form`\nwith few exceptions (see below).\n\nProps of `CollabForm` that vary from `react-jsonschema-form`:\n- `id`: ID of the form to fetch from the database\n- `collectionName`: Name of the collection\n- You should not pass a `schema` to the `CollabForm` component.\n- You should not pass `formData` to `CollabForm`, the data will be fetched\n  from the collaboratively shared data in the databas\n\nThe supported collaborative String types are `text`, `textarea` and `uri`.\nThey can be defined in the `uiSchema` like:\n\n```jsx\nconst uiSchema = {\n    textarea: {\"ui:widget\": \"textarea\"},\n    uri: {\"ui:widget\": \"uri\"}\n}\n\n\u003cCollabForm\n    id=\"MyForm\"\n    collectionName=\"forms\"\n    uiSchema={uiSchema}\n/\u003e\n\n```\n\u003e Note: Other types such as `date` or `email` cannot be updated simultaneously in a collaborative manner.\n\nAt the moment, `CollabForm` only supports form schemas where the root\nelement is a non-nested `object` (does not contain other objects or arrays).\nWe are currently working on implementing `array` capabilities.\n\n### Rich Collaborative Editor\n\u003eNote: The collaborative editor is based on [react-quill](https://github.com/zenoamaro/react-quill)\n\nTo implement a rich collaborative editor, start by instantiating a new `CollabCollection` on the server,\ntaking as parameter the name of the collection:\n\n```JavaScript\nconst CollabCollection = require('collab-react-components').Collection;\n\nconst documents = new CollabCollection(\"documents\");\ndocuments.createRichText('rich-editor1', 'My initial data');\n```\nThis will create a new collaborative document on the database containing the\ncollaborative data of the rich text editor.\n\n#### Client API\n\nJust call `CollabRichEditor` from the client.\n\n```jsx\nimport React from 'react';\nimport { CollabRichEditor } from 'collab-react-components/dist/client';\n\n\u003cCollabRichEditor\n    id=\"MyDoc\"\n    collectionName=\"documents\"\n/\u003e\n```\n\n\u003e Note: `CollabRichEditor` can be used exactly like `ReactQuill` from `react-quill`\nwith few exceptions (see below).\n\n\nProps of `CollabRichEditor` that vary from `react-quill`:\n- `id`: ID of the form to fetch from the database\n- `collectionName`: Name of the collection\n\n\u003eNote: Do not pass `value` or `defaultValue` to `CollabRichEditor`, the data will be fetched\nfrom the collaboratively shared data on the server.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchili-epfl%2Fcollab-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchili-epfl%2Fcollab-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchili-epfl%2Fcollab-react-components/lists"}