{"id":14503914,"url":"https://github.com/cevinw/editorjs-react-parser","last_synced_at":"2025-08-08T02:03:27.077Z","repository":{"id":241951990,"uuid":"806113398","full_name":"cevinw/editorjs-react-parser","owner":"cevinw","description":"A renderer for editorjs block data to react components","archived":false,"fork":false,"pushed_at":"2025-06-15T10:01:11.000Z","size":276,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T10:04:32.382Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cevinw.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,"zenodo":null}},"created_at":"2024-05-26T12:16:20.000Z","updated_at":"2025-06-15T10:00:42.000Z","dependencies_parsed_at":"2024-06-01T17:43:25.659Z","dependency_job_id":"d61a90f8-858d-46be-afa9-81255b163171","html_url":"https://github.com/cevinw/editorjs-react-parser","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":"0.20512820512820518","last_synced_commit":"5ba46249599f1886a0fd6a044358a5d220acc439"},"previous_names":["cevinw/editorjs-next-renderer","cevinw/editorjs-react-parser"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/cevinw/editorjs-react-parser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cevinw%2Feditorjs-react-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cevinw%2Feditorjs-react-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cevinw%2Feditorjs-react-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cevinw%2Feditorjs-react-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cevinw","download_url":"https://codeload.github.com/cevinw/editorjs-react-parser/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cevinw%2Feditorjs-react-parser/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269351911,"owners_count":24402678,"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","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-09-03T20:00:35.570Z","updated_at":"2025-08-08T02:03:27.067Z","avatar_url":"https://github.com/cevinw.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript"],"readme":"# EditorJs react parser\n\n\u003e A renderer for editorjs block data to react components\n\nThis project aims to simplify rendering correct semantic html tags out of editorjs output data to react elements\n\nThe goal is to support all block types and tunes specified in the [awesome list](https://github.com/editor-js/awesome-editorjs/tree/master), currently this project supports these block tools.\n\n- [@editorjs/paragraph](https://github.com/editor-js/paragraph)\n- [@editorjs/header](https://github.com/editor-js/header)\n- [@editorjs/quote](https://github.com/editor-js/quote)\n- [@editorjs/delimiter](https://github.com/editor-js/delimiter)\n- [editorjs-alert](https://github.com/vishaltelangre/editorjs-alert)\n- [@editorjs/list](https://github.com/editor-js/list)\n- [@editorjs/image](https://github.com/editor-js/image)\n- [@editorjs/table](https://github.com/editor-js/table)\n- [@editorjs/code](https://github.com/editor-js/code)\n- [@bomdi/codebox](https://github.com/BomdiZane/codebox)\n- [@calumk/editorjs-codeflask](https://github.com/calumk/editorjs-codeflask)\n- [@rxpm/editor-js-code](https://github.com/rajatxs/editor-js-code)\n- [@calumk/editorjs-columns](https://github.com/calumk/editorjs-columns)\n- [@editorjs/text-variant-tune](https://github.com/editor-js/text-variant-tune)\n- [@editorjs/raw](https://github.com/editor-js/raw)\n\nThis whole component can function as both a server component or client component.\n\n\u003e **Installation** ♥\n\u003e\n\u003e ```\n\u003e npm i editor-react-parser\n\u003e ```\n\n\u003e [!TIP]\n\u003e If you wish to use the default tailwind styling include this in your tailwind.config file\n\u003e\n\u003e ```json\n\u003e \"content\": [\n\u003e   \"./node_modules/editor-react-parser/dist/*/**.{js,ts}\",\n\u003e ]\n\u003e ```\n\n## Usage\n\nThis parser is built to be flexible but with a low bar of entry.\n\nAdd this component to any other component. And feed it with the complete output data object from editor js\n\n```tsx\n\u003cBlockParser data={editorJsData} /\u003e\n```\n\nThis component allows all styles and default config to be overriden by a config object.\nIf you are using typescript you can use the included type BlockParserConfig to get hints on what can be done.\n\n\u003e [!NOTE] \u003e **Only the fields you override will override the default config**\n\n```tsx\nimport React from \"react\";\nimport BlockParser, { OutputData } from \"editor-react-parser\";\n\nconst Example = () =\u003e {\n  const editorJsData: OutputData = {\n    version: \"2.29.1\",\n    time: new Date().getTime(),\n    blocks: [\n      {\n        id: \"Kp5hXEi74T\",\n        type: \"paragraph\",\n        data: {\n          text: \"test paragraph\",\n        },\n      },\n    ],\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cBlockParser data={editorJsData} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Example;\n```\n\n### Classes and styling\n\nThe Editor Js react parser relies on using tailwind styles to render some components,\nif you do not wish to use tailwind you should include classes for components through the configuration object\nComponents such as columns rely on using grid-cols from tailwind in order to correctly render multiple columns.\n\n### Configuring code syntax highlighting\n\nWe strongly recommend you to configure the syntax highlighting if you wish to use it.\nIf this parser is used with [@rxpm/editor-js-code](https://github.com/rajatxs/editor-js-code)\nor other code tools providing languages you could add the following configurations\n\n```tsx\ncode: {\n  languages: [\n    {\n      language: \"rust\",\n      displayText: \"Rust\",\n      logoAlt: \"rust logo\",\n      logoSrc: \"/code-logos/rust.svg\",\n      shortName: \"rs\",\n    },\n    {\n      language: \"python\",\n      displayText: \"Python\",\n      logoAlt: \"Python logo\",\n      logoSrc: \"/code-logos/python.svg\",\n      shortName: \"py\",\n    },\n    {\n      language: \"typescript\",\n      displayText: \"Typescript\",\n      logoAlt: \"Typescript logo\",\n      logoSrc: \"/code-logos/typescript.svg\",\n      shortName: \"ts\",\n    },\n    {\n      language: \"java\",\n      displayText: \"Java\",\n      logoAlt: \"Java logo\",\n      logoSrc: \"/code-logos/java.svg\",\n      shortName: \"java\",\n    },\n    {\n      language: \"typescript\",\n      displayText: \"Typescript [tsx]\",\n      logoAlt: \"tsx logo\",\n      logoSrc: \"/code-logos/react.svg\",\n      shortName: \"tsx\",\n    },\n  ];\n}\n```\n\nThe logo src in this particular configuration will use the \"./public\" folder and produce something looking like this\n![code example](https://github.com/cevinw/editorjs-react-parser/assets/170200358/19ff9f0c-7a28-4e9b-8a6f-5d00779dd6cd)\n\n\u003e [!TIP]\n\u003e You can use [devicon](https://devicon.dev/) resource to find good quality svg code logos.\n\nExample of the tools object configuration\n\n```ts\n code: {\n    class: CodeTool,\n        config: {\n        modes: {\n            'ts': 'TypeScript',\n            'py': 'Python',\n            'rs': 'Rust',\n            'tsx': 'TypeScriptXML',\n            'java' : \"Java\"\n        },\n        defaultMode: 'ts'\n    }\n},\n```\n\n##### Custom code style\n\nYou can add custom styles using react syntax highlighter styles. this can be done by adding the following configuration\n\n```tsx\nimport { idea } from \"react-syntax-highlighter/dist/cjs/styles/hljs\";\nconst Example = () =\u003e {\n  const config: BlockParserConfig = {\n    code: { codeStyle: idea },\n  };\n  return (\n    \u003cdiv\u003e\n      \u003cBlockParser data={editorJsData} config={config} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Inline tools\n\nSince this parser uses html-react-parser in certain elements a lot of inline tools might work as intended.\n\n## Contributing\n\nWe welcome all contributors.\nTo contribute clone the repo, create a new branch. Add your code and tests and submit a pull request.\n\nA big thank you to all who might want to contribute 💖\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcevinw%2Feditorjs-react-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcevinw%2Feditorjs-react-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcevinw%2Feditorjs-react-parser/lists"}