Getting Started

Welcome to the Theodore.js documentation. This guide will help you set up Theodore in under five minutes.

Usage of theodore-js

Theodore-js is a lightweight contentEditable editor for React that handles expected text-input behavior, such as undo. It adds two main features:

• Custom emoji rendering: Provide a render function to control how emojis appear in the editor. This can be used to render the same emoji set across browsers or to support custom emoji.
• Ghost text: Display inline suggestions, such as AI-generated completions, that users can accept or reject.

Installation

Install Theodore-js with one of the following commands:

npm install theodore-js

yarn add theodore-js

pnpm add theodore-js

Initial setup

Here’s a minimal setup to use Theodore in a React app:

import React from 'react';
import { Theodore, useEditorState } from 'theodore-js';
import 'theodore-js/style.css';
 
export const TheodoreTextInput: React.FC = () => {
  const editorState = useEditorState();
 
  return <Theodore editorState={editorState} />;
};

First, import the default styles from 'theodore-js/style.css' so the editor, placeholder, and emoji rendering styles are applied.

To render the editor, pass the required editorState prop (EditorState). It represents the current editor state, including its content, selection, and undo history. You don’t need to manage its internals—just create one by calling useEditorState() without any arguments and pass it in. The hook returns the values and methods used by both your application and the Theodore component itself. For more details, see Editor State.