Full developer docs
Props, theming, toolbar configuration, AI features, authentication patterns, and more.
OpenA practical, end-to-end guide to integrating Eddyter — the plug-and-play, AI-native rich text editor — into any React or Next.js project. No infrastructure to manage. No AI plumbing to build.
10 min
Avg. integration
1 line
To install
0 ops
Infra to manage
A two-minute look at why Eddyter exists, who it's for, and how it differs from legacy editors like TinyMCE, CKEditor, or Quill.
What is Eddyter? Why developers are switching in 2026
▶ Watch on YouTubeFollow along in your own project. Each step takes between thirty seconds and three minutes.
Sign in to your Eddyter account and head to your dashboard to copy your license key. You'll find it on the License Key page once you're subscribed to any plan (Free included).
Heads up: Treat your API key like a password. Store it in an environment variable — never commit it to source control.
Add Eddyter to your project using your preferred package manager.
# With npm
npm install eddyter
# Or with yarn / pnpm
yarn add eddyter
pnpm add eddyterWrap your editor in EditorProvider and render ConfigurableEditorWithAuth. For Next.js, mark the file as a client component.
"use client"
import { ConfigurableEditorWithAuth, EditorProvider } from "eddyter"
import "eddyter/style.css"
export default function MyEditor() {
const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY
const handleContentChange = (html) => {
console.log("Editor content:", html)
}
return (
<EditorProvider>
<ConfigurableEditorWithAuth
apiKey={apiKey}
onChange={handleContentChange}
/>
</EditorProvider>
)
}Add your API key to your environment file so it's available at runtime — and never in your repo.
NEXT_PUBLIC_EDDYTER_API_KEY=your_api_key_hereThat's it. Run your dev server and you'll see Eddyter rendered with the full toolbar, AI chat, tables, embeds, and slash commands — out of the box.
A complete ten-minute walkthrough showing how to integrate Eddyter using AI tools like Cursor, Claude, and Lovable — from blank project to working editor.
Integrate Eddyter in 10 Minutes — with Cursor, Claude & Lovable
▶ Watch on YouTubeFrom advanced configuration to theming, AI features, and custom authentication — these are your next stops.
Props, theming, toolbar configuration, AI features, authentication patterns, and more.
OpenInstall instructions, version history, and dependency information for the eddyter package.
Open externalSign in to your Eddyter account and grab your license key to start integrating.
OpenFrom Free to Enterprise — pick the plan that fits your usage, AI needs, and storage limits.
OpenIf you hit a wall during integration, the docs cover most edge cases — but our team is one email away if you'd rather talk it through.