<div align="center">
<h1>
<picture>
<source media="(prefers-color-scheme: dark)" srcSet="https://github.com/Doist/typist/blob/main/.github/assets/logo-dark.png?raw=true" />
<img src="https://github.com/Doist/typist/blob/main/.github/assets/logo-light.png?raw=true" />
</picture>
</h1>
</div>
Typist is the mighty [Tiptap](https://tiptap.dev/)-based rich-text editor React component that powers Doist products, which can also be used for displaying content in a read-only fashion. Typist also supports a plain-text mode, and comes with HTML/Markdown serializers.
> **Note**
>
> This project is not attempting to be an all-purpose rich-text editor. Whilst everyone is welcome to fork or use this package in their own products, development decisions are centered around Doist product requirements.
<div align="center">
[](https://github.com/Doist/typist/actions/workflows/check-ci-validation.yml?query=branch%3Amain)
[](https://www.npmjs.com/package/@doist/typist)
[](https://bundlephobia.com/package/@doist/typist)
[](https://npmtrends.com/@doist/typist)
[](https://github.com/semantic-release/semantic-release)
[](CODE_OF_CONDUCT.md)
[](LICENSE.md)
</div>
## Installation
```sh
npm install --save @doist/typist
```
## Usage
```tsx
import { TypistEditor, RichTextKit } from '@doist/typist'
function TypistEditorContainer({ content }) {
return (
<TypistEditor
placeholder="A full rich-text editor, be creative…"
content={content}
extensions={[RichTextKit]}
/>
)
}
```
> **Note**
>
> `content`, `extensions`, and `placeholder` are initialization-only: they're read when the editor first mounts, and later changes to these props are ignored. See the [Component Lifecycle](https://typist.doist.dev/?path=/docs/documentation-tips-tricks-component-lifecycle--docs) documentation for how to handle runtime changes.
If you're looking for additional documentation, in-depth examples, or a live demo, please check out our [Storybook](https://typist.doist.dev/).
## Resources
A curated list of open-source rich-text editors powered by Tiptap that we can draw inspiration from:
- GitLab's content editor:\
https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/javascripts/content_editor
## Contributing
If you're interested in contributing code and/or documentation, please read our [contributing guide](CONTRIBUTING.md).
## License
The use of this source code is governed by an MIT-style license that can be found in the [LICENSE](LICENSE) file.