https://github.com/ianstormtaylor/slate Skip to content Sign up * Why GitHub? Features - + Mobile - + Actions - + Codespaces - + Packages - + Security - + Code review - + Issues - + Integrations - + GitHub Sponsors - + Customer stories- * Team * Enterprise * Explore + Explore GitHub - Learn and contribute + Topics - + Collections - + Trending - + Learning Lab - + Open source guides - Connect with others + The ReadME Project - + Events - + Community forum - + GitHub Education - + GitHub Stars program - * Marketplace * Pricing Plans - + Compare plans - + Contact Sales - + Education - [ ] [search-key] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} ianstormtaylor / slate * Notifications * Star 21.5k * Fork 2.4k A completely customizable framework for building rich text editors. (Currently in beta.) slatejs.org MIT License 21.5k stars 2.4k forks Star Notifications * Code * Issues 382 * Pull requests 81 * Discussions * Actions * Security * Insights More * Code * Issues * Pull requests * Discussions * Actions * Security * Insights main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags 15 branches 1,651 tags Code Clone HTTPS GitHub CLI [https://github.com/i] Use Git or checkout with SVN using the web URL. [gh repo clone iansto] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Go back Launching Xcode If nothing happens, download Xcode and try again. Go back Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @thesunny thesunny docs: Fix links in Span API docs ... 354b009 Jul 27, 2021 docs: Fix links in Span API docs 354b009 Git stats * 3,565 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .changeset Fix scroll into view to scroll parent scrollables (#4369) Jul 9, 2021 .github Revert to using matrix for release workflow (#4294) May 26, 2021 config delete legacy rollup config (#3833) Aug 19, 2020 cypress Fix iframe crash (#4219) Apr 26, 2021 docs docs: Fix links in Span API docs Jul 27, 2021 packages Fix scroll into view to scroll parent scrollables (#4369) Jul 9, 2021 site Fix scroll into view to scroll parent scrollables (#4369) Jul 9, 2021 support Custom TypeScript Types (#3835) Nov 24, 2020 .editorconfig fix plain serializer handling empty blocks, fixes #1090 (#1091) Sep 8, 2017 .eslintignore lint & example fixes (#3160) Nov 29, 2019 .eslintrc (Re)-Introduce Android support via a MutationObserver based reconcili... May 14, 2021 .gitattributes Create .gitattributes and explicitly set the line breaks to be LF (# 4161 Apr 1, 2021 .gitbook.yaml add gitbook yaml Dec 10, 2019 .gitignore 4196 integration tests with cypress (#4206) Apr 16, 2021 .lintstagedrc.js Comment lintstagedrc properly so we know how and why it is there and ... Jul 9, 2021 .markdownlint.json Add markdownlint to remove unnecessary warnings May 26, 2021 .prettierignore Add .github to .prettierignore Mar 29, 2021 .prettierrc refactor rollup, prettier and benchmark configuration Feb 7, 2018 License.md Lint JSON, CSS and Markdown files with Prettier (#1612) Feb 7, 2018 Readme.md fix: contributing link (#4344) Jul 21, 2021 cypress.json 4196 integration tests with cypress (#4206) Apr 16, 2021 lerna.json v0.61.3 Mar 30, 2021 now.json add now.json Dec 10, 2019 package.json Add syntax highlighting example to menu Jul 2, 2021 tsconfig.json remove the slate-schema package (#3291) Dec 10, 2019 yarn.lock Add syntax highlighting example to menu Jul 2, 2021 View code Why? Principles Demo Examples Documentation Packages Contributing! Readme.md [banner] A completely customizable framework for building rich text editors. Why? * Principles * Demo * Examples * Documentation * Contributing! [preview] [687474703a] [6874747073] [6874747073] Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs--which are becoming table stakes for applications on the web--without your codebase getting mired in complexity. It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React. It was inspired by libraries like Draft.js, Prosemirror and Quill. Slate is currently in beta. Its core API is useable right now, but you might need to pull request improvements for advanced use cases, or fixes for some bugs. Some of its APIs are not "finalized" and will have breaking changes over time as we discover better solutions. There isn't currently a 1.0 release schedule, we're still getting the architecture right. Slate is also contributor-driven. It is not backed by any huge company, which means that all contributions are voluntary and done by the people who need them. If you need something improved, added, or fixed, please contribute it yourself or no one will. And if you want to become a more active maintainer, let us know in the Slack channel. Why? Why create Slate? Well... (Beware: this section has a few of my opinions!) Before creating Slate, I tried a lot of the other rich text libraries out there--Draft.js, Prosemirror, Quill, etc. What I found was that while getting simple examples to work was easy enough, once you started trying to build something like Medium, Dropbox Paper or Google Docs, you ran into deeper issues... * The editor's "schema" was hardcoded and hard to customize. Things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain-specific needs? * Transforming the documents programmatically was very convoluted. Writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex. * Serializing to HTML, Markdown, etc. seemed like an afterthought. Simple things like transforming a document to HTML or Markdown involved writing lots of boilerplate code, for what seemed like very common use cases. * Re-inventing the view layer seemed inefficient and limiting. Most editors rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system with new "gotchas". * Collaborative editing wasn't designed for in advance. Often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor. * The repositories were monolithic, not small and reusable. The code bases for many of the editors often didn't expose the internal tooling that could have been re-used by developers, leading to having to reinvent the wheel. * Building complex, nested documents was impossible. Many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible. Of course not every editor exhibits all of these issues, but if you've tried using another editor you might have run into similar problems. To get around the limitations of their API's and achieve the user experience you're after, you have to resort to very hacky things. And some experiences are just plain impossible to achieve. If that sounds familiar, you might like Slate. Which brings me to how Slate solves all of that... Principles Slate tries to solve the question of "Why?" with a few principles: 1. First-class plugins. The most important part of Slate is that plugins are first-class entities. That means you can completely customize the editing experience, to build complex editors like Medium's or Dropbox's, without having to fight against the library's assumptions. 2. Schema-less core. Slate's core logic assumes very little about the schema of the data you'll be editing, which means that there are no assumptions baked into the library that'll trip you up when you need to go beyond the most basic use cases. 3. Nested document model. The document model used for Slate is a nested, recursive tree, just like the DOM itself. This means that creating complex components like tables or nested block quotes are possible for advanced use cases. But it's also easy to keep it simple by only using a single level of hierarchy. 4. Parallel to the DOM. Slate's data model is based on the DOM--the document is a nested tree, it uses selections and ranges, and it exposes all the standard event handlers. This means that advanced behaviors like tables or nested block quotes are possible. Pretty much anything you can do in the DOM, you can do in Slate. 5. Intuitive commands. Slate documents are edited using "commands", that are designed to be high-level and extremely intuitive to write and read, so that custom functionality is as expressive as possible. This greatly increases your ability to reason about your code. 6. Collaboration-ready data model. The data model Slate uses--specifically how operations are applied to the document--has been designed to allow for collaborative editing to be layered on top, so you won't need to rethink everything if you decide to make your editor collaborative. 7. Clear "core" boundaries. With a plugin-first architecture, and a schema-less core, it becomes a lot clearer where the boundary is between "core" and "custom", which means that the core experience doesn't get bogged down in edge cases. Demo Check out the live demo of all of the examples! Examples To get a sense for how you might use Slate, check out a few of the examples: * Plain text -- showing the most basic case: a glorified