Getting Started

Prerequisites

React 18+
Tiptap peer dependencies available in your app
Client-rendered surface for the editor view (especially in Next.js)

Install

npm install hybricmark @tiptap/react @tiptap/starter-kit

Minimal integration

import { HybricEditor } from 'hybricmark'
 
export default function EditorPage() {
  return (
    <HybricEditor
      content="# Hello\n\nStart typing..."
      onChange={(editor) => {
        console.log(editor.getJSON())
      }}
    />
  )
}

Production baseline

<HybricEditor
  content={initialDoc}
  placeholder="Type '/' for commands..."
  debounceMs={800}
  onDebouncedUpdate={({ editor }) => {
    void saveToAPI(editor.getJSON())
  }}
/>

Styling

Import editor styles once in your app entry:

import 'hybricmark/style.css'
import 'katex/dist/katex.min.css'

Then attach your own wrapper class if needed:

<HybricEditor className="my-editor-shell" content={content} />

Next.js (client-only)

'use client'
 
import dynamic from 'next/dynamic'
 
const HybricEditor = dynamic(
  () => import('hybricmark').then((mod) => mod.HybricEditor),
  { ssr: false },
)

Next steps

Read the API Reference
Read Core Concepts
Implement persistence with Saving to Database

Overview API Reference