@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

Name	Description
init()	Initialize Grammarly. The ClientId must be passed another way.
init(clientId, config, win)	Initialize Grammarly and start using EditorSDK to connect editors.
ClientId	Identifier used to authenticate with Grammarly.
Config	Configuration to customize the Grammarly integration. Used by init() and the <Grammarly> component in React and Vue integrations.
Dialect	Specific variety of English being written.
DocumentStats	Statistics about the user-entered text. Try it nowopen in new window.
Domain	The style or type of writing to be analyzed.
Editor	An instance of Editor represents an HTML editor from your app enhanced with Grammarly. See EditorConfig to customize per editor instance.
EditorConfig	Configuration to customize the Grammarly integration per Editor instance.
EditorSDK	Overall API for the Editor SDK which can be used to create an Editor, which represent HTML editors 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>.
GrammarlyEditorPluginCallbacks
GrammarlyEditorPluginElement	<grammarly-editor-plugin> is a web component that adds Grammarly suggestions to the HTML element it wraps.
GrammarlyEditorPluginElementEventMap	Custom events emitted by GrammarlyEditorPluginElement. Try it nowopen in new window.
MenuPosition	Position of the Grammarly button menu relative to the Grammarly button.
SessionStats	Statistics about the Grammarly session.
SessionSuggestionBreakdown	Suggestion total along with counts by type. Try it nowopen in new window.
SuggestionCategories	Categories of suggestions that can be muted.
Time	Time in hours, minutes, and seconds.
TonePosition	Position of the tone detectoropen in new window (if present) relative to the Grammarly button.