Authorly — Rich Text Editor for Blogs & Publishing

A rich text editor for authors, blogs, and documentation

Clean, publish-ready HTML output. Zero bloat.

Installation •
Quick Start •
Components •
API •
Examples

---

Why Authorly?

| Feature | Authorly | Other Editors |
|---------|----------|---------------|
| Output | Pure semantic HTML | JSON AST / Custom format |
| Dependencies | React + Lucide icons | Heavy frameworks |
| Bundle size | ~30kb gzipped | 100kb+ |
| Learning curve | Minutes | Hours/Days |
| Database storage | Just HTML string | Complex serialization |

``html



My Article

A paragraph with bold and italic text.

• Simple


• Clean


• Works everywhere

`

---

Installation

`bash
npm install authorly-editor
`

`bash
yarn add authorly-editor
`

`bash
pnpm add authorly-editor
`

---

Quick Start

`tsx
import { ContentBlocksEditor } from 'authorly-editor';

function App() {
const [content, setContent] = useState('

Hello World!

');

return (
initialContent={content}
onChange={setContent}
/>
);
}
`

That's it. No configuration needed.

---

Components

$3

The main editor component for creating and editing content.

`tsx
import { ContentBlocksEditor } from 'authorly-editor';

initialContent="

Start writing...

"
onChange={(html) => console.log(html)}
onSave={(html) => saveToDatabase(html)}
darkMode={false}
showToolbar={true}
placeholder="Type '/' for commands..."
/>
`

$3

Display saved HTML content with beautiful styling. No editor overhead.

`tsx
import { ContentBlocksRenderer } from 'authorly-editor';

html={savedContent}
darkMode={false}
enableCodeCopy={true}
/>
`

$3

Auto-generate navigation from your content headings.

`tsx
import { TableOfContents, ContentBlocksRenderer } from 'authorly-editor';


`

---

Block Types

| Block | Description | HTML Output |
|-------|-------------|-------------|
| Paragraph | Basic text |

|
| Heading 1-6 | Section headings |

-

|
| Bullet List | Unordered list |

• |
| Numbered List | Ordered list |
  1. |
| Checklist | Todo items |
     • |
| Quote | Blockquote |

       |
| Code | Code block |

        |
       | Image | Image with caption |