Repolode
Enviar
ianstormtaylor

ianstormtaylor/slate

Framework personalizável em TypeScript para criar editores de rich text com React, com núcleo sem schema e arquitetura baseada em plugins.

Ver no GitHubSite
Estrelas
31,743
Forks
3,304
Issues abertas
6
Último commit
há 6 horas

O que é?

Slate é um framework para criar editores de rich text no navegador. Ele funciona como uma camada extensível sobre contenteditable, usando React para renderização. Seu núcleo faz poucas suposições sobre a estrutura do documento, permitindo que desenvolvedores definam seus próprios tipos de bloco e inline, como comentários, embeds, menções ou tabelas, sem precisar contornar um schema fixo.

Os documentos são representados como uma árvore aninhada, semelhante ao DOM, e modificados por meio de comandos e operações de alto nível. O modelo de dados foi projetado para permitir que a edição colaborativa seja adicionada posteriormente. Desfazer/refazer, serialização no estilo HTML e criação de documentos com JSX são oferecidos por pacotes separados.

O projeto é dividido em um monorepo de pacotes: slate para o modelo central, slate-react para renderização, slate-history para desfazer/refazer e slate-hyperscript para criar documentos com JSX. O projeto está atualmente em beta, e algumas APIs ainda podem mudar.

Recursos principais

  • 01Arquitetura baseada em plugins, que permite personalizar o comportamento de edição.
  • 02Núcleo sem schema que permite definir seus próprios tipos de nós de bloco e inline.
  • 03Árvore de documentos aninhada, baseada no DOM, que oferece suporte a estruturas como tabelas e citações aninhadas.
  • 04Componentes React para renderizar editores por meio de slate-react.
  • 05Histórico de desfazer/refazer disponível pelo plugin slate-history.
  • 06Criação de documentos com JSX por meio de slate-hyperscript.

Casos de uso

  • Criar um editor no estilo do Medium ou do Google Docs com blocos personalizados, como embeds ou comentários.
  • Criar um editor com atalhos de Markdown que transforma a entrada enquanto os usuários digitam.
  • Adicionar menções com @ ou nós de dados inline a uma interface de edição de texto.
  • Criar uma aplicação React que precise de um campo de rich text com um modelo de documento não linear.

Início rápido

  1. 1

    Abra o guia de instalação Getting Started na documentação oficial

Antes de usar

  • Slate está em beta, e algumas APIs ainda não foram finalizadas e podem sofrer alterações incompatíveis.
  • O projeto é mantido por colaboradores voluntários, e não por uma grande empresa, então talvez você precise contribuir com as correções por conta própria.

Tópicos

#rich-text#text-editor#react#typescript#contenteditable#editor-framework#browser#editor#framework#javascript

Perguntas frequentes

O que é slate?
Framework personalizável em TypeScript para criar editores de rich text com React, com núcleo sem schema e arquitetura baseada em plugins. Slate é um framework para criar editores de rich text no navegador. Ele funciona como uma camada extensível sobre contenteditable, usando React para renderização. Seu núcleo faz poucas suposições sobre a estrutura do documento, permitindo que desenvolvedores definam seus próprios tipos de bloco e inline, como comentários, embeds, menções ou tabelas, sem precisar contornar um schema fixo.
slate é gratuito? Qual é a licença?
slate é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
slate ainda é mantido?
Manutenção ativa. O último commit de slate foi em 21 de out. de 2026.
Para que posso usar slate?
Criar um editor no estilo do Medium ou do Google Docs com blocos personalizados, como embeds ou comentários. Criar um editor com atalhos de Markdown que transforma a entrada enquanto os usuários digitam. Adicionar menções com @ ou nós de dados inline a uma interface de edição de texto. Criar uma aplicação React que precise de um campo de rich text com um modelo de documento não linear.
Como instalar slate?
Abra o guia de instalação Getting Started na documentação oficial
Onde consigo slate?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/ianstormtaylor/slate

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados