{"id":17817891,"url":"https://github.com/0xtheprodev/firepad","last_synced_at":"2026-01-31T22:07:08.230Z","repository":{"id":136027958,"uuid":"369909352","full_name":"0xTheProDev/Firepad","owner":"0xTheProDev","description":"Mirror of the package @hackerrank/firepad","archived":false,"fork":false,"pushed_at":"2022-06-11T17:13:49.000Z","size":5393,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-02T12:13:29.405Z","etag":null,"topics":["adapter-pattern","collaborative-editing","firebase","monaco-editor","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@hackerrank/firepad","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xTheProDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2021-05-22T21:31:46.000Z","updated_at":"2023-08-25T18:44:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"74f202b8-86de-4d26-b285-119ba1f63d63","html_url":"https://github.com/0xTheProDev/Firepad","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/0xTheProDev/Firepad","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2FFirepad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2FFirepad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2FFirepad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2FFirepad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xTheProDev","download_url":"https://codeload.github.com/0xTheProDev/Firepad/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2FFirepad/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259851735,"owners_count":22921631,"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":["adapter-pattern","collaborative-editing","firebase","monaco-editor","typescript"],"created_at":"2024-10-27T16:46:36.335Z","updated_at":"2026-01-31T22:07:08.222Z","avatar_url":"https://github.com/0xTheProDev.png","language":"TypeScript","readme":"# Firepad\n\n[![Deployment](https://github.com/interviewstreet/firepad-x/actions/workflows/npm-deploy.yml/badge.svg)](https://github.com/interviewstreet/firepad-x/actions/workflows/npm-deploy.yml)\n[![Maintainability](https://api.codeclimate.com/v1/badges/ced47d99ff8a6fcf623c/maintainability)](https://codeclimate.com/repos/60cb4682ff69b40116002c66/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/ced47d99ff8a6fcf623c/test_coverage)](https://codeclimate.com/repos/60cb4682ff69b40116002c66/test_coverage)\n[![Node Version](https://img.shields.io/node/v/@hackerrank/firepad)](https://nodejs.org)\n[![Version](https://img.shields.io/npm/v/@hackerrank/firepad?label=stable\u0026color=%2300)](https://www.npmjs.com/package/@hackerrank/firepad)\n[![Beta Version](https://img.shields.io/npm/v/@hackerrank/firepad/beta?label=beta)](https://www.npmjs.com/package/@hackerrank/firepad)\n[![Weekly Downloads](https://img.shields.io/npm/dw/@hackerrank/firepad)](https://www.npmjs.com/package/@hackerrank/firepad)\n[![Built With](https://img.shields.io/badge/built%20with-webpack-green)](https://webpack.js.org)\n[![Tested With](https://img.shields.io/badge/tested%20with-jest-yellowgreen)](https://jestjs.io)\n[![Typed With](https://img.shields.io/npm/types/@hackerrank/firepad?label=typed%20with)](https://www.typescriptlang.org)\n[![Styled With](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\u0026label=styled%20with)](https://prettier.io)\n[![License](https://img.shields.io/npm/l/@hackerrank/firepad)](LICENSE)\n[![Open Issues](https://img.shields.io/github/issues-raw/interviewstreet/firepad-x)](https://github.com/interviewstreet/firepad-x/issues)\n[![Closed Issues](https://img.shields.io/github/issues-closed-raw/interviewstreet/firepad-x)](https://github.com/interviewstreet/firepad-x/issues?q=is%3Aissue+is%3Aclosed)\n[![Open Pulls](https://img.shields.io/github/issues-pr-raw/interviewstreet/firepad-x)](https://github.com/interviewstreet/firepad-x/pulls)\n[![Closed Pulls](https://img.shields.io/github/issues-pr-closed-raw/interviewstreet/firepad-x)](https://github.com/interviewstreet/firepad-x/pulls?q=is%3Apr+is%3Aclosed)\n[![Contributors](https://img.shields.io/github/contributors/interviewstreet/firepad-x)](https://github.com/interviewstreet/firepad-x/graphs/contributors)\n[![Activity](https://img.shields.io/github/last-commit/interviewstreet/firepad-x?label=most%20recent%20activity)](https://github.com/interviewstreet/firepad-x/pulse)\n\n## History\n\n[Firepad](https://github.com/FirebaseExtended/firepad) was originally developed by [Firebase Team at _Google™_](https://firebase.googleblog.com/2013/04/announcing-firepad-our-open-source.html) to showcase a Serverless and easily configurable Collaborative experience in the year of 2013.\n\nAt first it started out with only CodeMirror editor with Rich Text support using [OT](https://en.wikipedia.org/wiki/Operational_transformation) to maintain consistency and concurrency. Over the years, open source contributors across the globe have added support for Ace and more recently Monaco editor, and improved overall product.\n\n## Why this Rewrite was necessary\n\nOver the time, with more editor support the codebase got quite convoluted. And every new commit would increase cognitive complexity exponentially, making it harder for the next person to debug any issue. Also keep in mind, the library was designed when JavaScript language itself was quite in early phase.\n\nIn recent years, we have seen web editor and IDE domain being dominated by [Monaco](https://github.com/Microsoft/monaco-editor) editor from _Microsoft™_ and [Theia](https://github.com/eclipse-theia/theia) from _Eclipse Foundation_ respectively. Both of these products are written in [TypeScript](https://www.typescriptlang.org), a modern type-safe language with superset features of JavaScript, with proper engineering and architecture in place.\n\nSo it was about time, that same would happen to Firepad, and we just pulled the plug. We have rewritten all the modules and few extras using TypeScript while enhancing earlier implemented [Adapter Pattern](https://en.wikipedia.org/wiki/Adapter_pattern) to integrate with external modules, such as Database _(preferably Firebase)_ and editors _(as of now only Monaco is supported, but PRs are welcomed)_. In this process, we have also made few minor improvments to scale at performance _(e.g., [Treeshaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking))_ and ease of usage while keeping internal modules safe.\n\n## Usage\n\n### Public API\n\nFirepad takes two dependencies, one **Database Adapter** and one **Editor Adapter**, with a custom configuration object like the following:\n\n```ts\nimport Firepad, { IDatabaseAdapter, IEditorAdapter, IFirepadConstructorOptions } from \"@hackerrank/firepad\";\n\nconst databaseAdapter: IDatabaseAdapter = ...; // Database Adapter instance\n\nconst editorAdapter: IEditorAdapter = ...; // Editor Adapter instance\n\nconst options: IFirepadConstructorOptions = {\n   /** Unique Identifier for current User */\n  userId: ..., // string or number\n  /** Unique Hexadecimal color code for current User */\n  userColor: ..., // string\n  /** Name/Short Name of the current User (optional) */\n  userName: ..., // string\n  /** Default content of Firepad (optional) */\n  defaultText: ..., // string\n};\n\nconst firepad = new Firepad(databaseAdapter, editorAdapter, options);\n```\n\n### Monaco as editor\n\nIf you use Monaco as an editor, we have an shorthand function `fromMonaco` to provide adapters and the binding out of the box with optional configuration object:\n\n```ts\nimport { fromMonaco } from \"@hackerrank/firepad\";\n\nconst databaseRef: string | firebase.database.Reference = ...; // Path to Firebase Database or a Reference Object\n\nconst editor: monaco.editor.IEditor = ...; // Monaco Editor Instance\n\nconst firepad = fromMonaco(databaseRef, editor);\n```\n\n### Writing Custom Adapters\n\nTo use Firepad with any other Editor, one simply need to write an implementation of Editor Adapter interface for that editor. This can be done like this:\n\n```ts\nimport { IEditorAdapter } from \"@hackerrank/firepad\";\n\nclass MyEditorAdapter implements IEditorAdapter {\n  ...\n}\n```\n\nSimilar thing can be done for Database as well by implementing `IDatabaseAdapter` interface. Keep in mind, you might also need to implement event handlers and event triggers depending upon nature of the adapters.\n\n## Development\n\nWe have used [`yarn`](https://yarnpkg.com/) as our package manager through out the project.\n\nWe use [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/) for local development environment and [`webpack`](https://webpack.js.org/api/) for bundling. After installing all the dependencies including all the devDependencies and updating Database (Firebase) configuration, just do `yarn start` to kickoff development server. By default, the dev server opens in `localhost:9000` but this can be configured by passing additional `--port` argument to the start command.\n\nWe use [`jest`](https://jestjs.io/docs) as both test runner and test suite to write unit tests. Doing `yarn test` should run all the testcases and publish coverage report.\n\n### Directories\n\n1. [`examples`](examples) - All the working examples are kept and used for manual testing during development.\n2. [`src`](src) - Source directory for all the modules.\n3. [`test`](test) - Specs directory for all the modules.\n\n## Changelog\n\nSee [CHANGELOG](CHANGELOG.md) for more details.\n\n## Contributing\n\nSee [CONTRIBUTING GUIDELINES](.github/CONTRIBUTING.md) for more details.\n\n## License\n\nSee [LICENSE](LICENSE) for more details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Ffirepad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xtheprodev%2Ffirepad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Ffirepad/lists"}