{"id":25198700,"url":"https://github.com/mindfiredigital/document-editor","last_synced_at":"2025-07-05T05:06:05.609Z","repository":{"id":275945526,"uuid":"927599808","full_name":"mindfiredigital/document-editor","owner":"mindfiredigital","description":"A mono repo for document editor like google doc ","archived":false,"fork":false,"pushed_at":"2025-05-06T11:41:00.000Z","size":5649,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-13T22:03:53.868Z","etag":null,"topics":["angular","document","document-editor","editor","eslint","google-doc-clone","googledocs","html5","html5canvas","javascript","multi-page-viewer","react","text-editor","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"https://mindfiredigital.github.io/document-editor/","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/mindfiredigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-05T08:20:50.000Z","updated_at":"2025-05-08T20:17:02.000Z","dependencies_parsed_at":"2025-04-18T10:26:42.741Z","dependency_job_id":"a9881069-798f-4a57-afcc-55e8d0b98560","html_url":"https://github.com/mindfiredigital/document-editor","commit_stats":null,"previous_names":["mindfiredigital/document-editor"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/mindfiredigital/document-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Fdocument-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Fdocument-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Fdocument-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Fdocument-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mindfiredigital","download_url":"https://codeload.github.com/mindfiredigital/document-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Fdocument-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263687147,"owners_count":23496088,"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":["angular","document","document-editor","editor","eslint","google-doc-clone","googledocs","html5","html5canvas","javascript","multi-page-viewer","react","text-editor","typescript","webcomponents"],"created_at":"2025-02-10T03:18:30.274Z","updated_at":"2025-07-05T05:06:05.589Z","avatar_url":"https://github.com/mindfiredigital.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eDocument Editor \u003c/h1\u003e\u003cbr\u003e\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/@mindfiredigital/react-canvas-editor\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mindfiredigital/react-canvas-editor.svg?sanitize=true\" alt=\"React Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@mindfiredigital/angular-canvas-editor\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mindfiredigital/angular-canvas-editor.svg?sanitize=true\" alt=\"Angular Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mindfiredigital/document-editor\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs Welcome\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eExperience seamless and powerful document creation\u003c/strong\u003e with our advanced HTML5 Canvas-based Document Editor. Effortlessly craft, edit, and manage multi-page documents with precision and flexibility.\n\u003c/p\u003e\n\nThis tool empowers developers to easily integrate a fully customizable, multi-page document editor into their web applications — all built on the robust and scalable foundation of HTML5 Canvas.\n\n\u003cbr\u003e\n\n## Table of Content\n\n- [Why canvas over HTML Editor](#why-canvas-over-html-editor)\n- [Features](#features)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Contributing](#contributing)\n- [License](#license)\n\n\u003cbr\u003e\n\n# Why canvas over HTML Editor\n\nThe canvas element in HTML serves as a versatile space for drawing graphics using JavaScript, enabling the creation of dynamic, interactive, and visually engaging content on web pages. Within this context, a Canvas editor emerges as a powerful tool or application that harnesses the capabilities of the canvas element. This editor facilitates the creation, editing, and manipulation of graphics or drawings directly within a web browser.\n\n- **Fine-Grained Control**: Fine-Grained Control: Total freedom to manipulate pixels, dictate rendering, and create custom elements and interactivity beyond what HTML offers out of the box.\n\n- **Scalable Performance**: Blazing fast rendering and lightweight data synchronization fueled by the raw power of canvas APIs rather than heavy HTML DOM reconciliation.\n\n- **Easy Multiplayer Integration**: Canvas state using simple coordinate vectors flows seamlessly cross-device enabling effortless real-time collaborative editing at scale.\n\n- **Unleashed Creativity**: No limits enforced by page markup frees imagination to run wild. Build beyond editor chrome right on the infinite canvas with total creative liberty.\n\n- **Future Facing Setup**: Canvas as a technology continues rapid innovation, unlike stale HTML editors. What’s created today on canvas can easily harness tomorrow’s new features.\n\n- **Skill Transferability**: Canvas skills open doors across cutting edge domains like metaverse experiences, game dev, 3D, generative art, and other growth areas.\n\nTo know more you can check the link\n[Canvas vs HTML Editor](https://mindfiredigital.github.io/react-canvas-editor/docs/Why-we-use-canvas/)\n\n\u003cbr\u003e\n\n## Features\n\n- **Undo**: This feature allows you to reverse the most recent action you performed. It's particularly useful when you make a mistake and want to go back one step.\n- **Redo**: Redo is the opposite of undo. It allows you to reapply an action that you've previously undone.\n- **Bold**: When you apply bold formatting to text, it makes the selected text appear thicker and more prominent.\n- **Italic**: Italic text is slanted to the right.\n- **Underline**: Underlining text places a horizontal line beneath it.\n- **Subscript**: Subscript lowers the selected text below the baseline.\n- **Superscript**: Superscript raises the selected text above the baseline.\n- **Strikethrough**: Text with a strikethrough line through it is used to indicate that the content should be deleted or is no longer valid.\n- **Left Align**: This feature aligns text to the left margin, creating a straight left edge.\n- **Center Align**: Center alignment places text in the middle of the page or text box.\n- **Right Align**: Text is aligned to the right margin, creating a straight right edge.\n- **Justify**: Justification spreads text evenly between both the left and right margins, creating a clean and straight appearance on both sides.\n- **Bullet List**: Bullet lists present information as a series of items with bullets.\n- **Numbered List**: Numbered lists provide a sequential order to items.\n- **Font Type**: Font type refers to the specific style of text characters. Examples include Arial, Times New Roman, and Calibri.\n- **Insert Table**: This feature allows you to create tables to organize data.\n- **Text Color**: Text color lets you change the color of the text.\n- **Highlight Color**: Highlighting text adds a background color.\n- **Font Size**: Font size controls the size of the text characters.\n- **Heading**: Headings are typically used to divide a document into sections or chapters. They are usually styled differently, such as with larger text or bold formatting.\n- **Hyperlink**: A hyperlink is a clickable link that connects to a webpage or another location within the document.\n- **Image**: This feature allows you to insert images or graphics into your document to enhance its visual appeal or convey additional information.\n- **Customizable UI**: Easily customize the document editor's user interface to match your application's branding.\n\n\u003cbr\u003e\n\n## Canvas Editor Installation\n\n### 👉 For **React** Projects:\n\n```bash\nnpm install @mindfiredigital/react-canvas-editor\n```\n\n### 👉 For **Angular** Projects:\n\n```bash\nnpm install @mindfiredigital/angular-canvas-editor\n```\n\n\u003cbr\u003e\n\n## Getting Started\n\n- **Initialization**: Initialize the canvas document editor in your project, specifying the container element where the editor will be embedded.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eReact Component\u003c/th\u003e\n    \u003cth\u003eWeb Component for React\u003c/th\u003e\n    \u003cth\u003eWeb Component for JavaScript\u003c/th\u003e\n    \u003cth\u003eAngular Component\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\n\n```javascript\nimport { DocumentEditor } from \"@mindfiredigital/react-canvas-editor\";\nimport React from \"react\";\n\nexport const App = () =\u003e {\n  const toolbarItem: any = {\n    bold: true,\n    italic: true,\n    underline: true,\n    undo: true,\n    redo: true,\n    image: true,\n  };\n\n  const handleChange = (data) =\u003e {\n    console.log(\"test -\u003e\", data);\n  };\n\n  const handleSelectedText = (text) =\u003e {\n    console.log(text);\n  };\n\n  return (\n    \u003cDocumentEditor\n      toolbar={toolbarItem}\n      on_change={handleChange}\n      on_select={handleSelectedText}\n      value='Hello world'\n    /\u003e\n  );\n};\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```javascript\nimport { DocumentEditorWebComponent } from \"@mindfiredigital/react-canvas-editor\";\n\nconst toolbarItem: any = {\n  bold: true,\n  italic: true,\n  underline: true,\n  undo: true,\n  redo: true,\n  image: true,\n};\n\nconst handleChange = (data) =\u003e {\n  console.log(\"test -\u003e\", data);\n};\n\nconst handleSelectedText = (text) =\u003e {\n  console.log(text);\n};\n\nconst props = {\n  toolbar:toolbarItem\n  on_change:handleChange\n  on_select:handleSelectedText\n  value:'Hello world'\n};\n\nDocumentEditorWebComponent(props);\n\nexport const App = () =\u003e \u003cdiv id='document-editor'\u003e\u003c/div\u003e;\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```html\n\u003c!-- In you html file add following code in a body tag where you want to use react canvas editor --\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"document-editor\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\" src=\"/main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n;\n```\n\n```javascript\n// In main.js file(i.e. used as a script in html file) add the following code\nimport { DocumentEditorWebComponent } from \"@mindfiredigital/react-canvas-editor\";\n\nconst toolbarItem = {\n  bold: true,\n  italic: true,\n  underline: true,\n  undo: true,\n  redo: true,\n  image: true,\n};\n\nfunction handleChange(data) {\n  console.log(`test1 -\u003e ${data}`);\n}\n\nfunction handleSelectedText(text) {\n  console.log(`select1 -\u003e, ${text}`);\n}\n\nDocumentEditorWebComponent({\n  toolbar:toolbarItem\n  on_change:handleChange\n  on_select:handleSelectedText\n  value:'Hello world'\n});\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```typescript\n// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { DocumentEditorModule } from '@mindfiredigital/angular-canvas-editor';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, DocumentEditorModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\n// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdocument-editor\n      [toolbar]=\"toolbarItem\"\n      (onChange)=\"handleChange($event)\"\n      (onSelect)=\"handleSelectedText($event)\"\n      [value]=\"'Hello world'\"\n    \u003e\u003c/document-editor\u003e\n  `,\n})\nexport class AppComponent {\n  toolbarItem = {\n    bold: true,\n    italic: true,\n    underline: true,\n    undo: true,\n    redo: true,\n    image: true,\n  };\n\n  handleChange(data: any) {\n    console.log('test -\u003e', data);\n  }\n\n  handleSelectedText(text: string) {\n    console.log(text);\n  }\n}\n```\n\n  \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003cbr\u003e\n\n- **Customization**: Customize the editor's UI and behavior to match your application's requirements.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eReact Component\u003c/th\u003e\n    \u003cth\u003eWeb Component for React\u003c/th\u003e\n    \u003cth\u003eWeb Component for JavaScript\u003c/th\u003e\n    \u003cth\u003eAngular Component\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n  \u003ctd\u003e\n\n```javascript\nimport { DocumentEditor } from \"@mindfiredigital/react-canvas-editor\";\nimport React from \"react\";\n\nexport const App = () =\u003e {\n  const toolbarClass: any = {\n    container: {\n      // backgroundColor: \"red\"\n    },\n    primaryToolbar: {\n      justifyContent: \"center\",\n    },\n    item: {\n      undo: {\n        // border: 'red solid 2px',\n        // background:'yellow'\n      },\n      redo: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      bold: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      italic: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      underline: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      image: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      fontType: {\n        // background:'green'\n      },\n      table: {\n        // background:'green'\n      },\n      fontColor: {\n        // background:'green'\n      },\n      highlight: {\n        // background:'green'\n      },\n      fontSize: {\n        // background:'green'\n      },\n      heading: {\n        // background:'green'\n      },\n      selectedToolbarItemColor: {\n        // color: \"#1a73e8\",\n      },\n    },\n  };\n\n  const canvasClass = {\n    editorMain: {\n      // background:'antiquewhite'\n    },\n    margin: {},\n  };\n\n  return (\n    \u003cDocumentEditor toolbar_class={toolbarClass} canvas_class={canvasClass} /\u003e\n  );\n};\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```javascript\nimport { DocumentEditorWebComponent } from \"@mindfiredigital/react-canvas-editor\";\n\nconst toolbarClass: any = {\n  container: {\n    // backgroundColor: \"red\"\n  },\n  primaryToolbar: {\n    justifyContent: \"center\",\n  },\n  item: {\n    undo: {\n      // border: 'red solid 2px',\n      // background:'yellow'\n    },\n    redo: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    bold: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    italic: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    underline: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    image: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    fontType: {\n      // background:'green'\n    },\n    table: {\n      // background:'green'\n    },\n    fontColor: {\n      // background:'green'\n    },\n    highlight: {\n      // background:'green'\n    },\n    fontSize: {\n      // background:'green'\n    },\n    heading: {\n      // background:'green'\n    },\n    selectedToolbarItemColor: {\n      // color: \"#1a73e8\",\n    },\n  },\n};\n\nconst canvasClass = {\n  editorMain: {\n    // background:'antiquewhite'\n  },\n  margin: {},\n};\n\nconst props = {\n  toolbar_class: toolbarClass,\n  canvas_class: canvasClass,\n};\n\nDocumentEditorWebComponent(props);\n\nexport const App = () =\u003e \u003cdiv id='document-editor'\u003e\u003c/div\u003e;\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```html\n\u003c!-- In you html file add following code in a body tag where you want to use react canvas editor --\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"document-editor\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\" src=\"/main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n;\n```\n\n```javascript\n// In main.js file(i.e. used as a script in html file) add the following code\nimport { DocumentEditorWebComponent } from \"@mindfiredigital/react-canvas-editor\";\n\nconst toolbarClass: any = {\n  container: {\n    // backgroundColor: \"red\"\n  },\n  primaryToolbar: {\n    justifyContent: \"center\",\n  },\n  item: {\n    undo: {\n      // border: 'red solid 2px',\n      // background:'yellow'\n    },\n    redo: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    bold: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    italic: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    underline: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    image: {\n      // border: 'black solid 3px',\n      // background:'blue'\n    },\n    fontType: {\n      // background:'green'\n    },\n    table: {\n      // background:'green'\n    },\n    fontColor: {\n      // background:'green'\n    },\n    highlight: {\n      // background:'green'\n    },\n    fontSize: {\n      // background:'green'\n    },\n    heading: {\n      // background:'green'\n    },\n    selectedToolbarItemColor: {\n      // color: \"#1a73e8\",\n    },\n  },\n};\n\nconst canvasClass = {\n  editorMain: {\n    // background:'antiquewhite'\n  },\n  margin: {},\n};\n\nDocumentEditorWebComponent({\n  toolbar_class: toolbarClass,\n  canvas_class: canvasClass,\n});\n```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n```typescript\n// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdocument-editor\n      [toolbar_class]=\"toolbarClass\"\n      [canvas_class]=\"canvasClass\"\n    \u003e\u003c/document-editor\u003e\n  `,\n})\nexport class AppComponent {\n  toolbarClass = {\n    container: {\n      // backgroundColor: \"red\"\n    },\n    primaryToolbar: {\n      justifyContent: 'center',\n    },\n    item: {\n      undo: {\n        // border: 'red solid 2px',\n        // background:'yellow'\n      },\n      redo: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      bold: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      italic: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      underline: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      image: {\n        // border: 'black solid 3px',\n        // background:'blue'\n      },\n      fontType: {\n        // background:'green'\n      },\n      table: {\n        // background:'green'\n      },\n      fontColor: {\n        // background:'green'\n      },\n      highlight: {\n        // background:'green'\n      },\n      fontSize: {\n        // background:'green'\n      },\n      heading: {\n        // background:'green'\n      },\n      selectedToolbarItemColor: {\n        // color: \"#1a73e8\",\n      },\n    },\n  };\n\n  canvasClass = {\n    editorMain: {\n      // background:'antiquewhite'\n    },\n    margin: {},\n  };\n}\n```\n\n  \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n- **DOM handlers**:\n  - **on_change**: The onchange event occurs when the value is changed.\n  - **on_select**: The onSelect event occurs when the value is selected.\n  - **value**: The value attribute on an tag sets the value of the page.\n\n\u003cbr\u003e\n\n## Demo\n\n[React Canvas Editor](https://canvas-editor-htfx.vercel.app/)\n\n[Angular Canvas Editor](https://canvas-editor-htfx.vercel.app/)\n\n## Contributing\n\nWe welcome contributions from the community. If you'd like to contribute to the `react-document-editor` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).\n\u003cbr\u003e\n\n## License\n\nCopyright (c) Mindfire Digital llp. All rights reserved.\n\nLicensed under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindfiredigital%2Fdocument-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindfiredigital%2Fdocument-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindfiredigital%2Fdocument-editor/lists"}