# Renderer Component The `AuthorlyRenderer` component displays HTML content created by the editor with beautiful, consistent styling. It's a **read-only** component designed for displaying published content. > **Note:** `ContentBlocksRenderer` is a deprecated alias that still works for backwards compatibility. ## Overview The Renderer is not just a wrapper around `dangerouslySetInnerHTML`. It provides: - **Automatic enhancements** — Code copy buttons, heading IDs, checklist styling - **Consistent styling** — Matches the editor's appearance - **Security** — Processes HTML safely - **Dark mode support** — Automatic theme switching - **Zero configuration** — Works out of the box ## Import ```tsx import { AuthorlyRenderer } from 'authorly-editor'; import 'authorly-editor/styles'; ``` ## Basic Usage ```tsx import { AuthorlyRenderer } from 'authorly-editor'; import 'authorly-editor/styles'; export default function BlogPost({ content }: { content: string }) { return (

); } ``` ## Props API | Prop | Type | Default | Description | |------|------|---------|-------------| | `html` | `string` | **Required** | HTML content to render | | `darkMode` | `boolean` | `false` | Enable dark theme styling | | `className` | `string` | `''` | Custom CSS class for container | | `style` | `React.CSSProperties` | `{}` | Inline styles for container | | `enableCodeCopy` | `boolean` | `true` | Add copy button to code blocks | | `enableChecklistStyles` | `boolean` | `true` | Style checklist items with strikethrough | | `enableHeadingIds` | `boolean` | `true` | Add IDs to headings for anchor links | | `classPrefix` | `string` | `'cbr'` | CSS class prefix for rendered elements | ## What the Renderer Does ### 1. Code Block Enhancement Automatically adds a copy button to all code blocks: ```tsx console.log('Hello');`} enableCodeCopy={true} /> ``` **Output:** - Wrapped code block with toolbar - "Copy" button that changes to "Copied!" on click - Language label (if specified) - Syntax highlighting preserved ### 2. Heading ID Generation Adds IDs to headings for deep linking: ```tsx Getting Started`} enableHeadingIds={true} /> ``` **Output:** ```html

Getting Started

``` This enables: - Table of Contents links - Deep linking to sections - Smooth scroll navigation ### 3. Checklist Styling Applies strikethrough to checked items: ```tsx

Completed task

`} enableChecklistStyles={true} /> ``` ## Common Use Cases ### Blog Post Display ```tsx export default async function BlogPost({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); return (

{post.title}

{post.date}

); } ``` ### Documentation Page with TOC ```tsx import { AuthorlyRenderer, AuthorlyTOC } from 'authorly-editor'; export default function DocsPage({ content }: { content: string }) { return (

{/* Sticky Table of Contents */} {/* Main content */}

); } ``` ### Dark Mode Support ```tsx 'use client'; import { useState, useEffect } from 'react'; import { AuthorlyRenderer } from 'authorly-editor'; export default function Article({ content }: { content: string }) { const [darkMode, setDarkMode] = useState(false); useEffect(() => { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; setDarkMode(prefersDark); }, []); return (

); } ``` ### Custom Styling ```tsx export default function StyledContent({ content }: { content: string }) { return ( ); } ``` ## Styling The Renderer uses the `cbr-` class prefix (customizable via `classPrefix` prop): ```css /* Override renderer styles */ .cbr-content { /* Container styles */ } .cbr-content p { margin-bottom: 1.5rem; line-height: 1.75; } .cbr-content h2 { margin-top: 3rem; margin-bottom: 1.5rem; font-size: 2rem; font-weight: 700; } .cbr-code-wrapper { /* Code block wrapper */ border-radius: 0.5rem; overflow: hidden; } .cbr-code-copy { /* Copy button */ background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); } ``` ### Dark Mode Styling Dark mode adds the `cbr-dark` class to the container: ```css .cbr-dark .cbr-content { background: #1a1a1a; color: #e5e5e5; } .cbr-dark .cbr-code-wrapper { background: #0d1117; } ``` ## Why Use the Renderer? ### ❌ Don't Do This ```tsx // Unsafe and unstyled function BlogPost({ content }: { content: string }) { return

; } ``` **Problems:** - No safety processing - No code copy buttons - No heading IDs for navigation - Inconsistent styling - No dark mode support ### ✅ Do This Instead ```tsx // Safe, enhanced, and styled function BlogPost({ content }: { content: string }) { return ; } ``` **Benefits:** - Processes HTML safely - Adds interactive features (copy buttons) - Generates heading IDs automatically - Applies consistent, professional styling - Supports dark mode out of the box ## SSR / Server Components The Renderer works in both client and server components: ```tsx // app/blog/[slug]/page.tsx import { AuthorlyRenderer } from 'authorly-editor'; export default async function BlogPost({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); return ( ); } ``` No `'use client'` directive needed for the Renderer! ## Accessibility The Renderer ensures: - Proper heading hierarchy (don't skip levels) - Alt text on images - Accessible tables with proper headers - Keyboard-navigable interactive elements - Screen reader friendly markup ## Performance The Renderer is optimized for performance: - Uses `useMemo` to cache processed HTML - Only re-processes when `html` or options change - Lightweight DOM processing - No external dependencies ## TypeScript ```tsx import type { AuthorlyRendererProps } from 'authorly-editor'; const MyRenderer: React.FC = (props) => { return ; }; ``` ## Combining with Tailwind's Typography Plugin ```tsx ``` ## Processing Custom HTML The Renderer can display HTML from any source, not just the Authorly editor: ```tsx Welcome

This HTML came from anywhere!

console.log('Works great!');

`} /> ``` ## Related - [Editor Component](/docs/components/editor) - Create and edit content - [Table of Contents](/docs/components/table-of-contents) - Auto-generate navigation - [Renderer Props API](/docs/api/renderer-props) - Complete props reference

Was this helpful?