Build richer React inputs with inline suggestions and custom-rendered emoji.

npm
npm install theodore-js
👻Supports Ghost Text
😊Consistent Emoji Rendering
⚡Lightweight


Start typing...

This hint is a custom React component. Press Tab to accept the ghost text or Escape to reject it.

Emoji style:

Why theodore-js?

Render emoji consistently, add inline suggestions, and keep full control over behavior and presentation.

Consistent emoji everywhere

Render emoji with your own images so they look identical across browsers and platforms.

Ghost text for suggestions

Show inline suggestions without adding them to the user’s content until accepted.

Flexible accept and reject

Use Tab, Escape, buttons, gestures, or custom product logic to control suggestions.

Fully customizable UI

Style emoji, ghost text, and suggestion hints to match your product.

Reliable editing

Preserve expected editor behavior, including undo and keyboard interactions.

Lightweight by design

Add both capabilities without adopting a heavy, opinionated editor framework.

Quick Start

Connect custom emoji rendering and ghost-text suggestions in one component.

Composer.tsx
import { useRef } from 'react';
import {
  Theodore,
  type TheodoreHandle,
  useEditorState,
  useSuggestion,
} from 'theodore-js';
import 'theodore-js/style.css';

import { renderEmoji, requestSuggestion } from './editor-config';

export function Composer() {
  const theodoreRef = useRef<TheodoreHandle>(null);
  const editorState = useEditorState();

  const { suggestion } = useSuggestion({
    editorState,
    theodoreRef,
    requestSuggestion,
  });

  return (
    <Theodore
      editorState={editorState}
      theodoreRef={theodoreRef}
      renderEmoji={renderEmoji}
      suggestion={suggestion}
      placeholder="Write something..."
    />
  );
}

Theodore journal

Behind the editor

Read the ideas, tradeoffs, and practical techniques that shaped Theodore—and bring them into your own React inputs.