Lipstick

A lightweight, flexible rich text editor for React.

Features

• Written entirely in TypeScript
• No external dependencies beyond React
• Composable, function-based component architecture
• Extensible block-based editor model
• Customizable rendering through container components

Installation

npm install @tauren/lipstick
# or
yarn add @tauren/lipstick
# or
pnpm add @tauren/lipstick

Quick Start

import { BlockContainer, EditorRoot  } from "@tauren/lipstick";

const defaultBlocks = [
  { id: "1", nodes: [{ id: "n1", content: "Hello world" }] },
  { id: "2", nodes: [{ id: "n2", content: "This is another block" }] }
];

export default function App() {
  return (
    <EditorRoot
      defaultBlocks={defaultBlocks}
      blockContainer={<BlockContainer className="my-block" />}
    />
  );
}