<p align="center">
<a href="https://www.npmjs.com/package/reactjs-tiptap-editor" target="_blank" rel="noopener noreferrer">
<img src="https://api.iconify.design/ic:round-wysiwyg.svg?color=%23bbdf58" alt="logo" width='100'/></a>
</p>

<p align="center">
 A modern WYSIWYG rich-text editor base on Tiptap uses Shadcn components.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/reactjs-tiptap-editor" target="_blank" rel="noopener noreferrer"><img src="https://badge.fury.io/js/reactjs-tiptap-editor.svg" alt="NPM Version" /></a>
  <a href="https://www.npmjs.com/package/reactjs-tiptap-editor" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/dt/reactjs-tiptap-editor.svg?logo=npm" alt="NPM Downloads" /></a>
  <a href="https://bundlephobia.com/result?p=reactjs-tiptap-editor" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/bundlephobia/minzip/reactjs-tiptap-editor" alt="Minizip" /></a>
  <a href="https://github.com/hunghg255/reactjs-tiptap-editor/graphs/contributors" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/all_contributors-1-orange.svg" alt="Contributors" /></a>
  <a href="https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><img src="https://badgen.net/github/license/hunghg255/reactjs-tiptap-editor" alt="License" /></a>
  <a href="https://webuild.community" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/webuild-community/badge/master/svg/love.svg" alt="webuild" /></a>
  <a href="https://webuild.community" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/webuild-community/badge/master/svg/WeBuild.svg" alt="member" /></a>
</p>

![App Screenshot](./screenshot/screenshot.png)

## Demo

[Demo](https://reactjs-tiptap-editor-playground.vercel.app/)

## Documentation

[Documentation](https://reactjs-tiptap-editor.vercel.app/)

## Deep wiki

[Deep Wiki](https://deepwiki.com/hunghg255/reactjs-tiptap-editor)

## Run Locally

Clone the project

```bash
git clone https://github.com/hunghg255/reactjs-tiptap-editor.git
```

Go to the project directory

```bash
cd reactjs-tiptap-editor
```

Install dependencies

```bash
pnpm install
```

Start the Demo server

```bash
npm run build:lib:dev
npm run playground
```

## All Contributors

Thanks to the following friends for their contributions to project:

![App Screenshot](./screenshot/contributor-wide.svg)

## Star History

<img src="https://api.star-history.com/svg?repos=hunghg255/reactjs-tiptap-editor" />

## Related

Here are some related projects

[Tiptap](https://tiptap.dev)

[Shadcn](https://ui.shadcn.com/)

## License

[MIT](./LICENSE)

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/hunghg255/sponsors/sponsors.svg">
    <img src='https://cdn.jsdelivr.net/gh/hunghg255/sponsors/sponsors.svg'/>
  </a>
</p>
