@grammarly/editor-sdk

Overview

See the Text Editor SDK guide for installation options.

The Text Editor SDK can be configured according to your app's needs. Specify configuration with HTML attributes on the <grammarly-editor-plugin> web component.

<grammarly-editor-plugin
  config.documentDialect="british"
  config.suggestionCategories.oxfordComma="on"
>
  <textarea></textarea>
</grammarly-editor-plugin>

This allows your app to:

  • specify information about the end user's input to improve Grammarly's suggestions
  • influence Grammarly suggestion types (SuggestionCategories)

Configuration options can also be specified in javascript.

const pluginElement = document.querySelector("grammarly-editor-plugin");
pluginElement.config = {
  documentDialect: "canadian",
  suggestionCategories: {
    passiveVoice: "on",
  },
};

Refer to EditorConfig for full details.

Theming

CSS variables that allow you to theme your app are detailed in Customization.

Reference

NameDescription
init()Initialize Grammarly. The ClientId must be passed another way.
init(clientId, config, win)Initialize Grammarly and start using EditorSDK to connect editors.
ClientIdIdentifier used to authenticate with Grammarly.
ConfigConfiguration to customize the Grammarly integration. Used by init() and the <Grammarly> component in React and Vue integrations.
DialectSpecific variety of English being written.
DocumentStatsStatistics about the user-entered text. Try it nowopen in new window.
DomainThe style or type of writing to be analyzed.
EditorAn instance of Editor represents an HTML editor from your app enhanced with Grammarly. See EditorConfig to customize per editor instance.
EditorConfigConfiguration to customize the Grammarly integration per Editor instance.
EditorSDKOverall API for the Editor SDK which can be used to create an Editor, which represents an HTML editor enhanced with Grammarly.
GrammarlyButtonElement<grammarly-button> is a web component that allows you to place the Grammarly button in a custom position in your app. The Grammarly button can only display once per page. Its location is set and displayed according to the earliest inclusion of <grammarly-button>.
GrammarlyEditorPluginCallbacksCallback functions for custom eventsopen in new window emitted by the Grammarly Text Editor Plugin.
GrammarlyEditorPluginElement<grammarly-editor-plugin> is a web component that adds Grammarly suggestions to the HTML element it wraps.
GrammarlyEditorPluginElementEventMapCustom events emitted by GrammarlyEditorPluginElement. Try it nowopen in new window.
MenuPositionPosition of the Grammarly button menu relative to the Grammarly button.
SessionStatsStatistics about the Grammarly session.
SessionSuggestionBreakdownSuggestion total along with counts by type. Try it nowopen in new window.
SuggestionCategoriesCategories of suggestions that can be muted.
TimeTime in hours, minutes, and seconds.
TonePositionPosition of the tone detectoropen in new window (if present) relative to the Grammarly button.
Last Updated: 5/16/2023, 7:11:22 PM