{"id":48155825,"url":"https://github.com/k11k-labs/better-blocks-react-renderer","last_synced_at":"2026-04-04T17:17:24.705Z","repository":{"id":343907230,"uuid":"1179220957","full_name":"k11k-labs/better-blocks-react-renderer","owner":"k11k-labs","description":"React renderer for Strapi v5 Blocks content with color and backgroundColor support from Better Blocks plugin","archived":false,"fork":false,"pushed_at":"2026-03-28T16:54:05.000Z","size":560,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-28T18:32:54.841Z","etag":null,"topics":["better-blocks","blocks-editor","color","headless-cms","highlight","open-source","react","renderer","rich-text","strapi","strapi-v5","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@k11k/better-blocks-react-renderer","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/k11k-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-11T20:12:46.000Z","updated_at":"2026-03-28T16:53:43.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/k11k-labs/better-blocks-react-renderer","commit_stats":null,"previous_names":["k11k-labs/better-blocks-react-renderer"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/k11k-labs/better-blocks-react-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fbetter-blocks-react-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fbetter-blocks-react-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fbetter-blocks-react-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fbetter-blocks-react-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k11k-labs","download_url":"https://codeload.github.com/k11k-labs/better-blocks-react-renderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k11k-labs%2Fbetter-blocks-react-renderer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["better-blocks","blocks-editor","color","headless-cms","highlight","open-source","react","renderer","rich-text","strapi","strapi-v5","typescript"],"created_at":"2026-04-04T17:17:24.577Z","updated_at":"2026-04-04T17:17:24.673Z","avatar_url":"https://github.com/k11k-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eBetter Blocks React Renderer\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eReact renderer for Strapi v5 Blocks content — supports all standard blocks plus Better Blocks features: color, highlight, text alignment, nested lists, to-do lists, tables, media embeds, image captions, and more.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@k11k/better-blocks-react-renderer\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@k11k/better-blocks-react-renderer.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@k11k/better-blocks-react-renderer\"\u003e\n    \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/@k11k/better-blocks-react-renderer.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/k11k-labs/better-blocks-react-renderer/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/@k11k/better-blocks-react-renderer.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/playground-showcase.png\" alt=\"Strapi editor (left) and rendered output (right)\" width=\"800\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Table of Contents\n\n1. [Why?](#why)\n2. [Compatibility](#compatibility)\n3. [Installation](#installation)\n4. [Usage](#usage)\n5. [Supported Blocks](#supported-blocks)\n6. [Supported Modifiers](#supported-modifiers)\n7. [Custom Renderers](#custom-renderers)\n8. [TypeScript](#typescript)\n9. [Contributing](#contributing)\n10. [License](#license)\n\n---\n\n## Why?\n\nThe official [`@strapi/blocks-react-renderer`](https://github.com/strapi/blocks-react-renderer) doesn't support the features that the [Better Blocks](https://github.com/k11k-labs/strapi-plugin-better-blocks) plugin adds to the Strapi editor \u0026mdash; color marks, text alignment, to-do lists, tables, media embeds, and more.\n\nThis package is a **drop-in replacement** that renders all Better Blocks features out of the box \u0026mdash; no configuration needed.\n\n## Compatibility\n\n| Strapi Version | Renderer Version | React Version |\n| -------------- | ---------------- | ------------- |\n| v5.x           | v0.x             | \u0026ge; 17       |\n\n## Installation\n\n```bash\n# Using yarn\nyarn add @k11k/better-blocks-react-renderer\n\n# Using npm\nnpm install @k11k/better-blocks-react-renderer\n```\n\n**Peer dependencies:** `react \u003e= 17`\n\n## Usage\n\n```tsx\nimport { BlocksRenderer } from '@k11k/better-blocks-react-renderer';\n\n// Basic — renders all blocks including color/highlight\n\u003cBlocksRenderer content={blocks} /\u003e;\n```\n\nThat's it. All Better Blocks features \u0026mdash; colors, tables, to-do lists, media embeds, alignment, and more \u0026mdash; work automatically.\n\n## Supported Blocks\n\n| Block                           | Default element     | Source                      |\n| ------------------------------- | ------------------- | --------------------------- |\n| `paragraph`                     | `\u003cp\u003e`               | Strapi core                 |\n| `heading` (1\u0026ndash;6)           | `\u003ch1\u003e`\u0026ndash;`\u003ch6\u003e` | Strapi core                 |\n| `list` (ordered/unordered/todo) | `\u003col\u003e` / `\u003cul\u003e`     | Strapi core + Better Blocks |\n| `list-item`                     | `\u003cli\u003e`              | Strapi core                 |\n| `link`                          | `\u003ca\u003e`               | Strapi core                 |\n| `quote`                         | `\u003cblockquote\u003e`      | Strapi core                 |\n| `code`                          | `\u003cpre\u003e\u003ccode\u003e`       | Strapi core                 |\n| `image`                         | `\u003cfigure\u003e\u003cimg\u003e`     | Strapi core                 |\n| `horizontal-line`               | `\u003chr\u003e`              | Better Blocks               |\n| `table`                         | `\u003ctable\u003e`           | Better Blocks               |\n| `media-embed`                   | `\u003ciframe\u003e` (16:9)   | Better Blocks               |\n\n### Block properties\n\n| Property      | Applies to                | Description                                           |\n| ------------- | ------------------------- | ----------------------------------------------------- |\n| `textAlign`   | paragraph, heading, quote | Text alignment (`left`, `center`, `right`, `justify`) |\n| `lineHeight`  | paragraph, heading, quote | CSS line-height value (e.g. `1.5`, `2.0`)             |\n| `indent`      | paragraph, heading, quote | Block indentation level (`marginLeft: N * 2rem`)      |\n| `indentLevel` | list                      | Cycling list-style-type per nesting depth             |\n| `format`      | list                      | `ordered`, `unordered`, or `todo`                     |\n| `checked`     | list-item (in todo lists) | Checkbox state (`true`/`false`)                       |\n| `target`      | link                      | `_blank` for new-tab links                            |\n| `rel`         | link                      | `noopener noreferrer` for new-tab links               |\n| `caption`     | image                     | Text displayed below the image                        |\n| `imageAlign`  | image                     | Image alignment (`left`, `center`, `right`)           |\n| `url`         | media-embed               | Embed URL (YouTube/Vimeo iframe src)                  |\n| `originalUrl` | media-embed               | Original user-provided URL                            |\n\n## Supported Modifiers\n\n| Modifier          | Default element                    | Source        |\n| ----------------- | ---------------------------------- | ------------- |\n| `bold`            | `\u003cstrong\u003e`                         | Strapi core   |\n| `italic`          | `\u003cem\u003e`                             | Strapi core   |\n| `underline`       | `\u003cspan\u003e`                           | Strapi core   |\n| `strikethrough`   | `\u003cdel\u003e`                            | Strapi core   |\n| `code`            | `\u003ccode\u003e`                           | Strapi core   |\n| `uppercase`       | `\u003cspan style={{textTransform}}\u003e`   | Better Blocks |\n| `superscript`     | `\u003csup\u003e`                            | Better Blocks |\n| `subscript`       | `\u003csub\u003e`                            | Better Blocks |\n| `color`           | `\u003cspan style={{color}}\u003e`           | Better Blocks |\n| `backgroundColor` | `\u003cspan style={{backgroundColor}}\u003e` | Better Blocks |\n| `fontFamily`      | `\u003cspan style={{fontFamily}}\u003e`      | Better Blocks |\n| `fontSize`        | `\u003cspan style={{fontSize}}\u003e`        | Better Blocks |\n\n## Custom Renderers\n\n### Custom block renderers\n\nOverride any block type with your own component:\n\n```tsx\n\u003cBlocksRenderer\n  content={blocks}\n  blocks={{\n    paragraph: ({ children, style }) =\u003e (\n      \u003cp className=\"my-paragraph\" style={style}\u003e\n        {children}\n      \u003c/p\u003e\n    ),\n    heading: ({ children, level, style }) =\u003e {\n      const Tag = `h${level}`;\n      return \u003cTag style={style}\u003e{children}\u003c/Tag\u003e;\n    },\n    link: ({ children, url, target, rel }) =\u003e (\n      \u003ca href={url} target={target} rel={rel}\u003e\n        {children}\n      \u003c/a\u003e\n    ),\n    image: ({ image, caption, imageAlign }) =\u003e (\n      \u003cfigure style={{ textAlign: imageAlign }}\u003e\n        \u003cimg src={image.url} alt={image.alternativeText || ''} loading=\"lazy\" /\u003e\n        {caption \u0026\u0026 \u003cfigcaption\u003e{caption}\u003c/figcaption\u003e}\n      \u003c/figure\u003e\n    ),\n    'list-item': ({ children, checked }) =\u003e\n      checked !== undefined ? (\n        \u003cli style={{ listStyle: 'none' }}\u003e\n          \u003cinput type=\"checkbox\" checked={checked} readOnly /\u003e {children}\n        \u003c/li\u003e\n      ) : (\n        \u003cli\u003e{children}\u003c/li\u003e\n      ),\n    'horizontal-line': () =\u003e \u003chr className=\"my-divider\" /\u003e,\n    table: ({ children }) =\u003e \u003ctable className=\"my-table\"\u003e{children}\u003c/table\u003e,\n    'table-header-cell': ({ children }) =\u003e \u003cth className=\"my-th\"\u003e{children}\u003c/th\u003e,\n    'table-cell': ({ children }) =\u003e \u003ctd className=\"my-td\"\u003e{children}\u003c/td\u003e,\n    'media-embed': ({ url }) =\u003e (\n      \u003cdiv className=\"video-wrapper\"\u003e\n        \u003ciframe src={url} allowFullScreen title=\"Embedded media\" /\u003e\n      \u003c/div\u003e\n    ),\n  }}\n/\u003e\n```\n\n### Custom modifier renderers\n\nOverride any text modifier with your own component:\n\n```tsx\n\u003cBlocksRenderer\n  content={blocks}\n  modifiers={{\n    bold: ({ children }) =\u003e \u003cstrong className=\"font-bold\"\u003e{children}\u003c/strong\u003e,\n    color: ({ children, color }) =\u003e \u003cspan style={{ color }}\u003e{children}\u003c/span\u003e,\n    backgroundColor: ({ children, backgroundColor }) =\u003e (\n      \u003cmark style={{ backgroundColor }}\u003e{children}\u003c/mark\u003e\n    ),\n  }}\n/\u003e\n```\n\n## TypeScript\n\nAll types are exported:\n\n```ts\nimport type {\n  BlocksContent,\n  BlocksRendererProps,\n  BlockNode,\n  TextNode,\n  LinkNode,\n  ListNode,\n  ListItemNode,\n  ParagraphNode,\n  HeadingNode,\n  QuoteNode,\n  CodeNode,\n  ImageNode,\n  HorizontalLineNode,\n  TableNode,\n  TableRowNode,\n  TableCellNode,\n  TableHeaderCellNode,\n  MediaEmbedNode,\n  TextAlign,\n  CustomBlocksConfig,\n  CustomModifiersConfig,\n} from '@k11k/better-blocks-react-renderer';\n```\n\n## Contributing\n\nContributions are welcome! The easiest way to get started is with Docker:\n\n```bash\n# Clone the repository\ngit clone https://github.com/k11k-labs/better-blocks-react-renderer.git\ncd better-blocks-react-renderer\n\n# Start the playground with Docker\ncd playground\ndocker compose up\n```\n\nThis will start a Strapi v5 instance with the Better Blocks plugin and a React app that renders the content \u0026mdash; all pre-configured with a showcase article.\n\n- **Strapi admin:** http://localhost:1337/admin (login: `admin@example.com` / `admin12#`)\n- **React app:** http://localhost:5173\n\n### Development workflow\n\n1. Make changes to the renderer source in `src/`\n2. Rebuild: `yarn build` (from repo root)\n3. The React app picks up the new build automatically\n\n### Without Docker\n\n```bash\n# Build the renderer\nyarn install \u0026\u0026 yarn build\n\n# Start Strapi\ncd playground/strapi \u0026\u0026 cp .env.example .env \u0026\u0026 npm install \u0026\u0026 npm run dev\n\n# Start the React app (in another terminal)\ncd playground/react-app \u0026\u0026 npm install \u0026\u0026 npm run dev\n```\n\n### Running tests\n\n```bash\nyarn test        # Run tests\nyarn test:ts     # Type check\nyarn lint        # Check formatting\n```\n\n## Community \u0026 Support\n\n- [GitHub Issues](https://github.com/k11k-labs/better-blocks-react-renderer/issues) \u0026mdash; Bug reports and feature requests\n\n## Related\n\n- [@k11k/strapi-plugin-better-blocks](https://github.com/k11k-labs/strapi-plugin-better-blocks) \u0026mdash; Strapi plugin that extends the Blocks editor with colors, tables, to-do lists, media embeds, and more\n- [@strapi/blocks-react-renderer](https://github.com/strapi/blocks-react-renderer) \u0026mdash; Official Strapi renderer (standard blocks only)\n\n## License\n\n[MIT License](LICENSE) \u0026copy; [k11k-labs](https://github.com/k11k-labs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk11k-labs%2Fbetter-blocks-react-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk11k-labs%2Fbetter-blocks-react-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk11k-labs%2Fbetter-blocks-react-renderer/lists"}