Núcleo sin interfaz de Tiptap/ProseMirror
El paquete `@slash-editor/core` contiene extensiones, esquema, comandos y serializadores sin React ni CSS, lo que permite mantener separada la lógica del editor de la presentación.
slash-editor
Freemium
Editor de bloques estilo Notion para React, con un núcleo Tiptap sin interfaz y componentes que se instalan como código fuente editable en tu aplicación.
¿Qué es slash-editor?
slash-editor es un editor de bloques estilo Notion para React. Combina un núcleo de editor sin interfaz basado en Tiptap y ProseMirror con integraciones para React y una interfaz nativa de shadcn que se instala como código fuente. El núcleo proporciona extensiones, esquema, comandos y serializadores sin React ni CSS, mientras que el paquete de React ofrece hooks y primitivas sin interfaz. Esta separación permite que una aplicación use el comportamiento del editor y controle su propia interfaz y estilos.
El editor admite flujos de trabajo orientados a bloques, como inserción mediante barra diagonal, controles de arrastre al pasar el cursor, reordenamiento de bloques, anidación, formato en línea, elementos de tarea, avisos, elementos desplegables, tablas, columnas, contenido multimedia, menciones, enlaces y comentarios. Los componentes de interfaz se distribuyen mediante un registro de shadcn, por lo que se copian en la aplicación en lugar de consumirse como una biblioteca de componentes cerrada. El proyecto cuenta con licencia MIT y no tiene un nivel de pago ni una dependencia alojada.
¿Qué puede hacer slash-editor?
Interacciones de edición orientadas a bloques
Los usuarios pueden abrir un menú de barra diagonal en una línea vacía, mover bloques con controles al pasar el cursor, reordenar y anidar contenido, y usar comandos orientados al teclado para tipos de bloque habituales.
Interfaz de shadcn bajo control del código fuente
El menú de barra diagonal, la barra de herramientas contextual, el control del bloque, el menú de menciones, el editor de enlaces, el panel de comentarios, las vistas de nodos y otras piezas se instalan desde un registro de shadcn como código fuente editable.
Esquema enriquecido de bloques y multimedia
El esquema documentado y demostrado incluye encabezados, listas, citas, código, separadores, tareas, avisos, elementos desplegables, tablas, columnas, diagramas de Mermaid, contenido incrustado y marcadores de carga para imágenes, archivos y vídeos.
Puntos de extensión para colaboración e IA
Una configuración autoalojada de Yjs y Hocuspocus puede proporcionar cursores de presencia y almacenamiento de hilos de comentarios, mientras que las acciones de IA mediante barra diagonal se transmiten a través de un `StreamAdapter` implementado por la aplicación.
Casos de uso
“Editores personalizados para React”
Los equipos de producto pueden añadir edición de bloques estilo Notion a una aplicación React y mantener el modelo de edición principal y la interfaz renderizada bajo controles separados.
“Interfaces de contenido controladas por el código fuente”
Los equipos que necesitan cambiar tokens, marcado o comportamiento de los componentes pueden instalar la interfaz del registro en su propio repositorio y mantenerla como el resto del código fuente de la aplicación.
“Espacios de trabajo colaborativos”
Las aplicaciones pueden conectar el editor con servicios autoalojados de Yjs y Hocuspocus para edición en tiempo real, cursores de presencia y almacenamiento de hilos de comentarios.
“Flujos de trabajo de escritura asistida por IA”
Una aplicación puede ofrecer acciones de continuar la escritura, resumir, generar ideas y corregir la ortografía o la gramática en el menú de barra diagonal mediante la implementación de un adaptador de transmisión compatible con su modelo.
Preguntas frecuentes
¿Qué paquetes componen slash-editor?
El espacio de trabajo documentado incluye `@slash-editor/core` para extensiones, esquema, comandos y serializadores, y `@slash-editor/react` para hooks y primitivas sin interfaz. Tiptap core, Tiptap PM y Tiptap React son dependencias peer instaladas por la aplicación.
¿Los componentes de interfaz se ofrecen como una biblioteca cerrada?
No. Los componentes de interfaz se distribuyen mediante un registro de shadcn y se instalan en la aplicación como código fuente. La aplicación puede editar y cambiar el estilo de los componentes copiados.
¿Qué configuración de estilos requiere una instancia del editor?
Los componentes del registro esperan un elemento ancestro con la clase `.slash-content`. El editor también necesita las reglas de marcador de posición documentadas al usar el bloque slash-editor-kit; el resto de los estilos se aplica a elementos renderizados normalmente por ProseMirror y a atributos de datos.
¿slash-editor incluye colaboración alojada o un servicio de IA?
No se describe ningún servicio alojado. La colaboración se conecta mediante Yjs y Hocuspocus autoalojados, y las acciones de IA utilizan un `StreamAdapter` que la aplicación implementa para el modelo elegido.
Datos rápidos
- Tipo de producto
- Editor de bloques estilo Notion para React
- Tecnología principal
- Tiptap y ProseMirror
- Distribución de la interfaz
- Componentes de registro de shadcn instalados como código fuente
- Licencia
- MIT
- Paquetes
- @slash-editor/core y @slash-editor/react
- Colaboración
- Integración descrita con Yjs y Hocuspocus autoalojados
Análisis de tráfico de slash-editor
Los datos de tráfico son solo como referencia.
- Valoración del dominio
- 0
Alternativas a slash-editor
JetBrains
jetbrains.com
JetBrains crea herramientas para desarrolladores, equipos y empresas, como IntelliJ IDEA, PyCharm, DataGrip, WebStorm, Rider y CLion. Sus IDE combinan navegación y sugerencias basadas en el código con flujos integrados para ejecutar, depurar y probar, además de herramientas para CI/CD, gestión de proyectos, calidad del código y documentación.
Remotion
remotion.dev
Herramienta programática para crear, previsualizar y renderizar vídeos con componentes de React y flujos de trabajo reutilizables.
Userflow
userflow.com
Userflow es una plataforma de adopción e incorporación de usuarios con IA para crear experiencias dentro de la aplicación sin código, medir su impacto y mejorar la activación. Está dirigida a equipos de producto, crecimiento, éxito del cliente y marketing que quieren guiar a los usuarios sin depender de ingeniería.