Agunwami Text Editor

Writing tools your product deserves

A complete, Docs-style rich text editor for React. Menus and toolbar, images, drawings, tables and real pages with letterheads, in one component.

Try it live Watch the tour

One React component
With or without Tailwind
Your storage, your data

Latest version v0.4.0

See it in action

The Frictionless Launch: Ada and Tunde are stuck between a notes app, a web form and a diagram tool. Dayo adds the editor to their app in about two minutes, and the team writes the Q3 launch report inside it, on letterhead pages, with a diagram, a cropped screenshot and a table.

Try it yourself

This is the real editor. Change the options or edit the text, and the code beside it follows. Copy the code into your project to get exactly this editor.

Separate pagesLandscapeToolbarRead-onlyPlaceholder

Loading the editor…

Nothing you type or add leaves this page.

// npm install github:Agunwami-Enterprise/agunwami-text-editor#v0.4.0
import { TextEditor } from 'agunwami-text-editor';
import 'agunwami-text-editor/styles.css';

export default function MyEditor() {
  return (
    <TextEditor
      content={`<h2>Quarterly update</h2>
        <p>Welcome to the <strong>Agunwami Text Editor</strong>. Edit this text and the code beside it changes too.</p>
        <ul data-type="taskList">
          <li data-type="taskItem" data-checked="true"><label><input type="checkbox" checked></label><div><p>Launch the new documents workspace</p></div></li>
          <li data-type="taskItem" data-checked="false"><label><input type="checkbox"></label><div><p>Try it in your own product</p></div></li>
        </ul>
        <table><tbody>
          <tr><th><p>Feature</p></th><th><p>Where it's used</p></th></tr>
          <tr><td><p>Articles</p></td><td><p>Expert Insights</p></td></tr>
        </tbody></table>`}
      onChange={html => console.log(html)}
      upload={async file => URL.createObjectURL(file)} // swap for your storage
    />
  );
}

Paste into a component, e.g. src/App.tsx after installing.

Everything a document needs

The tools people expect from a desktop word processor, built for the web and ready on day one.

Docs-style writing

Edit, View, Insert, Format, Table and Tools menus. Headings, fonts, sizes, colours, alignment, line spacing, lists and checklists.

Images that behave

Paste, drop or upload. Resize by dragging, align, wrap text, add frames and captions, then crop and rotate without leaving the page.

Drawings and shapes

Boxes, circles, arrows, lines, text boxes and freehand. Every drawing is saved as a crisp vector picture inside the document.

Real tables

Pick a size from a grid, drag column widths and row heights, align cells, and move rows and columns around.

Pages and letterheads

One long page or separate Letter-size pages, portrait or landscape, with your letterhead behind every page and manual page breaks.

Finishing tools

Find and replace, word count, special characters, a table of contents, today's date, and keyboard shortcuts for everything.

Running in your app in minutes

Pick your stack, copy the commands into your terminal, and replace one file. That's the whole editor, ready to type in.

Next.js, React, or plain JavaScript with no React code (mountTextEditor)
One component, or every part separately for your own layout
Built on TipTap and ProseMirror, typed for TypeScript
Works with Tailwind CSS v4 or with a single stylesheet and no Tailwind
Images go to your own storage through one upload function
Clean, predictable HTML with a ready-made allow-list for safe saving

The package is installed from our private GitHub repository. Contact us and we'll give your team access.

1. Run in your terminal:

Terminal

$ npx create-next-app@latest my-editor --yes$ cd my-editor$ npm install github:Agunwami-Enterprise/agunwami-text-editor#v0.4.0$ npm run dev

2. Replace app/page.tsx with:

app/page.tsx

'use client';

import { TextEditor } from 'agunwami-text-editor';
import 'agunwami-text-editor/styles.css';

export default function Home() {
  return (
    <main style={{ maxWidth: 1000, margin: '40px auto', padding: 16 }}>
      <TextEditor
        content="<h2>Hello</h2><p>Start writing…</p>"
        onChange={html => console.log(html)}
        upload={async file => URL.createObjectURL(file)} // swap for your storage
      />
    </main>
  );
}

3. Open the address npm run dev shows. The editor is ready to type in.

Never miss an update

When a new version is out, we'll email you what changed and the one command to update your project.

In daily use across Agunwami

We built the editor for our own platforms first. The same component runs in every one of them.

Expert Insights

Every article on this website is written in it, then shown to readers exactly as it was written.

AE Workstation documents

Teams write letters, reports and templates on letterheaded pages, then download them as PDF or Word.

File previews

Uploaded Word, PDF and HTML files open in the same editor, ready to read or edit.

Questions

Can we use the editor in our own product?

Yes. Tell us about your product on our contact page and we'll talk through how the editor fits, including licensing, setup and support.

Where do pictures and documents get stored?

In your own systems. The editor hands each picture to an upload function you provide and saves documents as HTML you keep wherever you like.

Does it need Tailwind CSS?

No. It ships with one stylesheet that holds everything it needs. Apps that already use Tailwind CSS v4 can use a lighter stylesheet instead.

How do we get new versions?

Sign up for release updates on this page and we'll email you each new version, what changed, and the one npm command to update. You choose when to update: your project stays on its version until you run it.

Can you add features we need?

Yes. The editor is actively developed by Agunwami Enterprise, and we build custom tools and integrations for teams that use it.