# AuthorlyRenderer Props Complete API reference for all props accepted by the `AuthorlyRenderer` component. The renderer displays HTML content generated by the editor. ## Import ```tsx import { AuthorlyRenderer } from 'authorly-editor'; import type { AuthorlyRendererProps } from 'authorly-editor'; ``` ## Props Overview | Prop | Type | Default | Description | |------|------|---------|-------------| | `html` | `string` | (required) | HTML content to render | | `darkMode` | `boolean` | `false` | Enable dark mode styling | | `className` | `string` | `''` | Additional CSS class for container | | `style` | `React.CSSProperties` | `{}` | Inline styles for container | | `enableCodeCopy` | `boolean` | `true` | Add copy button to code blocks | | `enableChecklistStyles` | `boolean` | `true` | Style completed checklist items | | `enableHeadingIds` | `boolean` | `true` | Add IDs to headings for navigation | | `classPrefix` | `string` | `'cb'` | CSS class prefix | ## Required Props ### html The HTML content to render. This should be the output from `AuthorlyEditor`. **Type:** `string` (required) **Examples:** ```tsx // Static content // From state const [content, setContent] = useState('

Saved content

'); // From API const { data } = await fetch('/api/article/123'); // From editor const html = editorRef.current?.getHTML(); ``` ## Display Props ### darkMode Enable dark mode styling for the rendered content. **Type:** `boolean` **Default:** `false` **Examples:** ```tsx // Dark mode // Toggle dark mode const [isDark, setIsDark] = useState(false);

// System preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; ``` ### className Additional CSS class names for the renderer container. **Type:** `string` **Default:** `''` **Examples:** ```tsx // Tailwind classes // Custom class // Multiple classes ``` ### style Inline CSS styles for the renderer container. **Type:** `React.CSSProperties` **Default:** `{}` **Examples:** ```tsx // Max width // Custom colors // Responsive ``` ### classPrefix Prefix for all CSS classes. Useful for avoiding class name conflicts. **Type:** `string` **Default:** `'cb'` **Examples:** ```tsx // Custom prefix // Generates: .article-content, .article-block, etc. // No prefix // Generates: .content, .block, etc. ``` ## Feature Props ### enableCodeCopy Add a copy button to all code blocks. **Type:** `boolean` **Default:** `true` **What it does:** - Adds a "Copy" button to top-right of code blocks - Clicking copies code to clipboard - Shows "Copied!" confirmation - Styled button with hover effects **Examples:** ```tsx // With copy button (default) // Without copy button ``` **HTML Output:** ```html

console.log('Hello');

console.log('Hello');

``` ### enableChecklistStyles Apply strikethrough styling to completed checklist items. **Type:** `boolean` **Default:** `true` **What it does:** - Adds strikethrough to checked items - Dims text color for completed items - Updates checkboxes to show checked state - Improves visual hierarchy **Examples:** ```tsx // With checklist styles (default) // Without checklist styles ``` **HTML Processing:** ```html

Completed task
Pending task

Completed task
Pending task

``` ### enableHeadingIds Automatically add IDs to heading elements for navigation and linking. **Type:** `boolean` **Default:** `true` **What it does:** - Adds unique IDs to all `

` - `

` elements - Enables anchor links to headings - Works with `AuthorlyTOC` component - Creates SEO-friendly URLs Examples: ```tsx // With heading IDs (default) // Without heading IDs ``` HTML Processing: ```html
Introduction

Getting Started

Features

Introduction

Getting Started

Features
``` Use with AuthorlyTOC: ```tsx const html = '
Title
Section
';

``` ## Complete Examples ### Basic Usage ```tsx import { AuthorlyRenderer } from 'authorly-editor'; function ArticlePage({ article }) { return (

{article.title}

); } ``` ### Blog Post with TOC ```tsx import { AuthorlyRenderer, AuthorlyTOC } from 'authorly-editor'; function BlogPost({ post }) { return (

{post.title}

); } ``` ### Dark Mode ```tsx import { useState } from 'react'; import { AuthorlyRenderer } from 'authorly-editor'; function Article({ content }) { const [isDark, setIsDark] = useState(false); return (

); } ``` ### Styled Container ```tsx ``` ### SSR / Server Components ```tsx // Next.js App Router (Server Component) import { AuthorlyRenderer } from 'authorly-editor'; async function ArticlePage({ params }) { const article = await fetchArticle(params.id); return ( ); } ``` ### Documentation Site ```tsx import { AuthorlyRenderer, AuthorlyTOC } from 'authorly-editor'; function DocsPage({ doc }) { return (
{/* Sidebar TOC /}

{/ Main content */}

); } ``` ### Custom Styling ```tsx // CSS .custom-renderer { max-width: var(--article-max-width); padding: var(--article-padding); } .article-code-block { background: #1e293b; border-radius: 8px; } ``` ## Common Patterns ### Loading State ```tsx function Article({ articleId }) { const [content, setContent] = useState(''); const [loading, setLoading] = useState(true); useEffect(() => { fetch(`/api/articles/${articleId}`) .then(r => r.json()) .then(data => { setContent(data.content); setLoading(false); }); }, [articleId]); if (loading) return
Loading...
; return ; } ``` ### Error Boundary ```tsx import { ErrorBoundary } from 'react-error-boundary'; function SafeRenderer({ html }) { return ( Failed to render content}> ); } ``` ### Print Styles ```tsx // CSS @media print { .printable-content { max-width: 100%; padding: 0; } .cb-code-copy-btn { display: none; } } ``` ## TypeScript ```tsx import type { AuthorlyRendererProps } from 'authorly-editor'; const rendererProps: AuthorlyRendererProps = { html: '
Content
', darkMode: false, enableCodeCopy: true, enableChecklistStyles: true, enableHeadingIds: true, }; ``` ## SSR Compatibility The renderer is fully compatible with: - Next.js Server Components - Next.js Pages Router (SSR) - Remix - Gatsby - Static Site Generators ```tsx // Next.js App Router export default async function Page() { const content = await getContent(); return ; } // Next.js Pages Router export async function getServerSideProps() { const content = await getContent(); return { props: { content } }; } export default function Page({ content }) { return ; } ``` ## Performance - Lightweight component (minimal JavaScript) - No state management overhead - Uses native browser HTML rendering - Code highlighting processed on server - Optimized for large documents ## Browser Support - All modern browsers (Chrome, Firefox, Safari, Edge) - IE11 not supported (uses modern DOM APIs) - Progressive enhancement for older browsers ## See Also - [AuthorlyEditor](/docs/components/editor) - Editor component - [AuthorlyTOC](/docs/components/table-of-contents) - Navigation from headings - [Styling Guide](/docs/guides/styling) - Custom styling - [Quick Start](/docs/quick-start) - Getting started

Was this helpful?