Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
By integrating the Intlayer MCP Server to your favourite AI assistant can retrieve all the doc directly from ChatGPT, DeepSeek, Cursor, VSCode, etc.
See MCP Server docIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
intlayer-editor: NPM Package to use the Intlayer visual editor
Intlayer is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
The intlayer-editor package is a NPM package that integrates the Intlayer visual editor into your React project.
How Intlayer Editor Works
The intlayer editor allows to interact with the Intlayer distant dictionary. It can be installed on the client side and transform your application into a CMS-like editor to manage your site's content in all configured languages.
Installation
Install the necessary package using your preferred package manager:
Copy the code to the clipboard
npm install intlayer-editorConfiguration
In your Intlayer configuration file, you can customize the editor settings:
Copy the code to the clipboard
const config: IntlayerConfig = { // ... other configuration settings editor: { enabled: process.env.INTLAYER_ENABLED === "true", // If false, the editor is inactive and cannot be accessed. // Client ID and client secret are required to enable the editor. // They allow the identify the user who is editing the content. // They can be obtained by creating a new client in the Intlayer Dashboard - Projects (https://intlayer.org/dashboard/projects). clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },};If you don't have a client ID and client secret, you can obtain them by creating a new client in the Intlayer Dashboard - Projects.
To see all available parameters, refer to the configuration documentation
The intlayer-editor package is based on Intlayer and is available for JavaScript applications, such as React (Create React App), Vite + React, and Next.js.
For more details on how to install the package, see the relevant section below:
Integrating with Next.js
For integration with Next.js, refer to the setup guide.
Integrating with Create React App
For integration with Create React App, refer to the setup guide
Integrating with Vite + React
For integration with Vite + React, refer to the setup guide
Example of integration
To integrate the Intlayer visual editor into your React project, follow these steps:
Import the Intlayer editor component into your React application:
src/App.jsxCopy codeCopy the code to the clipboard
import { IntlayerEditorProvider } from "intlayer-editor";import { IntlayerProvider } from "react-intlayer";export default function App() { return ( <IntlayerProvider> <IntlayerEditorProvider> <IntlayerEditor>{/* Your App content here */}</IntlayerEditor> </IntlayerEditorProvider> </IntlayerProvider> );}Import the Intlayer editor styles into your Next.js application:
src/app/[locale]/layout.jsxCopy codeCopy the code to the clipboard
import { IntlayerEditorStyles } from "intlayer-editor";export default async function RootLayout({ children, params }) { const { locale } = await params; return ( <IntlayerClientProvider locale={locale}> <IntlayerEditorProvider> <html lang={locale}> <body className={IntlayerEditorStyles}>{children}</body> </html> </IntlayerEditorProvider> </IntlayerClientProvider> );}
Using the Editor
When the editor is installed, enabled, and started, you can view each field indexed by Intlayer by hovering over your content with your cursor.
If your content is outlined, you can long-press it to display the edit drawer.
Doc History
| Version | Date | Changes |
|---|---|---|
| 5.5.10 | 2025-06-29 | Init history |