Vizel API / react/src / Vizel

Function: Vizel()

function Vizel(__namedParameters): ReactNode;

Defined in: packages/react/src/components/Vizel.tsx:158

Vizel - All-in-one editor component

A complete editor component that includes VizelEditor and VizelBubbleMenu. This is the recommended way to use Vizel for most use cases.

To read or drive the underlying Tiptap editor, lift it into state from onCreate or render a descendant that calls useVizelContext. The component intentionally does not expose the editor through a ref.

Parameters

Parameter	Type
__namedParameters	VizelProps

Returns

ReactNode

Examples

import { Vizel } from '@vizel/react';

function App() {
  return <Vizel placeholder="Type '/' for commands..." />;
}

import { type Editor, Vizel } from '@vizel/react';
import { useState } from 'react';

function App() {
  const [editor, setEditor] = useState<Editor | null>(null);

  const handleSave = () => {
    console.log(editor?.getJSON());
  };

  return (
    <>
      <Vizel onCreate={({ editor: created }) => setEditor(created)} />
      <button onClick={handleSave}>Save</button>
    </>
  );
}