ContentEditor

A full-featured content editor powered by Tiptap. Supports markdown input/output, inline formatting via a bubble menu on text selection, slash commands for inserting blocks, code blocks with syntax highlighting, task lists, images, and links. Designed for CMS pages, blog posts, and any rich content editing use case.

Form Inputseditorrich-textmarkdowntiptapwysiwygcontentcms

Basic markdown editor

import { ContentEditor } from '@primstack/ui'

<ContentEditor
  content="# Hello World"
  format="markdown"
  onChange={(md) => console.log(md)}
  placeholder="Start writing..."
/>

With toolbar

import { ContentEditor } from '@primstack/ui'

<ContentEditor
  value={content}
  onChange={setContent}
  toolbar={['bold', 'italic', 'link', 'code']}
  placeholder="Start writing…"
/>

Related Components