For developers & product teams

Add a fully managed AI editor to your app

In 10 minutes.

A 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

Part one — overview

First, see what you're actually getting.

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 YouTube
Part two — integration

Four steps from npm install to live.

Follow along in your own project. Each step takes between thirty seconds and three minutes.

01

Grab your API key

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.

02

Install the package

Add Eddyter to your project using your preferred package manager.

Terminal
# With npm
npm install eddyter

# Or with yarn / pnpm
yarn add eddyter
pnpm add eddyter
03

Drop the editor into your component

Wrap your editor in EditorProvider and render ConfigurableEditorWithAuth. For Next.js, mark the file as a client component.

React / Next.js — Editor.jsx
"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>
  )
}
04

Configure your environment

Add your API key to your environment file so it's available at runtime — and never in your repo.

.env.local
NEXT_PUBLIC_EDDYTER_API_KEY=your_api_key_here

That'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.

Part three — live walkthrough

Prefer to watch someone do it?

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 YouTube

Stuck somewhere? We're here.

If 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.