Что это такое?
Tiptap — это headless-фреймворк для богатого текстового редактора, не привязанный к конкретному фреймворку и предназначенный для веб-приложений. Он построен поверх ProseMirror и расширяется через расширения.
Tiptap — это headless-фреймворк для богатого текстового редактора, не привязанный к конкретному фреймворку и предназначенный для веб-приложений. Он построен поверх ProseMirror и расширяется через расширения.А что значит 'headless' на практике — интерфейс-то будет?Нет — пакет не содержит никакого интерфейса, так что дизайн полностью в ваших руках; если хочется стартовать быстрее, есть связанные UI-шаблоны. Никаких переопределений CSS-классов или хаков не потребуется.
Нет — пакет не содержит никакого интерфейса, так что дизайн полностью в ваших руках; если хочется стартовать быстрее, есть связанные UI-шаблоны. Никаких переопределений CSS-классов или хаков не потребуется.Как добавить его в свой проект?Установите npm-пакеты Tiptap и следуйте инструкции быстрого старта из документации для Vue, React или чистого JavaScript (инструментам требуется Node 24+). Там же есть готовые примеры и CodeSandbox, которые можно склонировать себе.
Установите npm-пакеты Tiptap и следуйте инструкции быстрого старта из документации для Vue, React или чистого JavaScript (инструментам требуется Node 24+). Там же есть готовые примеры и CodeSandbox, которые можно склонировать себе.Обязательно использовать с ним какой-то конкретный фронтенд-фреймворк?Нет — он не зависит от фреймворка и без проблем интегрируется с Vue, React или чистым JavaScript. Под капотом всё основано на библиотеке ProseMirror.
Нет — он не зависит от фреймворка и без проблем интегрируется с Vue, React или чистым JavaScript. Под капотом всё основано на библиотеке ProseMirror.Что в нём самое сложное?Сделать собственный интерфейс редактора: Tiptap даёт движок, а не внешний вид, поэтому вся работа над дизайном — на вас. Связанные UI-шаблоны помогают начать быстрее.
Сделать собственный интерфейс редактора: Tiptap даёт движок, а не внешний вид, поэтому вся работа над дизайном — на вас. Связанные UI-шаблоны помогают начать быстрее.Он вообще бесплатный или есть платная часть?Ядро редактора — открытый код под лицензией MIT. А продвинутые Pro Extensions — совместная работа, комментарии, версионирование, конвертация документов, функции с ИИ — и Tiptap Cloud требуют платных подписок.
Ядро редактора — открытый код под лицензией MIT. А продвинутые Pro Extensions — совместная работа, комментарии, версионирование, конвертация документов, функции с ИИ — и Tiptap Cloud требуют платных подписок.Совместное редактирование уже встроено?Оно доступно через сопутствующий бэкенд с открытым кодом Hocuspocus, построенный вокруг CRDT-возможностей Yjs — вместе с редактором он образует Tiptap Suite. В README также есть ссылка на CodeSandbox с поддержкой совместной работы, чтобы попробовать вживую.
Оно доступно через сопутствующий бэкенд с открытым кодом Hocuspocus, построенный вокруг CRDT-возможностей Yjs — вместе с редактором он образует Tiptap Suite. В README также есть ссылка на CodeSandbox с поддержкой совместной работы, чтобы попробовать вживую.Что я получу из коробки благодаря расширениям?Больше 100 расширений из официальной документации и от сообщества — от простого оформления текста до продвинутых возможностей вроде редактирования блоков с помощью drag-and-drop. Можно также создавать свои расширения и узлы, чтобы настроить редактирование под себя.
Больше 100 расширений из официальной документации и от сообщества — от простого оформления текста до продвинутых возможностей вроде редактирования блоков с помощью drag-and-drop. Можно также создавать свои расширения и узлы, чтобы настроить редактирование под себя.Есть ли готовый пример блочного редактора в стиле Notion?Да — в README есть ссылка на шаблон блочного редактора notion-like для React с живой демо-версией, а также на пример простого редактора и CodeSandbox, которые можно посмотреть и склонировать.
Да — в README есть ссылка на шаблон блочного редактора notion-like для React с живой демо-версией, а также на пример простого редактора и CodeSandbox, которые можно посмотреть и склонировать.Which topics is it in?extensions, rich-text, wysiwyg-editor, js, wysiwyg, headless, drag-and-drop, text-editor, components, collaboration, editor, component-library
extensions, rich-text, wysiwyg-editor, js, wysiwyg, headless, drag-and-drop, text-editor, components, collaboration, editor, component-library