{"id":16056,"library":"html-to-draftjs","title":"HTML to DraftJS Converter","description":"The `html-to-draftjs` library provides a utility function for converting raw HTML strings into a DraftJS `ContentState` object, which is suitable for direct use within a DraftJS editor. Currently stable at version `1.5.0`, this package is primarily designed to facilitate initial content loading or pasting functionalities in applications utilizing DraftJS, especially those built with `react-draft-wysiwyg`. While there's no explicit release cadence, the presence of recent version updates and a warning about a specific faulty version (1.2.0) indicates ongoing maintenance. Its key differentiator is its focused purpose for DraftJS, offering specific handling for HTML structures and an optional `customChunkRenderer` for extending its capabilities to handle custom HTML nodes or provide specific block types beyond standard conversions, particularly useful for atomic blocks.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/jpuri/html-to-draftjs","tags":["javascript"],"install":[{"cmd":"npm install html-to-draftjs","lang":"bash","label":"npm"},{"cmd":"yarn add html-to-draftjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-to-draftjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for creating and manipulating DraftJS editor state and content.","package":"draft-js","optional":false},{"reason":"DraftJS relies heavily on Immutable.js data structures for its content state management.","package":"immutable","optional":false}],"imports":[{"note":"The primary conversion function is exported as a default export. For CommonJS, access it via `require('html-to-draftjs').default`.","wrong":"import { htmlToDraft } from 'html-to-draftjs';\nconst htmlToDraft = require('html-to-draftjs');","symbol":"htmlToDraft","correct":"import htmlToDraft from 'html-to-draftjs';"}],"quickstart":{"code":"import { EditorState, ContentState } from 'draft-js';\nimport htmlToDraft from 'html-to-draftjs';\n\n// Example HTML content that might include custom elements\nconst htmlContent = '<p>This is <strong>rich</strong> HTML content.</p><hr/><p>Another paragraph.</p>';\n\n// Optional: Define a custom chunk renderer for specific HTML nodes like <hr>\nconst blocksFromHtml = htmlToDraft(htmlContent, (nodeName, node) => {\n  if (nodeName === 'hr') {\n    return {\n      type: 'HORIZONTAL_RULE', // A custom block type defined in your DraftJS editor\n      mutability: 'IMMUTABLE',\n      data: {} // Optional data for the block\n    };\n  }\n  // Return nothing (or any falsy value) to let the default converter handle other nodes\n  return undefined;\n});\n\nif (blocksFromHtml) {\n  const { contentBlocks, entityMap } = blocksFromHtml;\n  const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);\n  const editorState = EditorState.createWithContent(contentState);\n\n  console.log('Successfully converted HTML to DraftJS ContentState.');\n  console.log('Number of content blocks:', contentState.getBlocksAsArray().length);\n  console.log('First block text:', contentState.getFirstBlock().getText());\n  // In a React component, you would typically use `editorState` to initialize or update your DraftJS editor.\n  // Example: `this.setState({ editorState });`\n} else {\n  console.error('Failed to convert HTML content. The input might be empty or invalid.');\n}","lang":"typescript","description":"Demonstrates how to convert an HTML string to DraftJS ContentState, including using the optional customChunkRenderer for specific HTML tags like `<hr/>`."},"warnings":[{"fix":"Upgrade to `html-to-draftjs@^1.3.0` or later using `npm install html-to-draftjs@latest`.","message":"Version `1.2.0` of `html-to-draftjs` is known to have build issues and should be avoided. Ensure you are using a different stable version.","severity":"breaking","affected_versions":"=1.2.0"},{"fix":"Verify that `type` values like 'HORIZONTAL_RULE' are recognized by your DraftJS configuration or component that renders the editor content.","message":"When using the `customChunkRenderer`, ensure that the `type` property returned matches a valid block type configured in your DraftJS editor. Incorrect types will result in rendering issues or errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pre-process HTML for cleanliness or use the `customChunkRenderer` for specific, non-standard HTML patterns you need to support accurately.","message":"Complex or malformed HTML may not always convert perfectly to DraftJS ContentState, especially regarding inline styles, custom block data, and nested structures. The converter has limitations.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.0':86 '1.5.0':39 'applic':54 'atom':129 'beyond':123 'block':121,130 'built':59 'cadenc':71 'capabl':112 'content':48 'contentst':23 'convers':125 'convert':4,16 'current':35 'custom':115 'customchunkrender':108 'design':44 'differenti':92 'direct':29 'draft':63 'draftj':3,9,22,33,56,98 'editor':34 'especi':57 'explicit':69 'extend':110 'facilit':46 'faulti':84 'focus':95 'function':14,52 'handl':101,114 'html':1,7,18,103,116 'html-to-draftj':6 'indic':87 'initi':47 'javascript':131 'key':91 'librari':10 'load':49 'mainten':89 'node':117 'object':24 'offer':99 'ongo':88 'option':107 'packag':41 'particular':126 'past':51 'presenc':73 'primarili':43 'provid':11,119 'purpos':96 'raw':17 'react':62 'react-draft-wysiwyg':61 'recent':75 'releas':70 'specif':83,100,120 'stabl':36 'standard':124 'string':19 'structur':104 'suitabl':27 'type':122 'updat':77 'use':30,127 'util':13,55 'version':38,76,85 'warn':80 'within':31 'wysiwyg':64","created_at":"2026-04-21T19:18:01.733152+00:00","updated_at":"2026-04-21T19:18:01.733152+00:00","problems":[{"fix":"For ESM, use `import htmlToDraft from 'html-to-draftjs';`. For CJS, use `const htmlToDraft = require('html-to-draftjs').default;`.","cause":"Attempting to import `htmlToDraft` as a named export from a CommonJS context or incorrectly as a named import in an ESM context when it is a default export.","error":"TypeError: htmlToDraft is not a function"},{"fix":"Run `npm install html-to-draftjs` or `yarn add html-to-draftjs` in your project directory.","cause":"The package has not been installed or is not correctly linked in your project's `node_modules`.","error":"Error: Cannot find module 'html-to-draftjs'"},{"fix":"Ensure the `type` string returned by your `customChunkRenderer` matches a block type known to your DraftJS setup. Also, check that `mutability` and `data` (even if empty) are included in the returned object.","cause":"The `customChunkRenderer` returned a block type that is not recognized by your DraftJS editor, or the returned object is missing required properties.","error":"Draft.js block 0: Missing data for block with type CUSTOM_BLOCK_TYPE"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":"1.0.1","cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/jpuri/html-to-draftjs","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/html-to-draftjs","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}