# Draftail and Draft.js documentation > Complete documentation for Draftail, a configurable rich text editor built with Draft.js. Also includes the Draft.js documentation directly combined into the Draftail documentation. This file contains links to documentation sections following the llmstxt.org standard. ## Table of Contents - [Getting started](https://www.draftail.org/docs/introduction/getting-started.md): Draftail is built with Draft.js and React. Let’s start by installing them both, as well as Draftail: - [API reference](https://www.draftail.org/docs/reference/api.md): For projects using TypeScript, Draftail includes type definitions. - [Arbitrary controls](https://www.draftail.org/docs/introduction/arbitrary-controls.md): > Those extensions require a good understanding of the Draft.js API. - [Blocks](https://www.draftail.org/docs/introduction/blocks.md): Blocks provide structure to the content. They do not overlap – no content can be both a paragraph and a heading. - [Decorators](https://www.draftail.org/docs/introduction/decorators.md): > Those extensions require a good understanding of the Draft.js API. - [Entities](https://www.draftail.org/docs/introduction/entities.md): Entities annotate content with data to represent rich content beyond text. They can be inline (e.g. a link on a word), or block-based (e.g. an embe... - [Formatting options](https://www.draftail.org/docs/introduction/formatting-options.md): Draftail, like Draft.js, distinguishes between 3 content formats: - [Inline styles](https://www.draftail.org/docs/introduction/inline-styles.md): Inline styles provide inline formatting for rich text. They can overlap: text can be both bold and italic. - [Plugins](https://www.draftail.org/docs/introduction/plugins.md): > Those extensions require a good understanding of the Draft.js API. - [Draft.js vs Draftail](https://www.draftail.org/docs/guides/draftjs-vs-draftail.md): Do you already have some knowledge of Draft.js, and wonder how Draftail differs? Are you wondering which of the two is appropriate for your project... - [Extensions tutorial: linkify](https://www.draftail.org/docs/guides/extensions-tutorial-linkify.md): Linkify features a type of interaction that’s easy to implement with the Draft.js plugins API (here, the `handlePastedText` API from Draft.js). - [Extensions tutorial: max length](https://www.draftail.org/docs/guides/extensions-tutorial-max-length.md) - [Form validation](https://www.draftail.org/docs/guides/form-validation.md): Draftail is easy to integrate with form validation, whether as simple "required" checks or more advanced rich text metrics. - [Getting started with extensions](https://www.draftail.org/docs/guides/getting-started-with-extensions.md): Do you want to write extensions for Draftail? This is a good place to start. I’ll first try to discourage you from doing it (rich text is messy and... - [Importing and exporting HTML](https://www.draftail.org/docs/guides/importing-and-exporting-html.md): Like all Draft.js editors, Draftail does not process HTML directly: It uses its own content representation. Content storage can be done with the Dr... - [Browser support and polyfills](https://www.draftail.org/docs/reference/browser-support.md): **Supported browser / device versions:** - [Content storage](https://www.draftail.org/docs/reference/content-storage.md): Like all Draft.js editors, Draftail does not process content directly as HTML but as a more structured format called ContentState. - [Controlled component](https://www.draftail.org/docs/reference/controlled-component.md): Since v1.3.0, the editor can now be used as a controlled component with its `editorState` and `onChange` props, like a vanilla Draft.js editor. For... - [Customising icons](https://www.draftail.org/docs/reference/customising-icons.md): A lot of the formatting options in Draftail rely on icons for toolbar buttons, allowing an `icon?: IconProp` attribute. There are multiple possible... - [Customising toolbars](https://www.draftail.org/docs/reference/customising-toolbars.md): By default, Draftail comes with many options for toolbars: - [i18n](https://www.draftail.org/docs/reference/i18n.md): The editor comes with default labels in english, but all are overridable. - [Troubleshooting](https://www.draftail.org/docs/reference/troubleshooting.md): - Pressing return on an empty list item should un-indent it until it is not nested, and then remove it. - Pressing return at the end of a block sho... - [UI theming](https://www.draftail.org/docs/reference/ui-theming.md): The base editor has a very simple UI and its styles are relatively straightforward. To make sure everything works, use a CSS reset, like Normalize.... - [Custom Block Components](https://www.draftail.org/docs/draft-js/advanced-topics/block-components.md): Draft is designed to solve problems for straightforward rich text interfaces like comments and chat messages, but it also powers richer editor expe... - [Block Styling](https://www.draftail.org/docs/draft-js/advanced-topics/block-styling.md): Within `Editor`, some block types are given default CSS styles to limit the amount of basic configuration required to get engineers up and running ... - [Custom Block Rendering](https://www.draftail.org/docs/draft-js/advanced-topics/custom-block-render-map.md): This article discusses how to customize Draft default block rendering. The block rendering is used to define supported block types and their respec... - [Decorators](https://www.draftail.org/docs/draft-js/advanced-topics/decorators.md): Inline and block styles aren't the only kind of rich styling that we might want to add to our editor. The Facebook comment input, for example, prov... - [EditorState Race Conditions](https://www.draftail.org/docs/draft-js/advanced-topics/editorstate-race-conditions.md): Draft `Editor` is a _controlled input_ component (you can read about this in detail in the API Basics section), meaning that changes made to the... - [Entities](https://www.draftail.org/docs/draft-js/advanced-topics/entities.md): This article discusses the Entity system, which Draft uses for annotating ranges of text with metadata. Entities introduce levels of richness beyon... - [Complex Inline Styles](https://www.draftail.org/docs/draft-js/advanced-topics/inline-styles.md): Within your editor, you may wish to provide a wide variety of inline style behavior that goes well beyond the bold/italic/underline basics. For ins... - [Issues and Pitfalls](https://www.draftail.org/docs/draft-js/advanced-topics/issues-and-pitfalls.md): This article addresses some known issues with the Draft editor framework, as well as some common pitfalls that we have encountered while using the ... - [Key Bindings](https://www.draftail.org/docs/draft-js/advanced-topics/key-bindings.md): The `Editor` component offers flexibility to define custom key bindings for your editor, via the `keyBindingFn` prop. This allows you to match key ... - [Managing Focus](https://www.draftail.org/docs/draft-js/advanced-topics/managing-focus.md): Managing text input focus can be a tricky task within React components. The browser focus/blur API is imperative, so setting or removing focus via ... - [Nested Lists](https://www.draftail.org/docs/draft-js/advanced-topics/nested-lists.md): The Draft framework provides support for nested lists, as demonstrated in the Facebook Notes editor. There, you can use `Tab` and `Shift+Tab` to ad... - [Text Direction](https://www.draftail.org/docs/draft-js/advanced-topics/text-direction.md): Facebook supports dozens of languages, which means that our text inputs need to be flexible enough to handle considerable variety. - [v0.10 API Migration](https://www.draftail.org/docs/draft-js/api-reference/v0-10-api-migration.md): The Draft.js v0.10 release includes a change to the API for managing `DraftEntity` data; the global 'DraftEntity' module is being deprecated and... - [AtomicBlockUtils](https://www.draftail.org/docs/draft-js/api-reference/atomic-block-utils.md): The `AtomicBlockUtils` module is a static set of utility functions for atomic block editing. - [CharacterMetadata](https://www.draftail.org/docs/draft-js/api-reference/character-metadata.md): `CharacterMetadata` is an Immutable Record that represents inline style and entity information for a single character. - [CompositeDecorator](https://www.draftail.org/docs/draft-js/api-reference/composite-decorator.md): See the advanced topic article on Decorators. - [ContentBlock](https://www.draftail.org/docs/draft-js/api-reference/content-block.md): `ContentBlock` is an Immutable Record that represents the full state of a single block of editor content, including: - [ContentState](https://www.draftail.org/docs/draft-js/api-reference/content-state.md): `ContentState` is an Immutable Record that represents the full state of: - [Data Conversion](https://www.draftail.org/docs/draft-js/api-reference/data-conversion.md): Because a text editor doesn't exist in a vacuum and it's important to save contents for storage or transmission, you will want to be able to conver... - [Editor Component](https://www.draftail.org/docs/draft-js/api-reference/editor.md): This article discusses the API and props of the core controlled contentEditable component itself, `Editor`. Props are defined within... - [EditorChangeType](https://www.draftail.org/docs/draft-js/api-reference/editor-change-type.md): EditorChangeType is an enum that lists the possible set of change operations that can be handled the Draft model. It is represented as a Flow type,... - [EditorState](https://www.draftail.org/docs/draft-js/api-reference/editor-state.md): `EditorState` is the top-level state object for the editor. - [Entity](https://www.draftail.org/docs/draft-js/api-reference/entity.md): `Entity` is a static module containing the API for creating, retrieving, and updating entity objects, which are used for annotating text ranges wit... - [KeyBindingUtil](https://www.draftail.org/docs/draft-js/api-reference/key-binding-util.md): The `KeyBindingUtil` module is a static set of utility functions for defining key bindings. - [Modifier](https://www.draftail.org/docs/draft-js/api-reference/modifier.md): The `Modifier` module is a static set of utility functions that encapsulate common edit operations on `ContentState` objects. It is highly recommen... - [RichUtils](https://www.draftail.org/docs/draft-js/api-reference/rich-utils.md): The `RichUtils` module is a static set of utility functions for rich text editing. - [SelectionState](https://www.draftail.org/docs/draft-js/api-reference/selection-state.md): `SelectionState` is an Immutable Record that represents a selection range in the editor. - [API Basics](https://www.draftail.org/docs/draft-js/quickstart/api-basics.md): This document provides an overview of the basics of the `Draft` API. A working example is also available to follow along. - [Rich Styling](https://www.draftail.org/docs/draft-js/quickstart/rich-styling.md): Now that we have established the basics of the top-level API, we can go a step further and examine how basic rich styling can be added to a `Draft`... - [Overview](https://www.draftail.org/docs/draft-js/quickstart/overview.md): Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.