npm install lextrix @lextrix/react react react-dom

import 'lextrix/snow.css';

'use client'; // Next.js App Router only
 
import { useState } from 'react';
import { LextrixEditor } from '@lextrix/react';
import 'lextrix/snow.css';
 
export function BlogEditor() {
  const [body, setBody] = useState('# Draft\n');
 
  return (
    <LextrixEditor
      theme="snow"
      format="markdown"
      value={body}
      onChange={setBody}
      options={{
        placeholder: 'Write your post…',
        modules: {
          toolbar: [['bold', 'italic'], ['link', 'image'], ['clean']],
          imageResize: true,
        },
      }}
      style={{ minHeight: 320 }}
    />
  );
}

import { useRef } from 'react';
import type { LextrixEditorHandle } from '@lextrix/react';
 
const ref = useRef<LextrixEditorHandle>(null);
 
<LextrixEditor ref={ref} onReady={(e) => e.focus()} />;
 
ref.current?.exportContent('markdown');
ref.current?.getEditor()?.getModule('history')?.undo();

<LextrixEditor key={locale} options={{ placeholder: t('placeholder') }} />

import dynamic from 'next/dynamic';
 
const LextrixEditor = dynamic(
  () => import('@lextrix/react').then((m) => m.LextrixEditor),
  { ssr: false },
);

npm run build
npm run example:react