# plate **Repository Path**: mirrors_bokuweb/plate ## Basic Information - **Project Name**: plate - **Description**: A plugin framework for building rich text editors with slate. - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-09-06 - **Last Updated**: 2026-02-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Plate

Total Downloads PRs Welcome
Powered by Vercel

## Visit [plate.udecode.io](https://plate.udecode.io/) for docs, guides, API and more! ### Hiring Plate consulting: - [@zbeyens](https://superpeer.com/zbeyens) – author Looking to hire: - [@dylans](https://github.com/dylans) – co-owner - [@nicholasareed](https://github.com/nicholasareed) DM [@zbeyens](https://github.com/zbeyens) to get added to the list if your offer includes Plate contribution. ## Introduction [Slate](https://github.com/ianstormtaylor/slate) is a low-level editor framework that helps you deal with difficult parts when building an editor, such as events handlers, elements, formatting, commands, rendering, serializing, normalizing, etc. While you are trying to build your own editors, it still needs a lot of skills to make something similar to [Quill](https://quilljs.com/) or [ProseMirror](https://prosemirror.net/). This repository allows you to build your editor right away with **minimal** slate knowledge. `@udecode/plate` is built on top of slate to handle plugins and state management for an optimal development experience. This repository comes with a lot of plugins as elements, marks, serializers, normalizers, queries, transforms, components and so on. - 🏎 Simple Start > You only need one component to get started: `` - 🐻 State Management > [zustand](https://github.com/pmndrs/zustand) store is internally used > to support multiple editor states. - πŸ’… Design System > The API is design system friendly. We provide a default design system > for quick start but you can plug-in your own one using a single > function. - πŸ”Œ 40+ Packages > We enforce separation of concerns by packaging each feature for build > optimization and versioning. - πŸ›  Extensible > All plugins accept extensible options and if you need to fork a > plugin, all its functions are exported. - πŸ“¦ Tree-shaking / ES modules - βœ… TypeScript types - βœ… Unit tested with `slate@0.63.0` and `slate-react@0.65.2` ## Documentation To find out more see the following Plate documentation sections: - [API documentation](https://plate-api.udecode.io/globals.html) - [Docs](https://plate.udecode.io) - [Quick start](https://plate.udecode.io/docs/installation) - [Guides](https://plate.udecode.io/docs/Plate) - [Playground](https://plate.udecode.io/docs/playground) - [Examples](examples) - [NextJS](examples/apps/next) - [CRA](examples/apps/cra) The documentation is far from being complete and will be constantly evolving (as will the packages). ## Contributing and project organization ### Ideas and discussions [Discussions](https://github.com/udecode/plate/discussions) is the best place for bringing opinions and contributions. Letting us know if we're going in the right or wrong direction is great feedback and will be much appreciated! ### Development Plate is a modular, multi-package, monorepo project. It consists of a core package that creates the plugin system, based on which the plugin packages are implemented. See the [contributing guide](CONTRIBUTING.md) to learn how to contribute your code to the project. ## Packages ### Core libraries | Name | Version | Description | |:-------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------| | [`@udecode/plate-common`](packages/common) | [@udecode/plate-common npm package badge](https://www.npmjs.com/package/@udecode/plate-common) | Common queries, transforms and utilities. | | [`@udecode/plate-core`](packages/core) | [@udecode/plate-core npm package badge](https://www.npmjs.com/package/@udecode/plate-core) | Core plate architecture. | ### Element Plugins | Name | Version | Description | |:------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------| | [`@udecode/plate-basic-elements`](packages/nodes/basic-elements) | [@udecode/plate-basic-elements npm package badge](https://www.npmjs.com/package/@udecode/plate-basic-elements) | Basic elements plugins. | | [`@udecode/plate-alignment`](packages/nodes/alignment) | [@udecode/plate-alignment npm package badge](https://www.npmjs.com/package/@udecode/plate-alignment) | Text alignment plugin. | | [`@udecode/plate-ui-alignment`](packages/ui/nodes/alignment) | [@udecode/plate-ui-alignment npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-alignment) | Text alignment UI. | | [`@udecode/plate-block-quote`](packages/nodes/block-quote/) | [@udecode/plate-block-quote npm package badge](https://www.npmjs.com/package/@udecode/plate-block-quote) | Block quote plugin. | | [`@udecode/plate-ui-block-quote`](packages/ui/nodes/block-quote/) | [@udecode/plate-ui-block-quote npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-block-quote) | Block quote UI. | | [`@udecode/plate-code-block`](packages/nodes/code-block) | [@udecode/plate-code-block npm package badge](https://www.npmjs.com/package/@udecode/plate-code-block) | Code block plugin. | | [`@udecode/plate-ui-code-block`](packages/ui/nodes/code-block) | [@udecode/plate-ui-code-block npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-code-block) | Code block UI. | | [`@udecode/plate-excalidraw`](packages/ui/nodes/excalidraw/) | [@udecode/plate-excalidraw npm package badge](https://www.npmjs.com/package/@udecode/plate-excalidraw) | Excalidraw plugin. | | [`@udecode/plate-heading`](packages/nodes/heading/) | [@udecode/plate-heading npm package badge](https://www.npmjs.com/package/@udecode/plate-heading) | Headings (1-6) plugin. | | [`@udecode/plate-link`](packages/nodes/link/) | [@udecode/plate-link npm package badge](https://www.npmjs.com/package/@udecode/plate-link) | Link plugin. | | [`@udecode/plate-ui-link`](packages/ui/nodes/link/) | [@udecode/plate-ui-link npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-link) | Link UI. | | [`@udecode/plate-list`](packages/nodes/list) | [@udecode/plate-list npm package badge](https://www.npmjs.com/package/@udecode/plate-list) | Bulleted, numbered and to-do list plugins. | | [`@udecode/plate-ui-list`](packages/ui/nodes/list) | [@udecode/plate-ui-list npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-list) | List UI. | | [`@udecode/plate-media`](packages/nodes/media) | [@udecode/plate-media npm package badge](https://www.npmjs.com/package/@udecode/plate-media) | Media embed plugin. | | [`@udecode/plate-ui-media`](packages/ui/nodes/media) | [@udecode/plate-ui-media npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-media) | Media embed UI. | | [`@udecode/plate-mention`](packages/nodes/mention/) | [@udecode/plate-mention npm package badge](https://www.npmjs.com/package/@udecode/plate-mention) | Mention plugin (autocomplete `@mentions`, `#tags`, etc.). | | [`@udecode/plate-ui-mention`](packages/ui/nodes/mention/) | [@udecode/plate-ui-mention npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-mention) | Mention UI. | | [`@udecode/plate-paragraph`](packages/nodes/paragraph/) | [@udecode/plate-paragraph npm package badge](https://www.npmjs.com/package/@udecode/plate-paragraph) | Paragraph plugin. | | [`@udecode/plate-table`](packages/nodes/table/) | [@udecode/plate-table npm package badge](https://www.npmjs.com/package/@udecode/plate-table) | Table plugin. | | [`@udecode/plate-ui-table`](packages/ui/nodes/table/) | [@udecode/plate-ui-table npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-table) | Table UI. | ### Mark Plugins | Name | Version | Description | |:-----------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------| | [`@udecode/plate-basic-marks`](packages/nodes/basic-marks) | [@udecode/plate-basic-marks npm package badge](https://www.npmjs.com/package/@udecode/plate-basic-marks) | Basic marks plugins: bold, code, italic, strikethrough, subscript, superscript and underline. | | [`@udecode/plate-font`](packages/nodes/font) | [@udecode/plate-font npm package badge](https://www.npmjs.com/package/@udecode/plate-font) | Font color and background color plugins. | | [`@udecode/plate-highlight`](packages/nodes/highlight/) | [@udecode/plate-highlight npm package badge](https://www.npmjs.com/package/@udecode/plate-highlight) | Highlight plugin. | | [`@udecode/plate-kbd`](packages/nodes/kbd/) | [@udecode/plate-kbd npm package badge](https://www.npmjs.com/package/@udecode/plate-kbd) | Keyboard input plugin. | ### Serializer Plugins | Name | Version | Description | |:-------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------| | [`@udecode/plate-serializer-md`](packages/serializers/md) | [@udecode/plate-serializer-md npm package badge](https://www.npmjs.com/package/@udecode/plate-serializer-md) | Markdown serializer plugin. | | [`@udecode/plate-serializer-csv`](packages/serializers/csv) | [@udecode/plate-serializer-csv npm package badge](https://www.npmjs.com/package/@udecode/plate-serializer-csv) | CSV serializer plugin. | ### Plugins | Name | Version | Description | |:--------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------| | [`@udecode/plate`](packages/plate) | [@udecode/plate npm package badge](https://www.npmjs.com/package/@udecode/plate) | All-in-one package. | | [`@udecode/plate-autoformat`](packages/editor/autoformat) | [@udecode/plate-autoformat npm package badge](https://www.npmjs.com/package/@udecode/plate-autoformat) | Autoformatting plugin. Replaces predefined characters with a corresponding format (e.g. **foo** becomes bold). | | [`@udecode/plate-break`](packages/editor/break) | [@udecode/plate-break npm package badge](https://www.npmjs.com/package/@udecode/plate-break) | Insert break plugins. | | [`@udecode/plate-ui-dnd`](packages/ui/dnd) | [@udecode/plate-ui-dnd npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-dnd) | Drag and drop with [react-dnd](https://github.com/react-dnd/react-dnd). | | [`@udecode/plate-find-replace`](packages/decorators/find-replace) | [@udecode/plate-find-replace npm package badge](https://www.npmjs.com/package/@udecode/plate-find-replace) | Find and replace plugin. | | [`@udecode/plate-ui-find-replace`](packages/ui/find-replace) | [@udecode/plate-ui-find-replace npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-find-replace) | Find and replace UI. | | [`@udecode/plate-node-id`](packages/editor/node-id) | [@udecode/plate-node-id npm package badge](https://www.npmjs.com/package/@udecode/plate-node-id) | Node ID plugin. | | [`@udecode/plate-normalizers`](packages/editor/normalizers) | [@udecode/plate-normalizers npm package badge](https://www.npmjs.com/package/@udecode/plate-normalizers) | Normalizer plugins. | | [`@udecode/plate-reset-node`](packages/editor/reset-node) | [@udecode/plate-reset-node npm package badge](https://www.npmjs.com/package/@udecode/plate-reset-node) | Reset node plugin. | | [`@udecode/plate-select`](packages/editor/select) | [@udecode/plate-select npm package badge](https://www.npmjs.com/package/@udecode/plate-select) | Node selecting plugins. | | [`@udecode/plate-styled-components`](packages/ui/styled-components) | [@udecode/plate-ui-fluent npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-fluent) | Styled components (Plate UI library). | | [`@udecode/plate-trailing-block`](packages/editor/trailing-block) | [@udecode/plate-trailing-block npm package badge](https://www.npmjs.com/package/@udecode/plate-trailing-block) | Trailing-block plugin. | | [`@udecode/plate-ui-toolbar`](packages/ui/toolbar) | [@udecode/plate-ui-toolbar npm package badge](https://www.npmjs.com/package/@udecode/plate-ui-toolbar) | Toolbar UI (balloon, heading, buttons, etc.). | | [`@udecode/plate-test-utils`](packages/test-utils/) | [@udecode/plate-test-utils npm package badge](https://www.npmjs.com/package/@udecode/plate-test-utils) | Test utilities. | ## Looking for `slate-plugins`? This repo has been renamed to `plate`. The name change should not disrupt any current usage, repo clones, pull requests or issue reporting. Links should redirect to the new location. The library formerly known as `@udecode/slate-plugins` is now available as `@udecode/plate`. ### Author's Note > [@zbeyens](https://github.com/zbeyens): I'm building an app with an > editor like many of you and my first initiative was to spend months > to share this work, while hundreds of developers were coding and > debugging the exact same features. Open-source is a long-term > investment for a **bug-free product and reducing technical debt**, so > I can only encourage you to join this collaboration. Our goal is to > build a fully-featured editor. #### [BecomeΒ aΒ Sponsor!](https://github.com/sponsors/zbeyens) ### Contributors 🌟 Stars and πŸ“₯ Pull requests are welcome! Don't hesitate to **share your plugins** here. Read our [contributing guide](CONTRIBUTING.md) to get started, or find us on [Slack](https://slate-js.slack.com/messages/plate), we will take the time to guide you. Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

Ziad Beyens

🚧

Dylan Schiemann

🚧

Horacio Herrera

πŸ’» πŸ”Œ πŸ’‘ πŸ› πŸ€”

Eivind Barstad Waaler

πŸ’» πŸ”Œ πŸ’‘ πŸ›

Petr Sahula

πŸ’» πŸ”Œ πŸ’‘

Mark Vujevits

πŸ’»

Alan

πŸ’» πŸ”Œ πŸ› πŸ€”

cycle-app

πŸ’»

Paul

πŸ’» πŸ›

Daniel Lunde

πŸ’» πŸ”Œ

Roman Landenband

πŸ’» πŸ”Œ πŸ’‘

Karthikeyan

πŸ”Œ πŸ’‘ πŸ›

Csaba BenkΕ‘

πŸ”Œ
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ## License [MIT](LICENSE)