{"id":18750138,"url":"https://github.com/mindfiredigital/react-canvas-editor","last_synced_at":"2025-04-12T23:31:50.951Z","repository":{"id":200484466,"uuid":"704468291","full_name":"mindfiredigital/react-canvas-editor","owner":"mindfiredigital","description":"React version of canvas editor","archived":false,"fork":false,"pushed_at":"2024-09-03T12:14:26.000Z","size":3258,"stargazers_count":45,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T17:56:52.291Z","etag":null,"topics":["canvas2d","document","documenteditor","editor","javascript","react","svg","text-editor"],"latest_commit_sha":null,"homepage":"https://mindfiredigital.github.io/react-canvas-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":null,"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":"2023-10-13T10:17:43.000Z","updated_at":"2025-03-20T09:11:43.000Z","dependencies_parsed_at":"2023-10-26T16:43:23.447Z","dependency_job_id":"a9eecc26-d961-4a8d-b15f-f29ed2ebdb28","html_url":"https://github.com/mindfiredigital/react-canvas-editor","commit_stats":null,"previous_names":["mindfiredigital/react-canvas-editor"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Freact-canvas-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Freact-canvas-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Freact-canvas-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindfiredigital%2Freact-canvas-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mindfiredigital","download_url":"https://codeload.github.com/mindfiredigital/react-canvas-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647257,"owners_count":21139081,"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":["canvas2d","document","documenteditor","editor","javascript","react","svg","text-editor"],"created_at":"2024-11-07T17:10:29.764Z","updated_at":"2025-04-12T23:31:50.083Z","avatar_url":"https://github.com/mindfiredigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Document 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=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@mindfiredigital/react-canvas-editor\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e Experience powerful document creation with our React-based editor. Craft and manage multi-page documents effortlessly \u003c/p\u003e\n\nThe `@mindfiredigital/react-canvas-editor` is a tool that allows developers to integrate multi page document editors built on top of Canvas using React.\n\n\u003cbr\u003e\n\n## Table of Contents\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## Installation\n\nTo install the `@mindfiredigital/react-canvas-editor` npm package in your project, use the following command:\n\n```bash\nnpm install @mindfiredigital/react-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  \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  \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  \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  \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[React Canvas Editor](https://canvas-editor-htfx.vercel.app/)\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindfiredigital%2Freact-canvas-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindfiredigital%2Freact-canvas-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindfiredigital%2Freact-canvas-editor/lists"}