diff --git a/packages/core/editor/src/UI/BlockOptions/BlockOptions.tsx b/packages/core/editor/src/UI/BlockOptions/BlockOptions.tsx
index 71352b313..bb3405150 100644
--- a/packages/core/editor/src/UI/BlockOptions/BlockOptions.tsx
+++ b/packages/core/editor/src/UI/BlockOptions/BlockOptions.tsx
@@ -33,9 +33,9 @@ const BlockOptionsSeparator = ({ className = '' }: BlockOptionsSeparatorProps) =
 );
 
 export type BlockOptionsProps = {
+  refs: any;
   isOpen: boolean;
   onClose: () => void;
-  refs: any;
   style: CSSProperties;
   children?: React.ReactNode;
   actions?: ['delete', 'duplicate', 'turnInto', 'copy'] | null;
@@ -79,7 +79,6 @@ const BlockOptions = ({ isOpen, onClose, refs, style, actions = DEFAULT_ACTIONS,
   const onDuplicate = () => {
     // [TEST]
     if (typeof editor.path.current !== 'number') return;
-
     editor.duplicateBlock({ original: { path: editor.path.current }, focus: true });
 
     onClose();
@@ -116,13 +115,13 @@ const BlockOptions = ({ isOpen, onClose, refs, style, actions = DEFAULT_ACTIONS,
                 <BlockOptionsMenuItem>
                   <button type="button" className="yoopta-block-options-button" onClick={onDelete}>
                     <TrashIcon className="yoo-editor-w-4 yoo-editor-h-4 yoo-editor-mr-2" />
-                    Delete
+                    {editor.getLabelText('editor.blockOptions.delete') || 'Delete'}
                   </button>
                 </BlockOptionsMenuItem>
                 <BlockOptionsMenuItem>
                   <button type="button" className="yoopta-block-options-button" onClick={onDuplicate}>
                     <CopyIcon className="yoo-editor-w-4 yoo-editor-h-4 yoo-editor-mr-2" />
-                    Duplicate
+                    {editor.getLabelText('editor.blockOptions.duplicate') || 'Duplicate'}
                   </button>
                 </BlockOptionsMenuItem>
                 {!!ActionMenu && !isVoidElement && !editor.blocks[currentBlock?.type || '']?.hasCustomEditor && (
@@ -131,7 +130,6 @@ const BlockOptions = ({ isOpen, onClose, refs, style, actions = DEFAULT_ACTIONS,
                       <Portal id="yoo-block-options-portal">
                         <Overlay lockScroll className="yoo-editor-z-[100]" onClick={() => setIsActionMenuOpen(false)}>
                           <div style={actionMenuStyles} ref={actionMenuRefs.setFloating}>
-                            {/* @ts-ignore - fixme */}
                             <ActionMenu {...actionMenuRenderProps} />
                           </div>
                         </Overlay>
@@ -144,14 +142,14 @@ const BlockOptions = ({ isOpen, onClose, refs, style, actions = DEFAULT_ACTIONS,
                       onClick={() => setIsActionMenuOpen((open) => !open)}
                     >
                       <TurnIcon className="yoo-editor-w-4 yoo-editor-h-4 yoo-editor-mr-2" />
-                      Turn into
+                      {editor.getLabelText('editor.blockOptions.turnInto') || 'Turn into'}
                     </button>
                   </BlockOptionsMenuItem>
                 )}
                 <BlockOptionsMenuItem>
                   <button type="button" className="yoopta-block-options-button" onClick={onCopy}>
                     <Link2Icon className="yoo-editor-w-4 yoo-editor-h-4 yoo-editor-mr-2" />
-                    Copy link to block
+                    {editor.getLabelText('editor.blockOptions.copyBlockLink') || 'Copy link to block'}
                   </button>
                 </BlockOptionsMenuItem>
               </BlockOptionsMenuGroup>
diff --git a/packages/core/editor/src/UI/BlockOptions/utils.ts b/packages/core/editor/src/UI/BlockOptions/utils.ts
index ae02fbc1e..0f2f18c4c 100644
--- a/packages/core/editor/src/UI/BlockOptions/utils.ts
+++ b/packages/core/editor/src/UI/BlockOptions/utils.ts
@@ -27,11 +27,13 @@ export function buildActionMenuRenderProps({ editor, view, onClose, mode = 'togg
       items = items.filter((type) => filterToggleActions(editor, type));
     }
 
-    return items.map((action) => {
-      const title = editor.blocks[action].options?.display?.title || action;
-      const description = editor.blocks[action].options?.display?.description;
-      const icon = editor.blocks[action].options?.display?.icon;
-      return { type: action, title, description, icon };
+    return items.map((type) => {
+      const title =
+        editor.getLabelText(`plugins.${type}.display.title`) || editor.blocks[type].options?.display?.title || type;
+      const description =
+        editor.getLabelText(`plugins.${type}.display.description`) || editor.blocks[type].options?.display?.description;
+      const icon = editor.blocks[type].options?.display?.icon;
+      return { type: type, title, description, icon };
     });
   };
 
diff --git a/packages/core/editor/src/YooptaEditor.tsx b/packages/core/editor/src/YooptaEditor.tsx
index 9fdce4788..d0acbfbb8 100644
--- a/packages/core/editor/src/YooptaEditor.tsx
+++ b/packages/core/editor/src/YooptaEditor.tsx
@@ -71,7 +71,9 @@ const YooptaEditor = ({
   }, [marksProps]);
 
   const plugins = useMemo(() => {
-    return pluginsProps.map((plugin) => plugin.getPlugin as Plugin<Record<string, SlateElement>>);
+    return pluginsProps.map((plugin) => {
+      return plugin.getPlugin as Plugin<Record<string, SlateElement>>;
+    });
   }, [pluginsProps]);
 
   const [editorState, setEditorState] = useState<EditorState>(() => {
diff --git a/packages/core/editor/src/constants/labels.ts b/packages/core/editor/src/constants/labels.ts
new file mode 100644
index 000000000..b2dfd533c
--- /dev/null
+++ b/packages/core/editor/src/constants/labels.ts
@@ -0,0 +1,43 @@
+import { RecursiveDotNotation } from '../types/i18n';
+
+export const DEFAULT_LABEL_TEXT_MAP = {
+  // editor: {
+  //   blockOptions: {
+  //     delete: 'Delete',
+  //     duplicate: 'Duplicate',
+  //     turnInto: 'Turn into',
+  //     copyBlockLink: 'Copy link to block',
+  //   },
+  //   placeholder: `Type '/' for commands`,
+  // },
+  // tools: {
+  //   toolbar: {
+  //     highlightColor: {
+  //       text: 'Text',
+  //       background: 'Background',
+  //       customColor: 'Custom color',
+  //     },
+  //     linkTitle: 'Link',
+  //   },
+  //   actionMenu: {
+  //     noActionsAvailable: 'No actions available',
+  //   },
+  //   link: {
+  //     title: 'Link title',
+  //     url: 'Link URL',
+  //     target: 'Link target',
+  //     rel: 'Link rel',
+  //     update: 'Update',
+  //     add: 'Add',
+  //     delete: 'Delete link',
+  //     additionalProps: 'Additional props',
+  //     targetPlaceholder: 'Edit link target',
+  //     relPlaceholder: 'Edit link rel',
+  //     titlePlaceholder: 'Edit link title',
+  //     urlPlaceholder: 'Edit link URL',
+  //   },
+  // },
+};
+
+// [TODO] - add types
+export type LabelKeys = string;
diff --git a/packages/core/editor/src/editor/i18n/getLabelText.ts b/packages/core/editor/src/editor/i18n/getLabelText.ts
new file mode 100644
index 000000000..aa7a6c389
--- /dev/null
+++ b/packages/core/editor/src/editor/i18n/getLabelText.ts
@@ -0,0 +1,17 @@
+import { DEFAULT_LABEL_TEXT_MAP, LabelKeys } from '../../constants/labels';
+import { YooEditor } from '../types';
+
+function getNestedValue(obj: any, path: string[]): string | undefined {
+  return path.reduce((acc, part) => {
+    if (acc && typeof acc === 'object' && part in acc) {
+      return acc[part];
+    }
+    return undefined;
+  }, obj);
+}
+
+export function getLabelText(editor: YooEditor, key: LabelKeys) {
+  const keyParts = key.split('.');
+  const currentLangValue = getNestedValue(DEFAULT_LABEL_TEXT_MAP, keyParts);
+  return currentLangValue || '';
+}
diff --git a/packages/core/editor/src/editor/index.tsx b/packages/core/editor/src/editor/index.tsx
index 7754d829e..ae501c021 100644
--- a/packages/core/editor/src/editor/index.tsx
+++ b/packages/core/editor/src/editor/index.tsx
@@ -4,7 +4,7 @@ import { moveBlock } from './blocks/moveBlock';
 import { focusBlock } from './blocks/focusBlock';
 import { splitBlock } from './blocks/splitBlock';
 import { setPath } from './paths/setPath';
-import { YooEditor, YooptaContentValue } from './types';
+import { ExtendedYooEditor, YooptaContentValue } from './types';
 import { increaseBlockDepth } from './blocks/increaseBlockDepth';
 import { decreaseBlockDepth } from './blocks/decreaseBlockDepth';
 import { getEditorValue } from './core/getEditorValue';
@@ -26,6 +26,7 @@ import { mergeBlock } from './blocks/mergeBlock';
 import { UndoRedoOptions, YooptaHistory } from './core/history';
 import EventEmitter from 'eventemitter3';
 import { getEmail, EmailTemplateOptions } from '../parsers/getEmail';
+import { getLabelText } from './i18n/getLabelText';
 
 const eventEmitter = new EventEmitter();
 
@@ -36,8 +37,8 @@ const Events = {
   emit: (event, payload) => eventEmitter.emit(event, payload),
 };
 
-export function createYooptaEditor(): YooEditor {
-  const editor: YooEditor = {
+export function createYooptaEditor(): ExtendedYooEditor {
+  const editor: ExtendedYooEditor = {
     id: '',
     children: {},
     blockEditorsMap: {},
@@ -68,6 +69,8 @@ export function createYooptaEditor(): YooEditor {
     applyTransforms: (operations, ...args) => applyTransforms(editor, operations, ...args),
     batchOperations: (callback) => batchOperations(editor, callback),
 
+    getLabelText: (key) => getLabelText(editor, key),
+
     on: (event, callback) => Events.on(event, callback),
     off: (event, callback) => Events.off(event, callback),
     emit: (event, ...args) => Events.emit(event, ...args),
diff --git a/packages/core/editor/src/editor/types.ts b/packages/core/editor/src/editor/types.ts
index 97c0e7dfd..4a27e68f5 100644
--- a/packages/core/editor/src/editor/types.ts
+++ b/packages/core/editor/src/editor/types.ts
@@ -1,14 +1,14 @@
 import { Descendant, Path, Point, Selection } from 'slate';
 import { Plugin, PluginElementsMap, PluginOptions, PluginElementProps } from '../plugins/types';
 import { EditorBlurOptions } from './core/blur';
-import { deleteBlock, DeleteBlockOptions } from './blocks/deleteBlock';
-import { duplicateBlock, DuplicateBlockOptions } from './blocks/duplicateBlock';
+import { deleteBlock } from './blocks/deleteBlock';
+import { duplicateBlock } from './blocks/duplicateBlock';
 import { focusBlock } from './blocks/focusBlock';
-import { toggleBlock, ToggleBlockOptions } from './blocks/toggleBlock';
+import { toggleBlock } from './blocks/toggleBlock';
 import { GetBlockOptions } from './blocks/getBlock';
 import { ReactEditor } from 'slate-react';
-import { applyTransforms, ApplyTransformsOptions, YooptaOperation } from './core/applyTransforms';
-import { insertBlock, InsertBlockOptions } from './blocks/insertBlock';
+import { applyTransforms, YooptaOperation } from './core/applyTransforms';
+import { insertBlock } from './blocks/insertBlock';
 import { increaseBlockDepth } from './blocks/increaseBlockDepth';
 import { SplitBlockOptions } from './blocks/splitBlock';
 import { HistoryStack, HistoryStackName, YooptaHistory } from './core/history';
@@ -21,6 +21,7 @@ import { getHTML } from '../parsers/getHTML';
 import { getMarkdown } from '../parsers/getMarkdown';
 import { getPlainText } from '../parsers/getPlainText';
 import { getEmail } from '../parsers/getEmail';
+import { getLabelText } from './i18n/getLabelText';
 
 export type YooptaBlockData<T = Descendant | SlateElement> = {
   id: string;
@@ -83,6 +84,7 @@ export type YooptaEventsMap = {
   blur: boolean;
   'block:copy': YooptaBlockData;
   'path-change': YooptaPath;
+  [key: string]: any;
 };
 
 export type BaseCommands = Record<string, (...args: any[]) => any>;
@@ -126,6 +128,9 @@ export type YooEditor = {
   applyTransforms: WithoutFirstArg<typeof applyTransforms>;
   batchOperations: (fn: () => void) => void;
 
+  // default labels. get label by current language. default: 'en'
+  getLabelText: WithoutFirstArg<typeof getLabelText>;
+
   // events handlers
   on: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
   once: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
@@ -175,3 +180,9 @@ export type SlateElement<K extends string = string, T = any> = {
   children: Descendant[];
   props?: PluginElementProps<T>;
 };
+
+export interface CustomTypes {
+  Editor: YooEditor;
+}
+
+export type ExtendedYooEditor = CustomTypes['Editor'];
diff --git a/packages/core/editor/src/index.ts b/packages/core/editor/src/index.ts
index 6a247984b..ff8f8d57d 100644
--- a/packages/core/editor/src/index.ts
+++ b/packages/core/editor/src/index.ts
@@ -53,6 +53,7 @@ export {
   PluginSerializeParser,
   YooptaMarkProps,
   PluginOptions,
+  Plugin,
 } from './plugins/types';
 
 export { Elements } from './editor/elements';
diff --git a/packages/core/editor/src/plugins/SlateEditorComponent.tsx b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
index 2920fffb0..07661c0a1 100644
--- a/packages/core/editor/src/plugins/SlateEditorComponent.tsx
+++ b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
@@ -14,7 +14,10 @@ import { deserializeHTML } from '../parsers/deserializeHTML';
 import { useEventHandlers, useSlateEditor } from './hooks';
 import { SlateElement } from '../editor/types';
 
-type Props<TElementMap extends Record<string, SlateElement>, TOptions> = Plugin<TElementMap, TOptions> & {
+type Props<TElementMap extends Record<string, SlateElement>, TOptions> = Omit<
+  Plugin<TElementMap, TOptions>,
+  'translations'
+> & {
   id: string;
   marks?: YooptaMark<any>[];
   options: Plugin<TElementMap, TOptions>['options'];
@@ -44,7 +47,7 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
   events,
   options,
   extensions: withExtensions,
-  placeholder = `Type '/' for commands`,
+  placeholder = 'Type / for commands',
 }: Props<TElementMap, TOptions>) => {
   const editor = useYooptaEditor();
   const block = useBlockData(id);
@@ -111,8 +114,10 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
       const isParentElementVoid = props.children?.props?.parent?.props?.nodeType === 'void';
       const showPlaceholder = !isParentElementVoid && isCurrentPath && leaf.withPlaceholder;
 
+      const placeholderText = editor.getLabelText('editor.placeholder') || placeholder;
+
       return (
-        <TextLeaf attributes={attributes} placeholder={showPlaceholder ? placeholder : undefined}>
+        <TextLeaf attributes={attributes} placeholder={showPlaceholder ? placeholderText : undefined}>
           {children}
         </TextLeaf>
       );
diff --git a/packages/core/editor/src/types/i18n.ts b/packages/core/editor/src/types/i18n.ts
new file mode 100644
index 000000000..3b4525798
--- /dev/null
+++ b/packages/core/editor/src/types/i18n.ts
@@ -0,0 +1,11 @@
+export type RecursiveDotNotation<T, P extends string = ''> = T extends object
+  ? {
+      [K in keyof T]: T[K] extends object
+        ? RecursiveDotNotation<T[K], P extends '' ? `${K & string}` : `${P}.${K & string}`>
+        : T[K] extends string
+        ? P extends ''
+          ? `${K & string}`
+          : `${P}.${K & string}`
+        : never;
+    }[keyof T]
+  : P;
diff --git a/packages/core/i18n/README.md b/packages/core/i18n/README.md
new file mode 100644
index 000000000..d0e09a7e0
--- /dev/null
+++ b/packages/core/i18n/README.md
@@ -0,0 +1,78 @@
+# @yoopta/i18n
+
+This package provides internationalization (i18n) support for **YooptaEditor** by extending the editor with translation capabilities.
+
+## 📦 Installation
+
+```bash
+yarn add @yoopta/i18n
+```
+
+## 🔹 Exports
+
+```typescript
+import { withTranslations, type I18nYooEditor } from '@yoopta/i18n';
+```
+
+### **Modules**
+
+- **`withTranslations`** - Function to extend `YooEditor` with i18n support.
+- **`I18nYooEditor`** - Extended type for `YooEditor` with i18n properties.
+
+---
+
+## 🛠 Usage
+
+If you only need to extend the editor with i18n support, you can use `withTranslations()`.
+
+```tsx
+import { withTranslations } from '@yoopta/i18n';
+import { createYooptaEditor, YooptaEditor } from '@yoopta/editor';
+import { useMemo, useEffect } from 'react';
+
+import esTranslations from '@/locales/es.json';
+import ruTranslations from '@/locales/ru.json';
+import czTranslations from '@/locales/cz.json';
+
+const TRANSLATIONS = {
+  es: esTranslations,
+  ru: ruTranslations,
+  cz: czTranslations,
+};
+
+const editor = useMemo(() => {
+  const baseEditor = createYooptaEditor();
+  return withTranslations(baseEditor, {
+    translations: TRANSLATIONS,
+    defaultLanguage: 'en',
+    language: 'es',
+  });
+}, []);
+
+// track language change if you need
+useEffect(() => {
+  const handleLanguageChange = (lang: string) => {
+    console.log('Language changed to:', lang);
+  };
+
+  editor.on('language-change', handleLanguageChange);
+  return () => {
+    editor.off('language-change', handleLanguageChange);
+  };
+}, [editor]);
+```
+
+## 📜 **I18n API**
+
+When `withTranslations` is applied to the editor, it extends `YooEditor` with the following additional properties and methods:
+
+```typescript
+export type I18nYooEditor<YKeys extends string = string> = YooEditor & {
+  translations: Record<YKeys, Record<string, string>>;
+  language: string;
+  languages: string[];
+  defaultLanguage: string;
+  setLanguage: (lang: string) => void;
+  t: (keyPath: string) => string;
+};
+```
diff --git a/packages/core/i18n/package.json b/packages/core/i18n/package.json
new file mode 100644
index 000000000..db785da6d
--- /dev/null
+++ b/packages/core/i18n/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@yoopta/i18n",
+  "version": "4.9.4",
+  "description": "Internalization package for Yoopta-Editor",
+  "author": "Darginec05 <devopsbanda@gmail.com>",
+  "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "peerDependencies": {
+    "@yoopta/editor": ">=4.0.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Darginec05/Yoopta-Editor.git"
+  },
+  "scripts": {
+    "start": "rollup --config rollup.config.js --watch --bundleConfigAsCjs --environment NODE_ENV:development",
+    "prepublishOnly": "yarn build",
+    "build": "rollup --config rollup.config.js --bundleConfigAsCjs --environment NODE_ENV:production"
+  },
+  "bugs": {
+    "url": "https://github.com/Darginec05/Yoopta-Editor/issues"
+  }
+}
diff --git a/packages/core/i18n/rollup.config.js b/packages/core/i18n/rollup.config.js
new file mode 100644
index 000000000..3ae8a68b8
--- /dev/null
+++ b/packages/core/i18n/rollup.config.js
@@ -0,0 +1,6 @@
+import { createRollupConfig } from '../../../config/rollup';
+
+const pkg = require('./package.json');
+export default createRollupConfig({
+  pkg,
+});
diff --git a/packages/core/i18n/src/extension/withTranslations.ts b/packages/core/i18n/src/extension/withTranslations.ts
new file mode 100644
index 000000000..9d537aa2b
--- /dev/null
+++ b/packages/core/i18n/src/extension/withTranslations.ts
@@ -0,0 +1,60 @@
+import { YooEditor } from '@yoopta/editor';
+import { I18nYooEditor, Translations } from '../types';
+
+type TranslationOptions<K extends string> = {
+  language: K;
+  defaultLanguage: K;
+  translations: Translations<K>;
+};
+
+function getNestedValue(obj: any, path: string[]): string | undefined {
+  return path.reduce((acc, part) => {
+    if (acc && typeof acc === 'object' && part in acc) {
+      return acc[part];
+    }
+    return undefined;
+  }, obj);
+}
+
+export function withTranslations<K extends string>(
+  editor: YooEditor,
+  options: TranslationOptions<K>,
+): I18nYooEditor<K> {
+  const i18nEditor = editor as I18nYooEditor<K>;
+
+  const { translations, defaultLanguage, language } = options;
+
+  const { getLabelText } = i18nEditor;
+  const languageKeys = Object.keys(translations) as K[];
+
+  i18nEditor.getLabelText = (key: string) => {
+    const keyParts = key.split('.');
+
+    const currentLangValue = getNestedValue(
+      translations[i18nEditor.language] || translations[i18nEditor.defaultLanguage],
+      keyParts,
+    );
+
+    if (typeof currentLangValue === 'string') {
+      return currentLangValue;
+    }
+
+    return getLabelText(key);
+  };
+
+  i18nEditor.languages = languageKeys;
+
+  i18nEditor.setLanguage = (lang: K) => {
+    if (translations[lang]) {
+      i18nEditor.language = lang;
+      i18nEditor.emit('language-change', lang);
+    }
+  };
+
+  i18nEditor.translations = translations;
+  i18nEditor.defaultLanguage = defaultLanguage;
+  i18nEditor.language = language;
+  i18nEditor.t = i18nEditor.getLabelText;
+
+  return i18nEditor;
+}
diff --git a/packages/core/i18n/src/index.ts b/packages/core/i18n/src/index.ts
new file mode 100644
index 000000000..6b1b6f55b
--- /dev/null
+++ b/packages/core/i18n/src/index.ts
@@ -0,0 +1,2 @@
+export { withTranslations } from './extension/withTranslations';
+export { I18nYooEditor, Translation } from './types';
diff --git a/packages/core/i18n/src/types/i18n-yoo-editor.ts b/packages/core/i18n/src/types/i18n-yoo-editor.ts
new file mode 100644
index 000000000..f2139e6e0
--- /dev/null
+++ b/packages/core/i18n/src/types/i18n-yoo-editor.ts
@@ -0,0 +1,64 @@
+import { YooEditor } from '@yoopta/editor';
+
+export interface NestedTranslations {
+    [key: string]: string | NestedTranslations;
+}
+
+/**
+ * The base `YooEditor` extended to add internationalization (i18n) support.
+ *
+ * This extension adds the ability to manage translations, track the current language,
+ * and switch between multiple available languages dynamically.
+ *
+ * @example
+ * ```ts
+ *  const baseEditor = createYooptaEditor();
+ *  const editorWithI18n = withTranslations(baseEditor, {
+ *      translations: { es: esTranslations, en: enTranslations },
+ *      defaultLanguage: "en",
+ *      language: "es",
+ *  });
+ *  ```
+ */
+export type I18nYooEditor<YKeys extends string = string> = YooEditor & {
+    /**
+     * A record of translations, where each key represents a language,
+     * and its value contains nested translation strings.
+     */
+    translations: Record<YKeys, NestedTranslations>;
+
+    /**
+     * The currently active language of the editor.
+     */
+    language: string;
+
+    /**
+     * A list of all supported languages available in the editor.
+     */
+    languages: string[];
+
+    /**
+     * The default language of the editor (used as a fallback when translations are missing).
+     */
+    defaultLanguage: string;
+
+    /**
+     * Updates the editor's language.
+     *
+     * When `setLanguage` is called:
+     * - The `language` property is updated.
+     * - A `'language-change'` event is emitted, allowing users to listen for language updates.
+     *
+     * @example
+     * ```ts
+     * editor.setLanguage('es'); // Changes the editor language to Spanish.
+     *
+     * editor.on('language-change', (lang) => {
+     *   console.log('Language changed to:', lang);
+     * });
+     * ```
+     *
+     * @param lang - The new language to set (must be one of the `languages` values).
+     */
+    setLanguage: (lang: string) => void;
+};
diff --git a/packages/core/i18n/src/types/index.ts b/packages/core/i18n/src/types/index.ts
new file mode 100644
index 000000000..886ef05ec
--- /dev/null
+++ b/packages/core/i18n/src/types/index.ts
@@ -0,0 +1,58 @@
+import { YooEditor, Plugin } from '@yoopta/editor';
+
+export type TranslationPlugin = {
+  display: {
+    title: string;
+    description: string;
+  };
+  options: Record<string, unknown>;
+};
+
+export type Translation<P extends Plugin<{}>[] = Plugin<{}>[]> = {
+  plugins: Record<keyof P, TranslationPlugin>;
+  editor: {
+    blockOptions: {
+      delete: string;
+      duplicate: string;
+      turnInto: string;
+      copyBlockLink: string;
+    };
+    placeholder: string;
+  };
+  tools: {
+    toolbar: {
+      highlightColor: {
+        text: string;
+        background: string;
+        customColor: string;
+      };
+      linkTitle: string;
+    };
+    link: {
+      target: string;
+      rel: string;
+      update: string;
+      add: string;
+      delete: string;
+      url: string;
+      title: string;
+      additionalProps: string;
+      titlePlaceholder: string;
+      urlPlaceholder: string;
+      targetPlaceholder: string;
+      relPlaceholder: string;
+    };
+  };
+  [key: string]: unknown;
+};
+
+export type Translations<K extends string> = Record<K, Translation>;
+
+export type I18nYooEditor<Keys extends string = string> = {
+  translations: Translations<Keys>;
+  language: Keys;
+  defaultLanguage: Keys;
+  languages: Keys[];
+  setLanguage: (lang: Keys) => void;
+  t: (key: string) => string;
+};
diff --git a/packages/core/i18n/src/utils/index.ts b/packages/core/i18n/src/utils/index.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/packages/core/i18n/src/utils/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/core/i18n/tsconfig.json b/packages/core/i18n/tsconfig.json
new file mode 100644
index 000000000..8c3461a8a
--- /dev/null
+++ b/packages/core/i18n/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../../../config/tsconfig.base.json",
+  "include": ["react-svg.d.ts", "css-modules.d.ts", "src"],
+  "exclude": ["dist", "src/**/*.test.tsx", "src/**/*.stories.tsx"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "references": [
+    {
+      "path": "../editor"
+    }
+  ]
+}
diff --git a/packages/development/package.json b/packages/development/package.json
index f0c0f7ad8..2b1019e8c 100644
--- a/packages/development/package.json
+++ b/packages/development/package.json
@@ -38,6 +38,7 @@
     "@yoopta/table": "*",
     "@yoopta/toolbar": "*",
     "@yoopta/video": "*",
+    "@yoopta/i18n": "*",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
diff --git a/packages/development/src/components/FixedToolbar/FixedToolbar.tsx b/packages/development/src/components/FixedToolbar/FixedToolbar.tsx
index 97f3802e1..aec9a8e7e 100644
--- a/packages/development/src/components/FixedToolbar/FixedToolbar.tsx
+++ b/packages/development/src/components/FixedToolbar/FixedToolbar.tsx
@@ -1,14 +1,14 @@
-import Paragraph, { ParagraphCommands } from '@yoopta/paragraph';
-import Embed, { EmbedCommands } from '@yoopta/embed';
-import Image, { ImageCommands } from '@yoopta/image';
-import Link, { LinkCommands } from '@yoopta/link';
-import Callout, { CalloutCommands } from '@yoopta/callout';
+import { ParagraphCommands } from '@yoopta/paragraph';
+import { EmbedCommands } from '@yoopta/embed';
+import { ImageCommands } from '@yoopta/image';
+import { LinkCommands } from '@yoopta/link';
+import { CalloutCommands } from '@yoopta/callout';
+import { TableCommands } from '@yoopta/table';
 
 import { AccordionCommands } from '@yoopta/accordion';
 import { TodoListCommands } from '@yoopta/lists';
-import { HeadingOne, HeadingOneCommands, HeadingThree, HeadingTwo } from '@yoopta/headings';
-import Table, { TableCommands } from '@yoopta/table';
-import { Blocks, Elements, YooEditor, Paths, YooptaPathIndex } from '@yoopta/editor';
+import { HeadingOneCommands } from '@yoopta/headings';
+import { Blocks, YooEditor, YooptaPathIndex } from '@yoopta/editor';
 
 type Props = {
   editor: YooEditor;
@@ -47,28 +47,42 @@ export const FixedToolbar = ({ editor, DEFAULT_DATA }: Props) => {
           }}
           className="p-2 text-xs shadow-md border-r hover:bg-[#64748b] hover:text-[#fff]"
         >
-          Insert Image
+          {/* Insert Image */}
+          {editor.t('editor.blockOptions.turnInto') || 'Turn into'}
         </button>
         <button
           type="button"
           onClick={() => {
             const at: YooptaPathIndex = typeof editor.path.current ? editor.path.current : 2;
-            console.log('toggleBlock at', at);
-            editor.toggleBlock('Blockquote', { at: at, focus: true });
+            editor.toggleBlock('Blockquote', { at, focus: true });
           }}
           className="p-2 text-xs shadow-md border-r hover:bg-[#64748b] hover:text-[#fff]"
         >
-          Toggle into Blockquote
+          {/* Toggle into Blockquote */}
+          {editor.t('toggle.into.blockquote') || 'Toggle into Blockquote'}
         </button>
+        <div className="flex flex-col px-2">
+          <span>Languages</span>
+          <div className="flex">
+            {editor.languages.map((lang) => {
+              const isCurrent = lang === editor.language;
+
+              return (
+                <button
+                  key={lang}
+                  className={`text-xs cursor-pointer shadow-md border-0 p-2 ${isCurrent ? 'bg-blue-500' : ''}`}
+                  onClick={() => editor.setLanguage(lang)}
+                >
+                  {lang}
+                </button>
+              );
+            })}
+          </div>
+        </div>
         <button
           type="button"
           onClick={() => {
             editor.batchOperations(() => {
-              const calloutElement = CalloutCommands.buildCalloutElements(editor, {
-                text: 'Heading with text',
-                props: { theme: 'warning' },
-              });
-
               CalloutCommands.insertCallout(editor, {
                 at: 1,
                 focus: true,
@@ -77,18 +91,12 @@ export const FixedToolbar = ({ editor, DEFAULT_DATA }: Props) => {
               });
 
               TodoListCommands.insertTodoList(editor, {
-                at: 1,
+                at: 2,
                 focus: true,
                 props: { checked: true },
                 text: 'Todo list',
               });
             });
-
-            // editor.insertBlock('Callout', {
-            //   at: 1,
-            //   focus: true,
-            //   blockData: { value: [calloutElement] },
-            // });
           }}
           className="p-2 text-xs shadow-md border-r hover:bg-[#64748b] hover:text-[#fff]"
         >
diff --git a/packages/development/src/locales/cz.json b/packages/development/src/locales/cz.json
new file mode 100644
index 000000000..1c2757ebb
--- /dev/null
+++ b/packages/development/src/locales/cz.json
@@ -0,0 +1,146 @@
+{
+  "editor": {
+    "blockOptions": {
+      "delete": "Smazat",
+      "duplicate": "Duplikovat",
+      "turnInto": "Převést na",
+      "copyBlockLink": "Kopírovat odkaz na blok"
+    },
+    "placeholder": "Zadejte '/' pro příkazy"
+  },
+  "plugins": {
+    "Paragraph": {
+      "display": {
+        "title": "Odstavec",
+        "description": "Textový odstavec"
+      }
+    },
+    "Blockquote": {
+      "display": {
+        "title": "Citace",
+        "description": "Bloková citace"
+      }
+    },
+    "Callout": {
+      "display": {
+        "title": "Výzva",
+        "description": "Blokové volání"
+      },
+      "options": {
+        "theme": {
+          "default": "Výchozí",
+          "success": "Úspěch",
+          "warning": "Varování",
+          "error": "Nebezpečí",
+          "info": "Informace"
+        }
+      }
+    },
+    "Accordion": {
+      "display": {
+        "title": "Akordeon",
+        "description": "Blokový akordeon"
+      }
+    },
+    "BulletedList": {
+      "display": {
+        "title": "Seznam s odrážkami",
+        "description": "Seznam s odrážkami"
+      }
+    },
+    "NumberedList": {
+      "display": {
+        "title": "Číslovaný seznam",
+        "description": "Číslovaný seznam"
+      }
+    },
+    "TodoList": {
+      "display": {
+        "title": "Seznam úkolů",
+        "description": "Seznam úkolů"
+      }
+    },
+    "Image": {
+      "display": {
+        "title": "Obrázek",
+        "description": "Obrázek"
+      }
+    },
+    "Video": {
+      "display": {
+        "title": "Video",
+        "description": "Video"
+      }
+    },
+    "File": {
+      "display": {
+        "title": "Soubor",
+        "description": "Soubor ke stažení"
+      }
+    },
+    "Table": {
+      "display": {
+        "title": "Tabulka",
+        "description": "Tabulka"
+      },
+      "options": {
+        "toggleHeaderRow": "Přepnout řádek záhlaví",
+        "toggleHeaderColumn": "Přepnout sloupec záhlaví"
+      }
+    },
+    "Code": {
+      "display": {
+        "title": "Kód",
+        "description": "Blokový kód"
+      }
+    },
+    "Divider": {
+      "display": {
+        "title": "Oddělovač",
+        "description": "Oddělovač"
+      }
+    },
+    "HeadingOne": {
+      "display": {
+        "title": "Nadpis 1",
+        "description": "Nadpis 1. úrovně"
+      }
+    },
+    "HeadingTwo": {
+      "display": {
+        "title": "Nadpis 2",
+        "description": "Nadpis 2. úrovně"
+      }
+    },
+    "HeadingThree": {
+      "display": {
+        "title": "Nadpis 3",
+        "description": "Nadpis 3. úrovně"
+      }
+    }
+  },
+  "tools": {
+    "toolbar": {
+      "highlightColor": {
+        "text": "Text",
+        "background": "Pozadí",
+        "customColor": "Vlastní barva"
+      },
+      "linkTitle": "Odkaz"
+    },
+    "link": {
+      "target": "Target",
+      "rel": "Rel",
+      "update": "Obnovit",
+      "add": "Pridat",
+      "delete": "Smazat",
+      "url": "URL",
+      "title": "Titul",
+      "additionalProps": "Další vlastnosti",
+      "titlePlaceholder": "Upravit titul odkazu",
+      "urlPlaceholder": "Upravit URL odkazu",
+      "targetPlaceholder": "Upravit cíl odkazu",
+      "relPlaceholder": "Upravit rel odkazu"
+    }
+  }
+}
diff --git a/packages/development/src/locales/es.json b/packages/development/src/locales/es.json
new file mode 100644
index 000000000..347b504f1
--- /dev/null
+++ b/packages/development/src/locales/es.json
@@ -0,0 +1,261 @@
+{
+  "plugins": {
+    "Paragraph": {
+      "display": {
+        "title": "Párrafo",
+        "description": "Párrafo de texto"
+      }
+    },
+    "Blockquote": {
+      "display": {
+        "title": "Cita",
+        "description": "Bloque de cita"
+      }
+    },
+    "Callout": {
+      "display": {
+        "title": "Llamada",
+        "description": "Bloque de llamada"
+      },
+      "options": {
+        "theme": {
+          "default": "Por defecto",
+          "success": "Éxito",
+          "warning": "Advertencia",
+          "error": "Peligro",
+          "info": "Información"
+        }
+      }
+    },
+    "Accordion": {
+      "display": {
+        "title": "Acordeón",
+        "description": "Bloque de acordeón"
+      }
+    },
+    "BulletedList": {
+      "display": {
+        "title": "Lista con viñetas",
+        "description": "Lista con viñetas"
+      }
+    },
+    "NumberedList": {
+      "display": {
+        "title": "Lista numerada",
+        "description": "Lista numerada"
+      }
+    },
+    "TodoList": {
+      "display": {
+        "title": "Lista de tareas",
+        "description": "Lista de tareas"
+      }
+    },
+    "Image": {
+      "display": {
+        "title": "Imagen",
+        "description": "Imagen"
+      },
+      "options": {
+        "replaceImage": "Reemplazar",
+        "downloadImage": "Descargar",
+        "align": "Aligniore",
+        "placeholder": {
+          "title": "Título de la imagen",
+          "loading": "Cargando",
+          "upload": {
+            "label": "Subir imagen"
+          },
+          "external": {
+            "label": "URL de la imagen",
+            "placeholder": "Introduce la URL de la imagen",
+            "button": "Insertar"
+          }
+        },
+        "fit": {
+          "contain": "Contener",
+          "cover": "Cubrir",
+          "fill": "Rellenar"
+        },
+        "alt": {
+          "title": "Texto alternativo",
+          "label": "Texto alternativo",
+          "placeholder": "Editar texto alternativo",
+          "delete": "Eliminar texto alternativo",
+          "save": "Guardar"
+        }
+      }
+    },
+    "Video": {
+      "display": {
+        "title": "Vídeo",
+        "description": "Vídeo"
+      },
+      "options": {
+        "replaceVideo": "Reemplazar",
+        "downloadVideo": "Descargar",
+        "addPosterVideo": "Añadir imagen de portada",
+        "replacePosterVideo": "Reemplazar imagen de portada",
+        "openVideo": "Abrir imagen",
+        "align": "Aligniore",
+        "fit": {
+          "contain": "Contener",
+          "cover": "Cubrir",
+          "fill": "Rellenar"
+        },
+        "placeholder": {
+          "title": "Título del vídeo",
+          "loading": "Cargando",
+          "upload": {
+            "label": "Subir vídeo"
+          },
+          "external": {
+            "label": "URL del vídeo",
+            "placeholder": "Introduce la URL del vídeo",
+            "button": "Insertar"
+          }
+        }
+      }
+    },
+    "File": {
+      "display": {
+        "title": "Archivo",
+        "description": "Archivo para descargar"
+      },
+      "options": {
+        "replaceFile": "Reemplazar",
+        "downloadFile": "Descargar",
+        "openFile": "Abrir archivo",
+        "align": "Aligniore",
+        "placeholder": {
+          "title": "Título del archivo",
+          "loading": "Cargando",
+          "upload": {
+            "label": "Subir archivo"
+          },
+          "external": {
+            "label": "URL del archivo",
+            "placeholder": "Introduce la URL del archivo",
+            "button": "Insertar"
+          }
+        }
+      }
+    },
+    "Embed": {
+      "display": {
+        "title": "Incrustar",
+        "description": "Incrustar"
+      },
+      "options": {
+        "replaceEmbed": "Reemplazar",
+        "openEmbed": "Abrir incrustado",
+        "align": "Aligniore",
+        "placeholder": {
+          "title": "Título del incrustado",
+          "loading": "Cargando",
+          "upload": {
+            "label": "Subir incrustado"
+          },
+          "external": {
+            "label": "URL del incrustado",
+            "placeholder": "Introduce la URL del incrustado",
+            "button": "Insertar"
+          }
+        }
+      }
+    },
+    "Table": {
+      "display": {
+        "title": "Tabla",
+        "description": "Tabla"
+      },
+      "options": {
+        "toggleHeaderRow": "Alternar fila de encabezado",
+        "toggleHeaderColumn": "Alternar columna de encabezado",
+        "rowOptions": {
+          "insertAbove": "Insertar fila arriba",
+          "insertBelow": "Insertar fila abajo",
+          "moveUp": "Mover fila arriba",
+          "moveDown": "Mover fila abajo",
+          "delete": "Eliminar fila"
+        },
+        "columnOptions": {
+          "insertLeft": "Insertar columna a la izquierda",
+          "insertRight": "Insertar columna a la derecha",
+          "moveLeft": "Mover columna a la izquierda",
+          "moveRight": "Mover columna a la derecha",
+          "delete": "Eliminar columna"
+        }
+      }
+    },
+    "Code": {
+      "display": {
+        "title": "Código",
+        "description": "Bloque de código"
+      },
+      "options": {
+        "language": "Lenguaje",
+        "theme": "Tema",
+        "copyCode": "Copiar código",
+        "copyCodeSuccess": "Código copiado"
+      }
+    },
+    "Divider": {
+      "display": {
+        "title": "Separador",
+        "description": "Separador"
+      }
+    },
+    "HeadingOne": {
+      "display": {
+        "title": "Título 1",
+        "description": "Título de primer nivel"
+      }
+    },
+    "HeadingTwo": {
+      "display": {
+        "title": "Título 2",
+        "description": "Título de segundo nivel"
+      }
+    },
+    "HeadingThree": {
+      "display": {
+        "title": "Título 3",
+        "description": "Título de tercer nivel"
+      }
+    }
+  },
+  "editor": {
+    "blockOptions": {
+      "delete": "Borrar",
+      "duplicate": "Duplicar",
+      "turnInto": "Convertir en",
+      "copyBlockLink": "Copiar enlace al bloque"
+    },
+    "placeholder": "Escribe '/' para comandos"
+  },
+  "tools": {
+    "toolbar": {
+      "highlightColor": {
+        "text": "Texto",
+        "background": "Fondo",
+        "customColor": "Color personalizado"
+      },
+      "linkTitle": "Enlace"
+    },
+    "link": {
+      "target": "Objetivo del enlace",
+      "rel": "Relación del enlace",
+      "update": "Actualizar",
+      "add": "Añadir",
+      "delete": "Eliminar enlace",
+      "url": "URL",
+      "title": "Título",
+      "additionalProps": "Propiedades adicionales",
+      "titlePlaceholder": "Editar título del enlace",
+      "urlPlaceholder": "Editar URL del enlace",
+      "targetPlaceholder": "Editar objetivo del enlace",
+      "relPlaceholder": "Editar relación del enlace"
+    }
+  }
+}
diff --git a/packages/development/src/locales/ru.json b/packages/development/src/locales/ru.json
new file mode 100644
index 000000000..e61879c86
--- /dev/null
+++ b/packages/development/src/locales/ru.json
@@ -0,0 +1,147 @@
+{
+  "editor": {
+    "blockOptions": {
+      "delete": "Удалить",
+      "duplicate": "Дублировать",
+      "turnInto": "Преобразовать в",
+      "copyBlockLink": "Скопировать ссылку на блок"
+    },
+    "placeholder": "Введите '/' для команд"
+  },
+  "plugins": {
+    "Paragraph": {
+      "display": {
+        "title": "Параграф",
+        "description": "Текстовый параграф"
+      }
+    },
+    "Blockquote": {
+      "display": {
+        "title": "Цитата",
+        "description": "Цитата блока"
+      }
+    },
+    "Callout": {
+      "display": {
+        "title": "Вызов",
+        "description": "Блок вызова"
+      },
+      "options": {
+        "theme": {
+          "default": "По умолчанию",
+          "warning": "Предупреждение",
+          "success": "Успех",
+          "error": "Опасность",
+          "info": "Информация"
+        }
+      }
+    },
+    "Accordion": {
+      "display": {
+        "title": "Аккордеон",
+        "description": "Блок аккордеона"
+      }
+    },
+    "BulletedList": {
+      "display": {
+        "title": "Маркированный список",
+        "description": "Маркированный список"
+      }
+    },
+    "NumberedList": {
+      "display": {
+        "title": "Нумерованный список",
+        "description": "Нумерованный список"
+      }
+    },
+    "TodoList": {
+      "display": {
+        "title": "Список задач",
+        "description": "Список задач"
+      }
+    },
+    "Image": {
+      "display": {
+        "title": "Изображение",
+        "description": "Изображение"
+      }
+    },
+    "Video": {
+      "display": {
+        "title": "Видео",
+        "description": "Видео"
+      }
+    },
+    "File": {
+      "display": {
+        "title": "Файл",
+        "description": "Файл для скачивания"
+      }
+    },
+    "Table": {
+      "display": {
+        "title": "Таблица",
+        "description": "Таблица"
+      },
+      "options": {
+        "toggleHeaderRow": "Переключить строку заголовка",
+        "toggleHeaderColumn": "Переключить столбец заголовка"
+      }
+    },
+    "Code": {
+      "display": {
+        "title": "Код",
+        "description": "Блок кода"
+      }
+    },
+    "Divider": {
+      "display": {
+        "title": "Разделитель",
+        "description": "Разделитель"
+      }
+    },
+    "HeadingOne": {
+      "display": {
+        "title": "Заголовок 1",
+        "description": "Заголовок 1 уровня"
+      }
+    },
+    "HeadingTwo": {
+      "display": {
+        "title": "Заголовок 2",
+        "description": "Заголовок 2 уровня"
+      }
+    },
+    "HeadingThree": {
+      "display": {
+        "title": "Заголовок 3",
+        "description": "Заголовок 3 уровня"
+      }
+    }
+  },
+  "tools": {
+    "toolbar": {
+      "highlightColor": {
+        "text": "Текст",
+        "background": "Фон",
+        "customColor": "Пользовательский цвет"
+      },
+      "linkTitle": "Ссылка"
+    },
+    "link": {
+      "target": "Цель ссылки",
+      "rel": "Рел",
+      "update": "Обновить",
+      "add": "Добавить",
+      "delete": "Удалить ссылку",
+      "edit": "Редактировать",
+      "url": "URL",
+      "title": "Заголовок",
+      "additionalProps": "Дополнительные свойства",
+      "titlePlaceholder": "Изменить заголовок ссылки",
+      "urlPlaceholder": "Изменить URL ссылки",
+      "targetPlaceholder": "Изменить цель ссылки",
+      "relPlaceholder": "Изменить rel ссылки"
+    }
+  }
+}
diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx
index f4c07464f..7b4f2f6f5 100644
--- a/packages/development/src/pages/dev/index.tsx
+++ b/packages/development/src/pages/dev/index.tsx
@@ -1,794 +1,50 @@
+import { useMemo, useRef, useState } from 'react';
 import YooptaEditor, {
-  Blocks,
-  createYooptaEditor,
-  generateId,
   YooptaOnChangeOptions,
-  YooEditor,
-  YooptaBlockData,
   YooptaContentValue,
   YooptaPath,
+  createYooptaEditor,
 } from '@yoopta/editor';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { I18nYooEditor, withTranslations } from '@yoopta/i18n';
+
+import { MARKS } from '@/utils/yoopta/marks';
+import { YOOPTA_PLUGINS } from '@/utils/yoopta/plugins';
+import { TOOLS } from '@/utils/yoopta/tools';
+import { FixedToolbar } from '@/components/FixedToolbar/FixedToolbar';
+import { YOOPTA_DEFAULT_VALUE } from '@/utils/yoopta/value';
 
-import { MARKS } from '../../utils/yoopta/marks';
-import { YOOPTA_PLUGINS } from '../../utils/yoopta/plugins';
-import { TOOLS } from '../../utils/yoopta/tools';
-import { FixedToolbar } from '../../components/FixedToolbar/FixedToolbar';
+import esTranslations from '@/locales/es.json';
+import ruTranslations from '@/locales/ru.json';
+import czTranslations from '@/locales/cz.json';
 
 const EDITOR_STYLE = {
   width: 750,
 };
 
-const data = {
-  '1e909985-9884-4a43-af3c-6aeb85434645': {
-    id: '1e909985-9884-4a43-af3c-6aeb85434645',
-    type: 'Paragraph',
-    value: [
-      {
-        id: '1645bad8-be71-4b1e-9dda-6bfaefe12228',
-        type: 'paragraph',
-        children: [
-          {
-            text: '👋',
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'We’ve returned with the Medium Newsletter',
-            bold: true,
-          },
-          {
-            text: '\n',
-            bold: true,
-          },
-          {
-            text: 'Issue #187: analyzing tech layoffs and observing without absorbing',
-            italic: true,
-          },
-          {
-            text: '\n',
-            italic: true,
-          },
-          {
-            text: 'By',
-            italic: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            id: 'b95e3bc1-3f17-4434-acc8-9cc37158d177',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/u/7428661d5cfd?source=post_page-----917d3fb90711--------------------------------',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Harris Sockel',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                italic: true,
-                text: 'Harris Sockel',
-              },
-            ],
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 0,
-    },
-  },
-  'cd0d307a-28aa-432a-a454-b53bc2387898': {
-    id: 'cd0d307a-28aa-432a-a454-b53bc2387898',
-    type: 'Paragraph',
-    value: [
-      {
-        id: '3457e8c0-a6cf-4a9c-a443-a4bc9b9f5e52',
-        type: 'paragraph',
-        children: [
-          {
-            text: '“I awoke about 2 a.m. the night of the storm to the sound of small explosions in the street,” writes Asheville resident',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '27d9e455-6e30-49c0-8dce-c92ccad2d66d',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/u/2c55fbba6368?source=post_page-----917d3fb90711--------------------------------',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Doug Brown',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'Doug Brown',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'in a',
-          },
-          {
-            id: '74b96563-849e-4ddf-960d-3c115d9f43fc',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/the-narrative-arc/my-hurricane-helene-strength-training-program-2896fbec15ad?sk=v2%2Fbfe9a41d-a077-4c1f-8b38-519263f1f047',
-              target: '_blank',
-              rel: 'noopener',
-              title: ' story',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: ' ',
-              },
-              {
-                text: 'story',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'about life after Hurricane Helene. “My room kept lighting up in odd colors. I looked out the window and saw sparks flying in all directions in iridescent blues and greens. It would have been beautiful if it were not terrifying.”',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 1,
-    },
-  },
-  '13644386-bac1-4a0a-97ed-b77ba11d3617': {
-    id: '13644386-bac1-4a0a-97ed-b77ba11d3617',
-    type: 'Paragraph',
-    value: [
-      {
-        id: '196f2674-c3aa-4bf0-8889-9da048b6d6bf',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Almost',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: 'f1cc025c-e49f-45d1-9156-dedaa382b65b',
-            type: 'link',
-            props: {
-              url: 'https://www.axios.com/local/raleigh/2024/10/15/nearly-100-people-still-unaccounted-for-in-north-carolina-following-helene',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: '100 people are missing',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: '100 people are missing',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'in North Carolina. Entire towns,',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '35212c50-07d4-4852-bf77-e013d1d0bbce',
-            type: 'link',
-            props: {
-              url: 'https://www.npr.org/sections/the-picture-show/2024/10/02/g-s1-25941/north-carolina-marshall-hot-springs-helene-cleanup',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: 'like Marshall',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'like Marshall',
-              },
-            ],
-          },
-          {
-            text: ', were underwater. Brown and his neighbors still don’t have running water, and when the water does come back they’ll need to boil it. For now, they’re lining up with buckets every few days:',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 3,
-    },
-  },
-  '8553fcf0-6b35-4ec0-896e-71bdd83d66d4': {
-    id: '8553fcf0-6b35-4ec0-896e-71bdd83d66d4',
-    type: 'Blockquote',
-    value: [
-      {
-        id: '8eeebf32-27df-49a8-8758-28466b5a451e',
-        type: 'blockquote',
-        children: [
-          {
-            text: 'I wash myself with a washcloth and splash rubbing alcohol in my armpits, and dream of the day when I can take a shower again. Asheville is kind of a hippie town, but as my friend Molly puts it, “We’re all hippies now.”',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 4,
-    },
-  },
-  '7b9ce3e9-63ef-45fd-8631-1d88f2ab0ce8': {
-    id: '7b9ce3e9-63ef-45fd-8631-1d88f2ab0ce8',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'e55093ba-7201-43b9-b298-2a8a309cd729',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Brown’s story is more human than anything I’ve read about this disaster so far. It makes me feel like I’m there. It’s also an inspiring tribute to humans’ ability to simply keep going when faced with ambiguity, change, and hardship. “Our grief is real,” Brown writes. “But so is our strength.”',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 5,
-    },
-  },
-  '658a6bd7-84d6-47bc-a8b6-049d2b704a5a': {
-    id: '658a6bd7-84d6-47bc-a8b6-049d2b704a5a',
-    type: 'HeadingOne',
-    value: [
-      {
-        id: 'a3cd2fb8-29d1-4f5c-8a68-5d3850367202',
-        type: 'heading-one',
-        children: [
-          {
-            text: 'One more story: analyzing tech layoffs',
-            bold: true,
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 7,
-    },
-  },
-  '2a05404e-be25-45ed-8164-72aa3c73004e': {
-    id: '2a05404e-be25-45ed-8164-72aa3c73004e',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'ef4b1be1-75b8-470e-a343-76c6ce95e047',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Tech’s been in the midst of',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '476466d7-b137-4d94-8c87-5833a6295fa1',
-            type: 'link',
-            props: {
-              url: 'https://www.forbes.com/sites/emilsayegh/2024/08/19/the-great-tech-reset-unpacking-the-layoff-surge-of-2024/',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: 'a recession',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'a recession',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'since the pandemic: According to',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '983df9e2-5703-4bf1-b962-1878a42852dd',
-            type: 'link',
-            props: {
-              url: 'https://layoffs.fyi/',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: 'layoffs.fyi',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'layoffs.fyi',
-              },
-            ],
-          },
-          {
-            text: ', 470 tech companies laid off 141,000 employees in 2024. Those numbers are a bit better than what we saw in 2023 (264K layoffs total), so maybe we’re heading toward brighter days… but it’s unclear.',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 8,
-    },
-  },
-  '05c71273-3a54-434f-b898-d03c3d677b92': {
-    id: '05c71273-3a54-434f-b898-d03c3d677b92',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'ce8140a2-6e31-4f76-88a8-dfaf277151a2',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Analytics and experimentation director',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '1bc11372-e446-4211-a6de-5850565a5599',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/u/9f03ad274fc9?source=post_page-----917d3fb90711--------------------------------',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Bhavik Patel',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'Bhavik Patel',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '1d7fec86-e06a-4fa6-bb97-b26ea3e956d9',
-            type: 'link',
-            props: {
-              url: 'https://productcoalition.com/analysing-tech-layoffs-c67d7de2d630?sk=v2%2F4b54f1dc-d0bf-4893-97a4-0cb1af48da51',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: 'analyzed a dataset of 2,800 layoffs',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'analyzed a dataset of 2,800 layoffs',
-              },
-            ],
-          },
-          {
-            text: ' ',
-          },
-          {
-            text: 'and tried to — as objectively as possible — figure out which roles have been impacted most. He found that product and design roles are more likely to be impacted than roles in engineering or data analytics:',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 9,
-    },
-  },
-  'd39aee72-6962-4fad-993a-44c238f38bfb': {
-    id: 'd39aee72-6962-4fad-993a-44c238f38bfb',
-    type: 'HeadingOne',
-    value: [
-      {
-        id: '1c3f5b12-7e11-4569-bfeb-ce677af0e2aa',
-        type: 'heading-one',
-        children: [
-          {
-            text: 'Your daily dose of practical wisdom',
-            bold: true,
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 10,
-    },
-  },
-  '8bd49616-ca7d-42a6-a94f-5e9426104d43': {
-    id: '8bd49616-ca7d-42a6-a94f-5e9426104d43',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'b24b76ac-104c-46fd-b6ac-a199420e4940',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Observe but',
-          },
-          {
-            text: ' ',
-          },
-          {
-            id: '38dcabf8-4b45-40b5-ae44-707bcf706400',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/@lynwrites_/the-art-of-observing-and-not-absorbing-f1b1e8e0edea',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'don’t absorb',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                text: 'don’t absorb',
-              },
-            ],
-          },
-          {
-            text: '.',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 11,
-    },
-  },
-  '2d1864ca-b07f-48af-99bb-c586d5a323a4': {
-    id: '2d1864ca-b07f-48af-99bb-c586d5a323a4',
-    type: 'Paragraph',
-    value: [
-      {
-        id: '1190c5be-0806-4dc9-8cda-c449c9eac6e0',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Deepen your understanding every day with the Medium Newsletter.',
-            italic: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            id: '7dc2478c-257c-4904-be16-7f3cbef0adf0',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/blog/newsletters/medium-daily-edition',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Sign up here',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                italic: true,
-                text: 'Sign up here',
-              },
-            ],
-          },
-          {
-            text: '.',
-            italic: true,
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 12,
-    },
-  },
-  'f18c857a-5d46-43c5-9340-91851ff117a9': {
-    id: 'f18c857a-5d46-43c5-9340-91851ff117a9',
-    type: 'Paragraph',
-    value: [
-      {
-        id: '4074ac21-06f5-414a-8f8a-8a255c2f5f91',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Edited and produced by',
-            italic: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            id: '12331781-e152-4d8a-a57d-850875a156b6',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/u/11ba4fd53be0?source=post_page-----917d3fb90711--------------------------------',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Scott Lamb',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                italic: true,
-                text: 'Scott Lamb',
-              },
-            ],
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            text: '&',
-            italic: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            id: '762be1c6-57b3-4342-bcf5-54c11dcdde18',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/u/3c6a3fa3a112?source=post_page-----917d3fb90711--------------------------------',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'Carly Rose Gillis',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                italic: true,
-                text: 'Carly Rose Gillis',
-              },
-            ],
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 13,
-    },
-  },
-  'ce68a7e4-4692-45cd-b9d4-37434ac1970c': {
-    id: 'ce68a7e4-4692-45cd-b9d4-37434ac1970c',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'cbe311f6-47ba-4ab3-bb77-c8e7ad21ed15',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Questions, feedback, or story suggestions? Email us:',
-            italic: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-          },
-          {
-            id: 'd6631a7e-77c6-40fb-ac6d-52d41a48d892',
-            type: 'link',
-            props: {
-              url: 'mailto:tips@medium.com',
-              target: '_blank',
-              rel: 'noopener ugc nofollow',
-              title: 'tips@medium.com',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                italic: true,
-                text: 'tips@medium.com',
-              },
-            ],
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 14,
-    },
-  },
-  '7025b887-a746-42dd-9d37-56253dce4e96': {
-    id: '7025b887-a746-42dd-9d37-56253dce4e96',
-    type: 'Paragraph',
-    value: [
-      {
-        id: 'e46ac801-0bc2-455a-9138-ef5e141e4845',
-        type: 'paragraph',
-        children: [
-          {
-            text: 'Read without limits or ads, fund great writers, and join a community that believes in human storytelling with',
-            italic: true,
-            bold: true,
-          },
-          {
-            text: ' ',
-            italic: true,
-            bold: true,
-          },
-          {
-            id: '19554e2b-180a-461e-b287-98416f7f30d4',
-            type: 'link',
-            props: {
-              url: 'https://medium.com/membership',
-              target: '_blank',
-              rel: 'noopener',
-              title: 'membership',
-              nodeType: 'inline',
-            },
-            children: [
-              {
-                bold: true,
-                italic: true,
-                text: 'membership',
-              },
-            ],
-          },
-          {
-            text: '.',
-            italic: true,
-            bold: true,
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 15,
-    },
-  },
-  '4f6904fb-218a-4936-8cf5-c79977c7507d': {
-    id: '4f6904fb-218a-4936-8cf5-c79977c7507d',
-    type: 'Image',
-    meta: {
-      align: 'center',
-      depth: 0,
-      order: 6,
-    },
-    value: [
-      {
-        id: '64c3ca6e-c2c0-4ddd-8d01-2b9eab9d82b6',
-        type: 'image',
-        props: {
-          src: 'https://res.cloudinary.com/ench-app/image/upload/v1729177867/Screenshot_2024-10-16_at_20.19.51_px95za.png',
-          srcSet: null,
-          bgColor: null,
-          fit: 'contain',
-          sizes: {
-            width: 360,
-            height: 360,
-          },
-          nodeType: 'void',
-        },
-        children: [
-          {
-            text: '',
-          },
-        ],
-      },
-    ],
-  },
-  'cebaef69-b9e3-40da-9a5d-95d04833b4bd': {
-    id: 'cebaef69-b9e3-40da-9a5d-95d04833b4bd',
-    type: 'Code',
-    meta: {
-      align: 'left',
-      depth: 0,
-      order: 2,
-    },
-    value: [
-      {
-        id: '79113023-1cb0-465b-8bea-f912606326f5',
-        type: 'code',
-        props: {
-          nodeType: 'void',
-          language: 'javascript',
-          theme: 'GithubDark',
-        },
-        children: [
-          {
-            text: " const nextParentPathIndex = parentPath[0] + 1;\n    const nextBlockSlateValue = slate.children[nextParentPathIndex] as SlateElement;\n\n    Transforms.removeNodes(slate, {\n      at: [nextParentPathIndex],\n      match: (n) => Element.isElement(n),\n      mode: 'highest',\n    });\n\n    operations.push({\n      type: 'split_block',\n      prevProperties: blockToSplit,\n      properties: nextNewBlock,\n      slate: newSlate,\n    });\n}",
-          },
-        ],
-      },
-    ],
-  },
+const TRANSLATIONS = {
+  es: esTranslations,
+  ru: ruTranslations,
+  cz: czTranslations,
+};
+
+const TRANSLATION_OPTIONS = {
+  translations: TRANSLATIONS,
+  defaultLanguage: 'en',
+  language: 'en',
 };
 
 const BasicExample = () => {
-  const editor: YooEditor = useMemo(() => createYooptaEditor(), []);
+  const editor = useMemo(() => {
+    const baseEditor = createYooptaEditor();
+    return withTranslations(baseEditor, {
+      translations: TRANSLATIONS,
+      language: 'es',
+      defaultLanguage: 'es',
+    });
+  }, []);
+
   const selectionRef = useRef<HTMLDivElement>(null);
-  const [value, setValue] = useState<YooptaContentValue>(data);
+  const [value, setValue] = useState<YooptaContentValue>(YOOPTA_DEFAULT_VALUE);
 
   const onChange = (value: YooptaContentValue, options: YooptaOnChangeOptions) => {
     console.log('onChange', value, options);
@@ -797,32 +53,22 @@ const BasicExample = () => {
 
   const onPathChange = (path: YooptaPath) => {};
 
-  // useEffect(() => {
-  //   editor.withoutSavingHistory(() => {
-  //     const id = generateId();
-
-  //     editor.setEditorValue(data as YooptaContentValue);
-  //     editor.focusBlock(id);
-  //   });
-  // }, []);
-
   return (
     <>
       <div className="px-[100px] max-w-[900px] mx-auto my-10 flex flex-col items-center" ref={selectionRef}>
-        <FixedToolbar editor={editor} DEFAULT_DATA={data} />
+        <FixedToolbar editor={editor} DEFAULT_DATA={YOOPTA_DEFAULT_VALUE} />
         <YooptaEditor
           editor={editor}
           plugins={YOOPTA_PLUGINS}
           selectionBoxRoot={selectionRef}
           marks={MARKS}
-          autoFocus={true}
-          readOnly={false}
-          placeholder="Type / to open menu"
           tools={TOOLS}
           style={EDITOR_STYLE}
           value={value}
           onChange={onChange}
           onPathChange={onPathChange}
+          autoFocus={true}
+          readOnly={false}
         />
       </div>
     </>
diff --git a/packages/development/src/utils/yoopta/value.ts b/packages/development/src/utils/yoopta/value.ts
new file mode 100644
index 000000000..a01004cad
--- /dev/null
+++ b/packages/development/src/utils/yoopta/value.ts
@@ -0,0 +1,453 @@
+import { YooptaContentValue } from '@yoopta/editor';
+
+export const YOOPTA_DEFAULT_VALUE = {
+  '57698bb7-0423-4fe3-ba99-9239932607b6': {
+    id: '57698bb7-0423-4fe3-ba99-9239932607b6',
+    type: 'Image',
+    meta: {
+      depth: 0,
+      order: 0,
+    },
+    value: [
+      {
+        id: 'e90dc167-f7bc-4642-bbf1-e184d1c6a96c',
+        type: 'image',
+        props: {
+          src: 'https://res.cloudinary.com/ench-app/image/upload/v1738182679/Screenshot_2025-01-28_at_23.37.25_rhqvnn.png',
+          srcSet: null,
+          bgColor: null,
+          fit: 'contain',
+          sizes: {
+            width: 300,
+            height: 270,
+          },
+          nodeType: 'void',
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+  '960b5b62-5923-4be1-964d-9ffaa366b763': {
+    id: '960b5b62-5923-4be1-964d-9ffaa366b763',
+    type: 'Image',
+    meta: {
+      depth: 0,
+      order: 2,
+    },
+    value: [
+      {
+        id: '1df0b742-e784-40b0-8bff-fbc60b1efef3',
+        type: 'image',
+        props: {
+          src: null,
+          alt: 'cloudinary',
+          srcSet: null,
+          bgColor: null,
+          fit: 'contain',
+          sizes: {
+            width: 500,
+            height: 500,
+          },
+          nodeType: 'void',
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+  'a7e928aa-4b76-401d-b5a1-c9e5245da211': {
+    id: 'a7e928aa-4b76-401d-b5a1-c9e5245da211',
+    type: 'Video',
+    meta: {
+      depth: 0,
+      order: 3,
+    },
+    value: [
+      {
+        id: 'ead87308-6cb8-4ed1-bc2a-f0986e18af16',
+        type: 'video',
+        props: {
+          src: null,
+          srcSet: null,
+          bgColor: null,
+          sizes: {
+            width: 650,
+            height: 400,
+          },
+          nodeType: 'void',
+          fit: 'contain',
+          provider: {
+            type: null,
+            id: '',
+          },
+          settings: {
+            controls: true,
+            loop: true,
+            muted: true,
+            playsInline: true,
+          },
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+  'dade4ec6-0777-47de-93fa-26457c88d81f': {
+    id: 'dade4ec6-0777-47de-93fa-26457c88d81f',
+    type: 'Video',
+    meta: {
+      depth: 0,
+      order: 4,
+    },
+    value: [
+      {
+        id: '9ff9fde4-a0fb-421f-a177-739c60d5374b',
+        type: 'video',
+        props: {
+          src: 'https://res.cloudinary.com/ench-app/video/upload/v1738182712/redo_undo_tnqgn4.mp4',
+          srcSet: null,
+          bgColor: null,
+          sizes: {
+            width: 300,
+            height: 254,
+          },
+          nodeType: 'void',
+          fit: 'cover',
+          provider: {
+            type: null,
+            id: '',
+          },
+          settings: {
+            controls: true,
+            loop: true,
+            muted: true,
+            playsInline: true,
+          },
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+  'd9d2c20c-281b-4d7d-be76-17f12007a909': {
+    id: 'd9d2c20c-281b-4d7d-be76-17f12007a909',
+    type: 'Code',
+    meta: {
+      depth: 0,
+      order: 5,
+    },
+    value: [
+      {
+        id: 'c94d6155-3bc0-40f0-a580-c2fecd525551',
+        type: 'code',
+        props: {
+          nodeType: 'void',
+          language: 'javascript',
+          theme: 'GithubDark',
+        },
+        children: [
+          {
+            text: 'const TRANSLATIONS = {\n  es: esTranslations,\n  ru: ruTranslations,\n  cz: czTranslations,\n};',
+          },
+        ],
+      },
+    ],
+  },
+  '4d2ac05e-ce77-4f4b-a2c3-6a49beb03d5e': {
+    id: '4d2ac05e-ce77-4f4b-a2c3-6a49beb03d5e',
+    type: 'File',
+    meta: {
+      depth: 0,
+      order: 6,
+    },
+    value: [
+      {
+        id: '52b23a16-5a71-483d-ae64-a7e4479bd65d',
+        type: 'file',
+        children: [
+          {
+            text: '',
+          },
+        ],
+        props: {
+          nodeType: 'void',
+        },
+      },
+    ],
+  },
+  'db494311-71ab-413c-9afc-0a32a9e8e0f4': {
+    id: 'db494311-71ab-413c-9afc-0a32a9e8e0f4',
+    type: 'File',
+    meta: {
+      depth: 0,
+      order: 7,
+    },
+    value: [
+      {
+        id: 'eef7cd9e-0571-4c4d-abc7-0016307838b4',
+        type: 'file',
+        children: [
+          {
+            text: '',
+          },
+        ],
+        props: {
+          nodeType: 'void',
+          src: 'https://res.cloudinary.com/ench-app/image/upload/v1738182765/c0dc98f5-da0b-430a-b9b4-144f9a25b3b9_rqcqcc_i98khp.webp',
+          name: 'c0dc98f5-da0b-430a-b9b4-144f9a25b3b9_rqcqcc',
+          size: 452118,
+          format: 'webp',
+        },
+      },
+    ],
+  },
+  'e0b5ceec-7a13-4fc1-9d79-d99598e432b0': {
+    id: 'e0b5ceec-7a13-4fc1-9d79-d99598e432b0',
+    type: 'Table',
+    meta: {
+      depth: 0,
+      order: 8,
+    },
+    value: [
+      {
+        id: '6a7cf5e0-6832-47c0-ac6f-8a2e46ccbcc7',
+        type: 'table',
+        children: [
+          {
+            id: '12fe4a20-f198-4939-ad6a-9914a1cfd2be',
+            type: 'table-row',
+            children: [
+              {
+                id: '0ad7ab1d-36c0-4fa6-b591-f9577f0ff900',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: 'f58ca64b-a5db-4da5-9f52-b3ccded82a21',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: 'ab850cf5-5792-4d99-882f-414c5007481a',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+            ],
+          },
+          {
+            id: 'c1035b72-2989-4ee5-809d-1f7f5df4ca01',
+            type: 'table-row',
+            children: [
+              {
+                id: '4e13ccc0-d8a9-4a55-a74b-b44fbb4ea062',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: '814a7626-6670-4531-822b-1819011a295c',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: '22f5c2d1-0e5e-4117-a6bc-ddf95c21985b',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+            ],
+          },
+          {
+            id: '7579efa1-a2f2-4180-a625-403a677c5ace',
+            type: 'table-row',
+            children: [
+              {
+                id: '400f21e4-53d5-43d5-b399-ed7a62aab6e4',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: 'ad703612-0579-4a18-b57a-87db60c26096',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+              {
+                id: '92559eae-5051-4115-ac13-d3ef302465fc',
+                type: 'table-data-cell',
+                children: [
+                  {
+                    text: '',
+                  },
+                ],
+                props: {
+                  width: 200,
+                  asHeader: false,
+                },
+              },
+            ],
+          },
+        ],
+        props: {
+          headerColumn: false,
+          headerRow: false,
+        },
+      },
+    ],
+  },
+  'b3764506-595c-462c-8894-e22ebdb3648e': {
+    id: 'b3764506-595c-462c-8894-e22ebdb3648e',
+    type: 'Embed',
+    meta: {
+      depth: 0,
+      order: 9,
+    },
+    value: [
+      {
+        id: '8c7d5fb3-19e0-4a4f-b0f9-ae734733902e',
+        type: 'embed',
+        props: {
+          sizes: {
+            width: 650,
+            height: 500,
+          },
+          nodeType: 'void',
+        },
+        children: [
+          {
+            text: '/',
+          },
+        ],
+      },
+    ],
+  },
+  '61fe46ec-8fa8-448d-9c80-5f214917a2fa': {
+    id: '61fe46ec-8fa8-448d-9c80-5f214917a2fa',
+    type: 'Embed',
+    meta: {
+      depth: 0,
+      order: 10,
+    },
+    value: [
+      {
+        id: '57c87971-7f6c-4d47-ae44-ff7e03dfbcb5',
+        type: 'embed',
+        props: {
+          sizes: {
+            width: 650,
+            height: 500,
+          },
+          nodeType: 'void',
+          provider: {
+            type: 'youtube',
+            id: 'KMigxkYhVHc',
+            url: 'https://www.youtube.com/watch?v=KMigxkYhVHc&ab_channel=DW%D0%BD%D0%B0%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%BE%D0%BC',
+          },
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+  '112cb135-09c8-4c1e-85e4-c3c40ff339a3': {
+    id: '112cb135-09c8-4c1e-85e4-c3c40ff339a3',
+    type: 'Divider',
+    meta: {
+      depth: 0,
+      order: 1,
+    },
+    value: [
+      {
+        id: '3d3cf3ba-8c77-46ea-bef3-04a29ca82cc7',
+        type: 'divider',
+        props: {
+          nodeType: 'void',
+          theme: 'solid',
+          color: '#8383e0',
+        },
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ],
+  },
+} as YooptaContentValue;
diff --git a/packages/development/src/yoopta.d.ts b/packages/development/src/yoopta.d.ts
new file mode 100644
index 000000000..41b4da57c
--- /dev/null
+++ b/packages/development/src/yoopta.d.ts
@@ -0,0 +1,8 @@
+import { YooEditor } from '@yoopta/editor';
+import { I18nYooEditor } from '@yoopta/i18n';
+
+declare module '@yoopta/editor' {
+  interface CustomTypes {
+    Editor: YooEditor & I18nYooEditor;
+  }
+}
diff --git a/packages/plugins/callout/src/ui/CalloutBlockOptions.tsx b/packages/plugins/callout/src/ui/CalloutBlockOptions.tsx
index 7504f6494..fb538bff6 100644
--- a/packages/plugins/callout/src/ui/CalloutBlockOptions.tsx
+++ b/packages/plugins/callout/src/ui/CalloutBlockOptions.tsx
@@ -51,7 +51,7 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
                 color={CALLOUT_THEME_STYLES.default.color}
                 className="yoo-callout-w-4 yoo-callout-h-4 yoo-callout-mr-2"
               />
-              Default
+              {editor.getLabelText('plugins.Callout.options.theme.default') || 'Default'}
             </span>
             {isActiveTheme('default') && (
               <CheckmarkIcon width={16} height={16} color="#000" className="yoo-callout-w-4 yoo-callout-h-4" />
@@ -72,7 +72,8 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
                 color={CALLOUT_THEME_STYLES.info.color}
                 className="yoo-callout-w-4 yoo-callout-h-4 yoo-callout-mr-2"
               />
-              Info
+              {/* Info */}
+              {editor.getLabelText('plugins.Callout.options.theme.info') || 'Info'}
             </span>
             {isActiveTheme('info') && (
               <CheckmarkIcon width={16} height={16} color="#000" className="yoo-callout-w-4 yoo-callout-h-4" />
@@ -95,7 +96,8 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
                 color={CALLOUT_THEME_STYLES.success.color}
                 className="yoo-callout-w-4 yoo-callout-h-4 yoo-callout-mr-2"
               />
-              Success
+              {/* Success */}
+              {editor.getLabelText('plugins.Callout.options.theme.success') || 'Success'}
             </span>
             {isActiveTheme('success') && (
               <CheckmarkIcon width={16} height={16} color="#000" className="yoo-callout-w-4 yoo-callout-h-4" />
@@ -118,7 +120,8 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
                 color={CALLOUT_THEME_STYLES.warning.color}
                 className="yoo-callout-w-4 yoo-callout-h-4 yoo-callout-mr-2"
               />
-              Warning
+              {/* Warning */}
+              {editor.getLabelText('plugins.Callout.options.theme.warning') || 'Warning'}
             </span>
             {isActiveTheme('warning') && (
               <CheckmarkIcon width={16} height={16} color="#000" className="yoo-callout-w-4 yoo-callout-h-4" />
@@ -139,7 +142,8 @@ const CalloutBlockOptions = ({ editor, block, props: calloutProps }: Props) => {
                 color={CALLOUT_THEME_STYLES.error.color}
                 className="yoo-callout-w-4 yoo-callout-h-4 yoo-callout-mr-2"
               />
-              Error
+              {/* Error */}
+              {editor.getLabelText('plugins.Callout.options.theme.error') || 'Error'}
             </span>
             {isActiveTheme('error') && (
               <CheckmarkIcon width={16} height={16} color="#000" className="yoo-callout-w-4 yoo-callout-h-4" />
diff --git a/packages/plugins/code/src/ui/CodeBlockOptions.tsx b/packages/plugins/code/src/ui/CodeBlockOptions.tsx
index 5f6472e3a..5af50c64e 100644
--- a/packages/plugins/code/src/ui/CodeBlockOptions.tsx
+++ b/packages/plugins/code/src/ui/CodeBlockOptions.tsx
@@ -27,7 +27,6 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
     // We change it directly in the block because this plugin doesn't have Slate instance
     // because it's a plugin with custom editor
     editor.updateBlock(block.id, { value: [{ ...element, props: { ...element.props, theme } }] });
-    // editor.applyChanges();
   };
 
   const onChangeLanguage = (language: string) => {
@@ -53,7 +52,9 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onCopy}>
             <CopyIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
-            {isCopied ? 'Copied' : 'Copy'}
+            {isCopied
+              ? editor.getLabelText('plugins.Code.options.copyCodeSuccess') || 'Copied'
+              : editor.getLabelText('plugins.Code.options.copyCode') || 'Copy'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
@@ -67,7 +68,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
           >
             <Trigger className="yoopta-block-options-button">
               <ThemeIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
-              Theme
+              {editor.getLabelText('plugins.Code.options.theme') || 'Theme'}
             </Trigger>
           </Select>
         </BlockOptionsMenuItem>
@@ -85,7 +86,7 @@ export const CodeBlockOptions = ({ block, editor, element }: Props) => {
           >
             <Trigger className="yoopta-block-options-button">
               <CodeIcon className="yoo-code-w-4 yoo-code-h-4 yoo-code-mr-2" />
-              Language
+              {editor.getLabelText('plugins.Code.options.language') || 'Language'}
             </Trigger>
           </Select>
         </BlockOptionsMenuItem>
diff --git a/packages/plugins/embed/src/ui/EmbedBlockOptions.tsx b/packages/plugins/embed/src/ui/EmbedBlockOptions.tsx
index 87f2c8e7c..881732b45 100644
--- a/packages/plugins/embed/src/ui/EmbedBlockOptions.tsx
+++ b/packages/plugins/embed/src/ui/EmbedBlockOptions.tsx
@@ -39,13 +39,13 @@ const EmbedBlockOptions = ({ editor, block, props: embedProps }: Props) => {
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onToggleAlign}>
             <AlignIcon width={16} height={16} className="yoo-embed-w-4 yoo-embed-h-4 yoo-embed-mr-2" />
-            Alignment
+            {editor.getLabelText('plugins.Embed.options.align') || 'Align'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onOpen}>
             <ExternalLinkIcon width={16} height={16} className="yoo-embed-w-4 yoo-embed-h-4 yoo-embed-mr-2" />
-            Open
+            {editor.getLabelText('plugins.Embed.options.openEmbed') || 'Open'}
           </button>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
diff --git a/packages/plugins/embed/src/ui/EmbedLinkUploader.tsx b/packages/plugins/embed/src/ui/EmbedLinkUploader.tsx
index f51ef47c3..39ee09dec 100644
--- a/packages/plugins/embed/src/ui/EmbedLinkUploader.tsx
+++ b/packages/plugins/embed/src/ui/EmbedLinkUploader.tsx
@@ -36,7 +36,9 @@ const EmbedLinkUploader = ({ blockId, onClose }) => {
     <div className="yoo-embed-cursor-pointer yoo-embed-user-select-none yoo-embed-transition-bg yoo-embed-duration-20 yoo-embed-ease-in yoo-embed-white-space-nowrap yoo-embed-w-full">
       <input
         type="text"
-        placeholder="Paste embed link"
+        placeholder={
+          editor.getLabelText('plugins.Embed.options.placeholder.external.placeholder') || 'Paste embed link'
+        }
         value={value}
         className="yoo-embed-items-center yoo-embed-bg-[hsla(45,13%,94%,.6)] yoo-embed-rounded-[4px] yoo-embed-shadow-[inset_0_0_0_1px_hsla(0,0%,6%,.1)] yoo-embed-cursor-text yoo-embed-flex yoo-embed-text-[14px] yoo-embed-h-[32px] yoo-embed-leading-[20px] yoo-embed-px-[6px] yoo-embed-relative yoo-embed-w-full yoo-embed-border-none"
         onChange={onChange}
@@ -47,7 +49,7 @@ const EmbedLinkUploader = ({ blockId, onClose }) => {
         disabled={isEmpty}
         onClick={embed}
       >
-        Embed link
+        {editor.getLabelText('plugins.Embed.options.placeholder.external.button') || 'Embed link'}
       </button>
     </div>
   );
diff --git a/packages/plugins/embed/src/ui/EmbedUploader.tsx b/packages/plugins/embed/src/ui/EmbedUploader.tsx
index 0480a6b6c..4a202fff2 100644
--- a/packages/plugins/embed/src/ui/EmbedUploader.tsx
+++ b/packages/plugins/embed/src/ui/EmbedUploader.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { UI } from '@yoopta/editor';
+import { UI, YooEditor } from '@yoopta/editor';
 import { EmbedLinkUploader } from './EmbedLinkUploader';
 
 type Props = {
@@ -7,11 +7,12 @@ type Props = {
   refs: any;
   blockId: string;
   onClose: () => void;
+  editor: YooEditor;
 };
 
 const { Overlay, Portal } = UI;
 
-const EmbedUploader = ({ floatingStyles, refs, onClose, blockId }: Props) => {
+const EmbedUploader = ({ editor, floatingStyles, refs, onClose, blockId }: Props) => {
   const getTabStyles = () => ({
     borderBottom: '2px solid #2483e2',
   });
@@ -29,7 +30,7 @@ const EmbedUploader = ({ floatingStyles, refs, onClose, blockId }: Props) => {
                   'yoopta-button yoo-embed-py-[6px] yoo-embed-whitespace-nowrap yoo-embed-min-w-0 yoo-embed-flex-shrink-0 yoo-embed-text-[rgb(55,53,47)] yoo-embed-relative yoo-embed-cursor-pointer yoo-embed-user-select-none yoo-embed-bg-inherit yoo-embed-transition-[height_20ms_ease-in] yoo-embed-inline-flex yoo-embed-items-center yoo-embed-h-full yoo-embed-text-[14px] yoo-embed-leading-[1.2] yoo-embed-px-[8px]'
                 }
               >
-                Embed link
+                {editor.getLabelText('plugins.Embed.options.placeholder.external.label') || 'Embed link'}
               </button>
             </div>
             <div className="yoo-embed-pt-[6px] yoo-embed-pb-[6px] yoo-embed-mt-[4px] yoo-embed-flex yoo-embed-justify-center yoo-embed-mr-[12px] yoo-embed-ml-[12px]">
diff --git a/packages/plugins/embed/src/ui/Placeholder.tsx b/packages/plugins/embed/src/ui/Placeholder.tsx
index faa5e1b87..4e9b4ba04 100644
--- a/packages/plugins/embed/src/ui/Placeholder.tsx
+++ b/packages/plugins/embed/src/ui/Placeholder.tsx
@@ -1,10 +1,12 @@
 import { useFloating, inline, flip, shift, offset } from '@floating-ui/react';
 import { CodeIcon } from '@radix-ui/react-icons';
+import { useYooptaEditor } from '@yoopta/editor';
 import { useState } from 'react';
 import { EmbedUploader } from './EmbedUploader';
 
 const Placeholder = ({ attributes, children, blockId }) => {
   const [isUploaderOpen, setIsUploaderOpen] = useState(false);
+  const editor = useYooptaEditor();
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
@@ -26,7 +28,9 @@ const Placeholder = ({ attributes, children, blockId }) => {
         ref={refs.setReference}
       >
         <CodeIcon className="yoo-embed-mr-2 yoo-embed-user-select-none" width={24} height={24} />
-        <span className="yoo-embed-font-medium">Click to add embed</span>
+        <span className="yoo-embed-font-medium">
+          {editor.getLabelText('plugins.Embed.options.placeholder.title') || 'Click to add embed'}
+        </span>
       </button>
       {isUploaderOpen && (
         <EmbedUploader
@@ -34,6 +38,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
           floatingStyles={floatingStyles}
           refs={refs}
           onClose={() => setIsUploaderOpen(false)}
+          editor={editor}
         />
       )}
       {children}
diff --git a/packages/plugins/file/src/ui/FileBlockOptions.tsx b/packages/plugins/file/src/ui/FileBlockOptions.tsx
index 66585e074..e0ec52375 100644
--- a/packages/plugins/file/src/ui/FileBlockOptions.tsx
+++ b/packages/plugins/file/src/ui/FileBlockOptions.tsx
@@ -40,13 +40,13 @@ const FileBlockOptions = ({ editor, block, props: fileProps }: Props) => {
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onToggleAlign}>
             <AlignIcon width={16} height={16} className="yoo-file-w-4 yoo-file-h-4 yoo-file-mr-2" />
-            Alignment
+            {editor.getLabelText('plugins.File.options.align') || 'Align'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onOpen}>
             <ExternalLinkIcon width={16} height={16} className="yoo-file-w-4 yoo-file-h-4 yoo-file-mr-2" />
-            Open
+            {editor.getLabelText('plugins.File.options.openFile') || 'Open'}
           </button>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
diff --git a/packages/plugins/file/src/ui/FilePlaceholderUploader.tsx b/packages/plugins/file/src/ui/FilePlaceholderUploader.tsx
index cf215da9c..266ec276f 100644
--- a/packages/plugins/file/src/ui/FilePlaceholderUploader.tsx
+++ b/packages/plugins/file/src/ui/FilePlaceholderUploader.tsx
@@ -1,4 +1,4 @@
-import { UI } from '@yoopta/editor';
+import { UI, YooEditor } from '@yoopta/editor';
 import { CSSProperties } from 'react';
 import { FileUploader } from './FileUploader';
 
@@ -8,11 +8,12 @@ type Props = {
   blockId: string;
   onClose: () => void;
   onSetLoading: (_s: boolean) => void;
+  editor: YooEditor;
 };
 
 const { Overlay, Portal } = UI;
 
-const FilePlaceholderUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: Props) => {
+const FilePlaceholderUploader = ({ editor, floatingStyles, refs, onClose, blockId, onSetLoading }: Props) => {
   const getTabStyles = () => ({
     borderBottom: '2px solid #2483e2',
   });
@@ -28,7 +29,7 @@ const FilePlaceholderUploader = ({ floatingStyles, refs, onClose, blockId, onSet
                 style={getTabStyles()}
                 className={`yoopta-button yoo-file-py-[6px] yoo-file-whitespace-nowrap yoo-file-min-w-0 yoo-file-flex-shrink-0 yoo-file-text-[rgb(55,53,47)] yoo-file-relative yoo-file-cursor-pointer yoo-file-user-select-none yoo-file-bg-inherit yoo-file-transition-[height_20ms_ease-in] yoo-file-inline-flex yoo-file-items-center yoo-file-h-full yoo-file-text-[14px] yoo-file-leading-[1.2] yoo-file-px-[8px]`}
               >
-                Upload
+                {editor.getLabelText('plugins.File.options.placeholder.upload.label') || 'Upload'}
               </button>
             </div>
             <div className="yoo-file-pt-[6px] yoo-file-pb-[6px] yoo-file-mt-[4px] yoo-file-flex yoo-file-justify-center yoo-file-mr-[12px] yoo-file-ml-[12px]">
diff --git a/packages/plugins/file/src/ui/FileUploader.tsx b/packages/plugins/file/src/ui/FileUploader.tsx
index b0e7b0aff..e6fd65d1c 100644
--- a/packages/plugins/file/src/ui/FileUploader.tsx
+++ b/packages/plugins/file/src/ui/FileUploader.tsx
@@ -57,7 +57,7 @@ const FileUploader = ({ accept = '', onClose, blockId, onSetLoading }: Props) =>
           onChange={onChange}
           multiple={false}
         />
-        Upload file
+        {editor.getLabelText('plugins.File.options.placeholder.upload.label') || 'Upload file'}
       </label>
     </div>
   );
diff --git a/packages/plugins/file/src/ui/Placeholder.tsx b/packages/plugins/file/src/ui/Placeholder.tsx
index 05d91d1ab..2dd8ba01c 100644
--- a/packages/plugins/file/src/ui/Placeholder.tsx
+++ b/packages/plugins/file/src/ui/Placeholder.tsx
@@ -1,5 +1,6 @@
 import { useFloating, inline, flip, shift, offset } from '@floating-ui/react';
 import { FileIcon } from '@radix-ui/react-icons';
+import { useYooptaEditor } from '@yoopta/editor';
 import { CSSProperties, useState } from 'react';
 import { FilePlaceholderUploader } from './FilePlaceholderUploader';
 import { Loader } from './Loader';
@@ -7,6 +8,7 @@ import { Loader } from './Loader';
 const Placeholder = ({ attributes, children, blockId }) => {
   const [isUploaderOpen, setIsUploaderOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const editor = useYooptaEditor();
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
@@ -39,7 +41,11 @@ const Placeholder = ({ attributes, children, blockId }) => {
         ) : (
           <FileIcon className="yoo-file-mr-2 yoo-file-user-select-none" width={24} height={24} />
         )}
-        <span className="yoo-file-font-medium">{loading ? 'Loading...' : 'Click to add file'}</span>
+        <span className="yoo-file-font-medium">
+          {loading
+            ? editor.getLabelText('plugins.File.options.placeholder.loading') || 'Loading...'
+            : editor.getLabelText('plugins.File.options.placeholder.title') || 'Click to add file'}
+        </span>
         {loading && (
           <div
             className="yoopta-button yoo-file-absolute yoo-file-top-0 yoo-file-left-0 yoo-file-h-full yoo-file-bg-[rgba(55,53,47,0.16)]"
@@ -54,6 +60,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
           refs={refs}
           onClose={() => setIsUploaderOpen(false)}
           onSetLoading={onSetLoading}
+          editor={editor}
         />
       )}
       {children}
diff --git a/packages/plugins/image/src/ui/EmbedUploader.tsx b/packages/plugins/image/src/ui/EmbedUploader.tsx
index e1ac7b85f..f3d47c811 100644
--- a/packages/plugins/image/src/ui/EmbedUploader.tsx
+++ b/packages/plugins/image/src/ui/EmbedUploader.tsx
@@ -26,7 +26,9 @@ const EmbedUploader = ({ blockId, onClose }) => {
     <div className="yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-transition-bg yoo-image-duration-20 yoo-image-ease-in yoo-image-white-space-nowrap yoo-image-w-full">
       <input
         type="text"
-        placeholder="Paste image link"
+        placeholder={
+          editor.getLabelText('plugins.Image.options.placeholder.external.placeholder') || 'Paste image link'
+        }
         value={value}
         className="yoo-image-items-center yoo-image-bg-[hsla(45,13%,94%,.6)] yoo-image-rounded-[4px] yoo-image-shadow-[inset_0_0_0_1px_hsla(0,0%,6%,.1)] yoo-image-cursor-text yoo-image-flex yoo-image-text-[14px] yoo-image-h-[32px] yoo-image-leading-[20px] yoo-image-px-[6px] yoo-image-relative yoo-image-w-full yoo-image-border-none"
         onChange={onChange}
@@ -37,7 +39,7 @@ const EmbedUploader = ({ blockId, onClose }) => {
         disabled={isEmpty}
         onClick={embed}
       >
-        Embed image
+        {editor.getLabelText('plugins.Image.options.placeholder.external.button') || 'Embed image'}
       </button>
     </div>
   );
diff --git a/packages/plugins/image/src/ui/FileUploader.tsx b/packages/plugins/image/src/ui/FileUploader.tsx
index b09aab0c9..8e7a4219a 100644
--- a/packages/plugins/image/src/ui/FileUploader.tsx
+++ b/packages/plugins/image/src/ui/FileUploader.tsx
@@ -66,7 +66,7 @@ const FileUploader = ({ accept = 'image/*', onClose, blockId, onSetLoading }: Pr
           onChange={onChange}
           multiple={false}
         />
-        Upload image
+        {editor.getLabelText('plugins.Image.options.placeholder.upload.label') || 'Upload image'}
       </label>
     </div>
   );
diff --git a/packages/plugins/image/src/ui/ImageBlockOptions.tsx b/packages/plugins/image/src/ui/ImageBlockOptions.tsx
index fd3129797..2a23649f6 100644
--- a/packages/plugins/image/src/ui/ImageBlockOptions.tsx
+++ b/packages/plugins/image/src/ui/ImageBlockOptions.tsx
@@ -153,7 +153,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
           <button type="button" className="yoopta-block-options-button yoo-image-justify-between" onClick={onFit}>
             <span className="yoo-image-flex">
               <RowSpacingIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-              Fit
+              {editor.getLabelText('plugins.Image.options.fit.contain') || 'Fit'}
             </span>
             {imageProps?.fit === 'contain' && (
               <CheckmarkIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4" />
@@ -164,7 +164,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
           <button type="button" className="yoopta-block-options-button yoo-image-justify-between" onClick={onFill}>
             <span className="yoo-image-flex">
               <WidthIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-              Fill
+              {editor.getLabelText('plugins.Image.options.fit.fill') || 'Fill'}
             </span>
             {imageProps?.fit === 'fill' && (
               <CheckmarkIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4" />
@@ -175,7 +175,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
           <button type="button" className="yoopta-block-options-button yoo-image-justify-between" onClick={onCover}>
             <span className="yoo-image-flex">
               <SizeIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-              Cover
+              {editor.getLabelText('plugins.Image.options.fit.cover') || 'Cover'}
             </span>
             {imageProps?.fit === 'cover' && (
               <CheckmarkIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4" />
@@ -194,6 +194,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
             refs={refs}
             onDelete={onDeleteAltText}
             onSave={onSaveAltText}
+            editor={editor}
           />
         )}
         <BlockOptionsMenuItem>
@@ -204,7 +205,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
             onClick={() => setIsAltTextOpen(true)}
           >
             <TextIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-            Alt text
+            {editor.getLabelText('plugins.Image.options.alt.title') || 'Alt text'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
@@ -227,7 +228,7 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
             ) : (
               <UpdateIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
             )}
-            Replace image
+            {editor.getLabelText('plugins.Image.options.replaceImage') || 'Replace image'}
           </label>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
@@ -240,13 +241,13 @@ const ImageBlockOptions = ({ editor, block, props: imageProps }: Props) => {
             onClick={onToggleAlign}
           >
             <AlignIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-            Alignment
+            {editor.getLabelText('plugins.Image.options.align') || 'Align'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={onDownload}>
             <DownloadIcon width={16} height={16} className="yoo-image-w-4 yoo-image-h-4 yoo-image-mr-2" />
-            Download
+            {editor.getLabelText('plugins.Image.options.downloadImage') || 'Download'}
           </button>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
diff --git a/packages/plugins/image/src/ui/ImageUploader.tsx b/packages/plugins/image/src/ui/ImageUploader.tsx
index 2c809806a..ecbdafbbf 100644
--- a/packages/plugins/image/src/ui/ImageUploader.tsx
+++ b/packages/plugins/image/src/ui/ImageUploader.tsx
@@ -1,4 +1,4 @@
-import { UI } from '@yoopta/editor';
+import { UI, YooEditor } from '@yoopta/editor';
 import { CSSProperties, useState } from 'react';
 import { EmbedUploader } from './EmbedUploader';
 import { FileUploader } from './FileUploader';
@@ -9,12 +9,13 @@ type Props = {
   blockId: string;
   onClose: () => void;
   onSetLoading: (_s: boolean) => void;
+  editor: YooEditor;
 };
 const { Overlay, Portal } = UI;
 
 type Tab = 'upload' | 'embed';
 
-const ImageUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: Props) => {
+const ImageUploader = ({ floatingStyles, refs, onClose, blockId, editor, onSetLoading }: Props) => {
   const [activeTab, setActiveTab] = useState<Tab>('upload');
 
   const switchTab = (tab: Tab) => setActiveTab(tab);
@@ -38,7 +39,7 @@ const ImageUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }:
                 style={getTabStyles(isUploader)}
                 className={`yoopta-button yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]`}
               >
-                Upload
+                {editor.getLabelText('plugins.Image.options.placeholder.upload.label') || 'Upload'}
               </button>
               <button
                 type="button"
@@ -48,7 +49,7 @@ const ImageUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }:
                   'yoopta-button yoo-image-py-[6px] yoo-image-whitespace-nowrap yoo-image-min-w-0 yoo-image-flex-shrink-0 yoo-image-text-[rgb(55,53,47)] yoo-image-relative yoo-image-cursor-pointer yoo-image-user-select-none yoo-image-bg-inherit yoo-image-transition-[height_20ms_ease-in] yoo-image-inline-flex yoo-image-items-center yoo-image-h-full yoo-image-text-[14px] yoo-image-leading-[1.2] yoo-image-px-[8px]'
                 }
               >
-                Image link
+                {editor.getLabelText('plugins.Image.options.placeholder.external.label') || 'Image link'}
               </button>
             </div>
             <div className="yoo-image-pt-[6px] yoo-image-pb-[6px] yoo-image-mt-[4px] yoo-image-flex yoo-image-justify-center yoo-image-mr-[12px] yoo-image-ml-[12px]">
diff --git a/packages/plugins/image/src/ui/InputAltText.tsx b/packages/plugins/image/src/ui/InputAltText.tsx
index b43a0457d..9f445d2ea 100644
--- a/packages/plugins/image/src/ui/InputAltText.tsx
+++ b/packages/plugins/image/src/ui/InputAltText.tsx
@@ -2,7 +2,7 @@ import { UI } from '@yoopta/editor';
 
 const { Overlay, Portal } = UI;
 
-const InputAltText = ({ floatingStyles, onClose, refs, value, onChange, onSave, onDelete }) => {
+const InputAltText = ({ editor, floatingStyles, onClose, refs, value, onChange, onSave, onDelete }) => {
   return (
     <Portal id="yoo-image-uploader-portal">
       <Overlay lockScroll className="yoo-image-z-[100]" onClick={onClose}>
@@ -10,7 +10,8 @@ const InputAltText = ({ floatingStyles, onClose, refs, value, onChange, onSave,
           <div className="yoopta-image-input-root yoo-image-shadow-y-[4px]">
             <div>
               <label htmlFor="alt" className="yoopta-image-input-label">
-                Alternative text
+                {/* Alternative text */}
+                {editor.getLabelText('plugins.Image.options.alt.label') || 'Alternative text'}
               </label>
               <input
                 id="alt"
@@ -19,7 +20,8 @@ const InputAltText = ({ floatingStyles, onClose, refs, value, onChange, onSave,
                 name="alt"
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
-                placeholder="Edit alt text"
+                // placeholder="Edit alt text"
+                placeholder={editor.getLabelText('plugins.Image.options.alt.placeholder') || 'Edit alt text'}
                 autoComplete="off"
               />
             </div>
@@ -31,14 +33,16 @@ const InputAltText = ({ floatingStyles, onClose, refs, value, onChange, onSave,
                 disabled={!value}
                 onClick={onSave}
               >
-                Update
+                {/* Update */}
+                {editor.getLabelText('plugins.Image.options.alt.save') || 'Save'}
               </button>
               <button
                 type="button"
                 className="yoopta-button yoo-image-ml-2 yoo-image-bg-[#f4f4f5] yoo-image-text-[#000] yoo-image-text-sm yoo-image-font-medium yoo-image-py-[5px] yoo-image-px-[10px] yoo-image-rounded-md yoo-image-shadow-sm disabled:yoo-image-opacity-50"
                 onClick={onDelete}
               >
-                Delete
+                {/* Delete */}
+                {editor.getLabelText('plugins.Image.options.alt.delete') || 'Delete'}
               </button>
             </div>
           </div>
diff --git a/packages/plugins/image/src/ui/Placeholder.tsx b/packages/plugins/image/src/ui/Placeholder.tsx
index 859b21b69..869ba32b9 100644
--- a/packages/plugins/image/src/ui/Placeholder.tsx
+++ b/packages/plugins/image/src/ui/Placeholder.tsx
@@ -1,5 +1,6 @@
 import { useFloating, inline, flip, shift, offset } from '@floating-ui/react';
 import { ImageIcon } from '@radix-ui/react-icons';
+import { useYooptaEditor } from '@yoopta/editor';
 import { CSSProperties, useState } from 'react';
 import { ImageUploader } from './ImageUploader';
 import { Loader } from './Loader';
@@ -7,6 +8,7 @@ import { Loader } from './Loader';
 const Placeholder = ({ attributes, children, blockId }) => {
   const [isUploaderOpen, setIsUploaderOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const editor = useYooptaEditor();
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
@@ -40,7 +42,11 @@ const Placeholder = ({ attributes, children, blockId }) => {
         ) : (
           <ImageIcon className="yoo-image-mr-2 yoo-image-user-select-none" width={24} height={24} />
         )}
-        <span className="yoo-image-font-medium">{loading ? 'Loading...' : 'Click to add image'}</span>
+        <span className="yoo-image-font-medium">
+          {loading
+            ? editor.getLabelText('plugins.Image.options.placeholder.loading') || 'Loading...'
+            : editor.getLabelText('plugins.Image.options.placeholder.title') || 'Click to add image'}
+        </span>
         {loading && (
           <div
             className="yoo-image-absolute yoo-image-top-0 yoo-image-left-0 yoo-image-h-full yoo-image-bg-[rgba(55,53,47,0.16)]"
@@ -55,6 +61,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
           refs={refs}
           onClose={() => setIsUploaderOpen(false)}
           onSetLoading={onSetLoading}
+          editor={editor}
         />
       )}
       {children}
diff --git a/packages/plugins/link/src/ui/LinkHoverPreview.tsx b/packages/plugins/link/src/ui/LinkHoverPreview.tsx
index 811692391..936f159b9 100644
--- a/packages/plugins/link/src/ui/LinkHoverPreview.tsx
+++ b/packages/plugins/link/src/ui/LinkHoverPreview.tsx
@@ -115,7 +115,8 @@ const LinkHoverPreview = ({ style, setFloating, element, setHoldLinkTool, blockI
             setIsEditLinkToolsOpen((prev) => !prev);
           }}
         >
-          Edit
+          {/* Edit */}
+          {editor.getLabelText('tools.link.edit') || 'Edit'}
         </button>
       </div>
     </Portal>
diff --git a/packages/plugins/paragraph/src/plugin/index.tsx b/packages/plugins/paragraph/src/plugin/index.tsx
index cef386681..de5c5e309 100644
--- a/packages/plugins/paragraph/src/plugin/index.tsx
+++ b/packages/plugins/paragraph/src/plugin/index.tsx
@@ -1,7 +1,6 @@
 import { serializeTextNodes, serializeTextNodesIntoMarkdown, YooptaPlugin } from '@yoopta/editor';
-import { Element, Transforms } from 'slate';
 import { ParagraphCommands } from '../commands';
-import { ParagraphElement, ParagraphElementMap } from '../types';
+import { ParagraphElementMap } from '../types';
 import { ParagraphRender } from '../ui/Paragraph';
 
 const Paragraph = new YooptaPlugin<ParagraphElementMap>({
diff --git a/packages/plugins/table/src/components/TableBlockOptions.tsx b/packages/plugins/table/src/components/TableBlockOptions.tsx
index e68028540..6c781e08e 100644
--- a/packages/plugins/table/src/components/TableBlockOptions.tsx
+++ b/packages/plugins/table/src/components/TableBlockOptions.tsx
@@ -40,7 +40,8 @@ const TableBlockOptions = ({ editor, block, table }: Props) => {
           >
             <span className="yoo-table-flex">
               <Sheet width={16} height={16} className="yoo-table-w-4 yoo-table-h-4 yoo-table-mr-2" />
-              Header row
+              {/* Header row */}
+              {editor.getLabelText('plugins.Table.options.toggleHeaderRow') || 'Header row'}
             </span>
             {isHeaderRowEnabled && <CheckIcon width={16} height={16} className="yoo-table-w-4 yoo-table-h-4" />}
           </button>
@@ -57,7 +58,8 @@ const TableBlockOptions = ({ editor, block, table }: Props) => {
                 height={16}
                 className="yoo-table-w-4 yoo-table-h-4 yoo-table-mr-2 yoo-table-rotate-180"
               />
-              Header column
+              {/* Header column */}
+              {editor.getLabelText('plugins.Table.options.toggleHeaderColumn') || 'Header column'}
             </span>
             {isHeaderColumnEnabled && <CheckIcon width={16} height={16} className="yoo-table-w-4 yoo-table-h-4" />}
           </button>
diff --git a/packages/plugins/table/src/components/TableColumnOptions.tsx b/packages/plugins/table/src/components/TableColumnOptions.tsx
index 5b4e89c99..f1185d58d 100644
--- a/packages/plugins/table/src/components/TableColumnOptions.tsx
+++ b/packages/plugins/table/src/components/TableColumnOptions.tsx
@@ -93,26 +93,30 @@ const TableColumnOptions = ({ editor, blockId, element, onClose, ...props }: Pro
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={insertColumnBefore}>
             <ArrowLeftIcon className="yoopta-table-icons" />
-            Insert left
+            {/* Insert left */}
+            {editor.getLabelText('plugins.Table.options.columnOptions.insertLeft') || 'Insert left'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={insertColumnAfter}>
             <ArrowRightIcon className="yoopta-table-icons" />
-            Insert right
+            {/* Insert right */}
+            {editor.getLabelText('plugins.Table.options.columnOptions.insertRight') || 'Insert right'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsSeparator />
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={moveColumnRight}>
             <MoveRightIcon className="yoopta-table-icons" />
-            Move right
+            {/* Move right */}
+            {editor.getLabelText('plugins.Table.options.columnOptions.moveRight') || 'Move right'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={moveColumnLeft}>
             <MoveLeftIcon className="yoopta-table-icons" />
-            Move left
+            {/* Move left */}
+            {editor.getLabelText('plugins.Table.options.columnOptions.moveLeft') || 'Move left'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsSeparator />
@@ -120,7 +124,8 @@ const TableColumnOptions = ({ editor, blockId, element, onClose, ...props }: Pro
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={deleteTableColumn}>
             <TrashIcon className="yoopta-table-icons" />
-            Delete
+            {/* Delete */}
+            {editor.getLabelText('plugins.Table.options.columnOptions.delete') || 'Delete'}
           </button>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
diff --git a/packages/plugins/table/src/components/TableRowOptions.tsx b/packages/plugins/table/src/components/TableRowOptions.tsx
index 3fc4f163a..14548797b 100644
--- a/packages/plugins/table/src/components/TableRowOptions.tsx
+++ b/packages/plugins/table/src/components/TableRowOptions.tsx
@@ -82,33 +82,33 @@ const TableRowOptions = ({ editor, blockId, onClose, tdElement, ...props }: Prop
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={insertRowBefore}>
             <CornerUpRight className="yoopta-table-icons" />
-            Insert above
+            {editor.getLabelText('plugins.Table.options.rowOptions.insertAbove') || 'Insert above'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={insertRowAfter}>
             <CornerDownRight className="yoopta-table-icons" />
-            Insert below
+            {editor.getLabelText('plugins.Table.options.rowOptions.insertBelow') || 'Insertbelow'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsSeparator />
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={moveRowUp}>
             <MoveUpIcon className="yoopta-table-icons" />
-            Move up
+            {editor.getLabelText('plugins.Table.options.rowOptions.moveUp') || 'Move up'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={moveRowDown}>
             <MoveDownIcon className="yoopta-table-icons" />
-            Move down
+            {editor.getLabelText('plugins.Table.options.rowOptions.moveDown') || 'Move down'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsSeparator />
         <BlockOptionsMenuItem>
           <button type="button" className="yoopta-block-options-button" onClick={deleteTableRow}>
             <TrashIcon className="yoopta-table-icons" />
-            Delete row
+            {editor.getLabelText('plugins.Table.options.rowOptions.delete') || 'Delete row'}
           </button>
         </BlockOptionsMenuItem>
       </BlockOptionsMenuGroup>
diff --git a/packages/plugins/video/src/ui/EmbedUploader.tsx b/packages/plugins/video/src/ui/EmbedUploader.tsx
index 6f1054095..8a4dda946 100644
--- a/packages/plugins/video/src/ui/EmbedUploader.tsx
+++ b/packages/plugins/video/src/ui/EmbedUploader.tsx
@@ -34,7 +34,9 @@ const EmbedUploader = ({ blockId, onClose }) => {
     <div className="yoo-video-cursor-pointer yoo-video-user-select-none yoo-video-transition-bg yoo-video-duration-20 yoo-video-ease-in yoo-video-white-space-nowrap yoo-video-w-full">
       <input
         type="text"
-        placeholder="Paste video link"
+        placeholder={
+          editor.getLabelText('plugins.Image.options.placeholder.external.placeholder') || 'Paste video link'
+        }
         value={value}
         className="yoo-video-items-center yoo-video-bg-[hsla(45,13%,94%,.6)] yoo-video-rounded-[4px] yoo-video-shadow-[inset_0_0_0_1px_hsla(0,0%,6%,.1)] yoo-video-cursor-text yoo-video-flex yoo-video-text-[14px] yoo-video-h-[32px] yoo-video-leading-[20px] yoo-video-px-[6px] yoo-video-relative yoo-video-w-full yoo-video-border-none"
         onChange={onChange}
@@ -45,7 +47,7 @@ const EmbedUploader = ({ blockId, onClose }) => {
         disabled={isEmpty}
         onClick={embed}
       >
-        Embed video
+        {editor.getLabelText('plugins.Image.options.placeholder.external.button') || 'Embed video'}
       </button>
     </div>
   );
diff --git a/packages/plugins/video/src/ui/FileUploader.tsx b/packages/plugins/video/src/ui/FileUploader.tsx
index 8860f8649..ade75acb9 100644
--- a/packages/plugins/video/src/ui/FileUploader.tsx
+++ b/packages/plugins/video/src/ui/FileUploader.tsx
@@ -67,7 +67,7 @@ const FileUploader = ({ accept = 'video/*', onClose, blockId, onSetLoading }: Pr
           onChange={onChange}
           multiple={false}
         />
-        Upload video
+        {editor.getLabelText('plugins.Image.options.placeholder.upload.label') || 'Upload video'}
       </label>
     </div>
   );
diff --git a/packages/plugins/video/src/ui/Placeholder.tsx b/packages/plugins/video/src/ui/Placeholder.tsx
index 18f2f43f7..ce5e36603 100644
--- a/packages/plugins/video/src/ui/Placeholder.tsx
+++ b/packages/plugins/video/src/ui/Placeholder.tsx
@@ -3,6 +3,7 @@ import { VideoIcon } from '@radix-ui/react-icons';
 import { CSSProperties, useState } from 'react';
 import { VideoUploader } from './VideoUploader';
 import { Loader } from './Loader';
+import { useYooptaEditor } from '@yoopta/editor';
 
 const loadingStyles: CSSProperties = {
   width: '100%',
@@ -12,6 +13,7 @@ const loadingStyles: CSSProperties = {
 const Placeholder = ({ attributes, children, blockId }) => {
   const [isUploaderOpen, setIsUploaderOpen] = useState(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const editor = useYooptaEditor();
 
   const { refs, floatingStyles } = useFloating({
     placement: 'bottom',
@@ -40,7 +42,11 @@ const Placeholder = ({ attributes, children, blockId }) => {
         ) : (
           <VideoIcon className="yoo-video-mr-2 yoo-video-user-select-none" width={24} height={24} />
         )}
-        <span className="yoo-video-font-medium">{loading ? 'Loading...' : 'Click to add video'}</span>
+        <span className="yoo-video-font-medium">
+          {loading
+            ? editor.getLabelText('plugins.Image.options.placeholder.loading') || 'Loading...'
+            : editor.getLabelText('plugins.Image.options.placeholder.title') || 'Click to add video'}
+        </span>
         {loading && (
           <div
             className="yoo-video-absolute yoo-video-top-0 yoo-video-left-0 yoo-video-h-full yoo-video-bg-[rgba(55,53,47,0.16)]"
@@ -55,6 +61,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
           refs={refs}
           onClose={() => setIsUploaderOpen(false)}
           onSetLoading={onSetLoading}
+          editor={editor}
         />
       )}
       {children}
diff --git a/packages/plugins/video/src/ui/VideoBlockOptions.tsx b/packages/plugins/video/src/ui/VideoBlockOptions.tsx
index 7f264e943..0f341db5e 100644
--- a/packages/plugins/video/src/ui/VideoBlockOptions.tsx
+++ b/packages/plugins/video/src/ui/VideoBlockOptions.tsx
@@ -149,7 +149,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
               <button type="button" className="yoopta-block-options-button yoo-video-justify-between" onClick={onFit}>
                 <span className="yoo-video-flex">
                   <RowSpacingIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
-                  Fit
+                  {editor.getLabelText('plugins.Video.options.fit.contain') || 'Fit'}
                 </span>
                 {videoProps?.fit === 'contain' && (
                   <CheckmarkIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4" />
@@ -160,7 +160,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
               <button type="button" className="yoopta-block-options-button yoo-video-justify-between" onClick={onFill}>
                 <span className="yoo-video-flex">
                   <WidthIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
-                  Fill
+                  {editor.getLabelText('plugins.Video.options.fit.fill') || 'Fill'}
                 </span>
                 {videoProps?.fit === 'fill' && (
                   <CheckmarkIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4" />
@@ -171,7 +171,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
               <button type="button" className="yoopta-block-options-button yoo-video-justify-between" onClick={onCover}>
                 <span className="yoo-video-flex">
                   <SizeIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
-                  Cover
+                  {editor.getLabelText('plugins.Video.options.fit.cover') || 'Cover'}
                 </span>
                 {videoProps?.fit === 'cover' && (
                   <CheckmarkIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4" />
@@ -205,7 +205,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
                 ) : (
                   <UpdateIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
                 )}
-                Replace video
+                {editor.getLabelText('plugins.Video.options.replaceImage') || 'Replace video'}
               </label>
             </BlockOptionsMenuItem>
           </BlockOptionsMenuGroup>
@@ -234,7 +234,10 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
               ) : (
                 <ImageIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
               )}
-              {videoProps?.poster ? 'Replace poster' : 'Add poster'}
+              {/* {videoProps?.poster ? 'Replace poster' : 'Add poster'} */}
+              {videoProps?.poster
+                ? editor.getLabelText('plugins.Video.options.replacePosterVideo') || 'Replace poster'
+                : editor.getLabelText('plugins.Video.options.addPosterVideo') || 'Add poster'}
             </label>
           </BlockOptionsMenuItem>
         )}
@@ -245,7 +248,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
             onClick={onToggleAlign}
           >
             <AlignIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
-            Alignment
+            {editor.getLabelText('plugins.Video.options.align') || 'Align'}
           </button>
         </BlockOptionsMenuItem>
         <BlockOptionsMenuItem>
@@ -257,12 +260,12 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
             {isExternalVideo ? (
               <>
                 <ExternalLinkIcon width={16} height={16} className="yoo-embed-w-4 yoo-embed-h-4 yoo-embed-mr-2" />
-                Open
+                {editor.getLabelText('plugins.Video.options.openVideo') || 'Open'}
               </>
             ) : (
               <>
                 <DownloadIcon width={16} height={16} className="yoo-video-w-4 yoo-video-h-4 yoo-video-mr-2" />
-                Download
+                {editor.getLabelText('plugins.Video.options.downloadVideo') || 'Download'}
               </>
             )}
           </button>
diff --git a/packages/plugins/video/src/ui/VideoUploader.tsx b/packages/plugins/video/src/ui/VideoUploader.tsx
index f8ea93c17..f65402dad 100644
--- a/packages/plugins/video/src/ui/VideoUploader.tsx
+++ b/packages/plugins/video/src/ui/VideoUploader.tsx
@@ -1,4 +1,4 @@
-import { UI } from '@yoopta/editor';
+import { UI, YooEditor } from '@yoopta/editor';
 import { CSSProperties, useState } from 'react';
 import { EmbedUploader } from './EmbedUploader';
 import { FileUploader } from './FileUploader';
@@ -11,11 +11,12 @@ type Props = {
   blockId: string;
   onClose: () => void;
   onSetLoading: (_s: boolean) => void;
+  editor: YooEditor;
 };
 
 type Tab = 'upload' | 'embed';
 
-const VideoUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }: Props) => {
+const VideoUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading, editor }: Props) => {
   const [activeTab, setActiveTab] = useState<Tab>('upload');
 
   const switchTab = (tab: Tab) => setActiveTab(tab);
@@ -39,7 +40,7 @@ const VideoUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }:
                 style={getTabStyles(isUploader)}
                 className={`yoopta-button yoo-video-py-[6px] yoo-video-whitespace-nowrap yoo-video-min-w-0 yoo-video-flex-shrink-0 yoo-video-text-[rgb(55,53,47)] yoo-video-relative yoo-video-cursor-pointer yoo-video-user-select-none yoo-video-bg-inherit yoo-video-transition-[height_20ms_ease-in] yoo-video-inline-flex yoo-video-items-center yoo-video-h-full yoo-video-text-[14px] yoo-video-leading-[1.2] yoo-video-px-[8px]`}
               >
-                Upload
+                {editor.getLabelText('plugins.Image.options.placeholder.upload.label') || 'Upload'}
               </button>
               <button
                 type="button"
@@ -49,7 +50,7 @@ const VideoUploader = ({ floatingStyles, refs, onClose, blockId, onSetLoading }:
                   'yoopta-button yoo-video-py-[6px] yoo-video-whitespace-nowrap yoo-video-min-w-0 yoo-video-flex-shrink-0 yoo-video-text-[rgb(55,53,47)] yoo-video-relative yoo-video-cursor-pointer yoo-video-user-select-none yoo-video-bg-inherit yoo-video-transition-[height_20ms_ease-in] yoo-video-inline-flex yoo-video-items-center yoo-video-h-full yoo-video-text-[14px] yoo-video-leading-[1.2] yoo-video-px-[8px]'
                 }
               >
-                Video link
+                {editor.getLabelText('plugins.Image.options.placeholder.external.label') || 'Video link'}
               </button>
             </div>
             <div className="yoo-video-pt-[6px] yoo-video-pb-[6px] yoo-video-mt-[4px] yoo-video-flex yoo-video-justify-center yoo-video-mr-[12px] yoo-video-ml-[12px]">
diff --git a/packages/tools/action-menu/src/components/ActionMenuList.tsx b/packages/tools/action-menu/src/components/ActionMenuList.tsx
index b11782889..740c73535 100644
--- a/packages/tools/action-menu/src/components/ActionMenuList.tsx
+++ b/packages/tools/action-menu/src/components/ActionMenuList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import { DefaultActionMenuRender } from './DefaultActionMenuRender';
 import { useFloating, offset, flip, shift, autoUpdate, useTransitionStyles } from '@floating-ui/react';
 import { Editor, Element, NodeEntry, Path, Transforms } from 'slate';
@@ -95,11 +95,16 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
     duration: 100,
   });
 
-  const blockTypes: ActionMenuToolItem[] = mapActionMenuItems(editor, items || Object.keys(editor.blocks));
+  const blockTypes = useMemo(() => mapActionMenuItems(editor, items || Object.keys(editor.blocks)), [editor, items]);
 
   const [selectedAction, setSelectedAction] = useState<ActionMenuToolItem>(blockTypes[0]);
   const [actions, setActions] = useState<ActionMenuToolItem[]>(blockTypes);
 
+  useEffect(() => {
+    setActions(blockTypes);
+    setSelectedAction(blockTypes[0]);
+  }, [blockTypes]);
+
   const onOpen = () => setIsMenuOpen(true);
   const onClose = () => setIsMenuOpen(false);
 
@@ -354,28 +359,18 @@ const ActionMenuList = ({ items, render }: ActionMenuToolProps) => {
 
   const style = { ...floatingStyles, ...transitionStyles };
 
-  if (render) {
-    return (
-      // [TODO] - take care about SSR
+  const menuContent = render ? render({ ...renderProps, actions }) : <DefaultActionMenuRender {...renderProps} actions={actions} />;
+
+
+  // [TODO] - take care about SSR
+  return (
       <Portal id="yoo-action-menu-list-portal">
         {isMounted && (
-          <div className="yoopta-action-menu-list" style={style} ref={refs.setFloating}>
-            {/* [TODO] - pass key down handler */}
-            {render({ ...renderProps, actions })}
-          </div>
+            <div className="yoopta-action-menu-list" style={style} ref={refs.setFloating}>
+              {menuContent}
+            </div>
         )}
       </Portal>
-    );
-  }
-
-  return (
-    <Portal id="yoo-action-menu-list-portal">
-      {isMounted && (
-        <div className="yoopta-action-menu-list" style={style} ref={refs.setFloating}>
-          <DefaultActionMenuRender {...renderProps} actions={actions} />
-        </div>
-      )}
-    </Portal>
   );
 };
 
diff --git a/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx b/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx
index 363891229..004937dac 100644
--- a/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx
+++ b/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx
@@ -42,16 +42,20 @@ const DefaultActionMenuRender = ({
         >
           {empty && (
             <div className="yoo-action-menu-text-left yoo-action-menu-text-muted-foreground yoo-action-menu-text-xs yoo-action-menu-px-1 yoo-action-menu-py-1">
-              No actions available
+              {editor.getLabelText('tools.actionMenu.noActionsAvailable') || 'No actions available'}
             </div>
           )}
-          {actions.map((action, i) => {
+          {actions.map((action) => {
             const block = editor.blocks[action.type];
 
             if (!block) return null;
 
-            const title = block.options?.display?.title || block.type;
-            const description = block.options?.display?.description || '';
+            const title =
+              editor.getLabelText(`plugins.${block.type}.display.title`) || block.options?.display?.title || block.type;
+            const description =
+              editor.getLabelText(`plugins.${block.type}.display.description`) ||
+              block.options?.display?.description ||
+              '';
             const Icon = action.icon || DEFAULT_ICONS_MAP[action.type];
 
             return (
diff --git a/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx b/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx
index 05f674cf4..2365b6ca3 100644
--- a/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx
+++ b/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx
@@ -42,7 +42,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
       {withTitle && (
         <div>
           <label htmlFor="title" className="yoopta-link-tool-label">
-            Link title
+            {editor.getLabelText('tools.link.title') || 'Link title'}
           </label>
           <input
             id="title"
@@ -51,7 +51,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
             name="title"
             value={link.title || ''}
             onChange={onChange}
-            placeholder="Edit link title"
+            placeholder={editor.getLabelText('tools.link.titlePlaceholder') || 'Edit link title'}
             autoComplete="off"
           />
         </div>
@@ -59,7 +59,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
       {withLink && (
         <div className={withTitle ? 'yoo-link-tool-mt-2' : ''}>
           <label htmlFor="url" className="yoopta-link-tool-label">
-            Link URL
+            {editor.getLabelText('tools.link.url') || 'Link URL'}
           </label>
           <input
             id="url"
@@ -68,7 +68,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
             name="url"
             value={link.url || ''}
             onChange={onChange}
-            placeholder="Edit link URL"
+            placeholder={editor.getLabelText('tools.link.urlPlaceholder') || 'Edit link URL'}
             autoComplete="off"
           />
         </div>
@@ -78,14 +78,14 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
         className="yoopta-button yoopta-link-tool-label !yoo-link-tool-font-[500] yoo-link-tool-mt-2 !yoo-link-tool-mb-0 !yoo-link-tool-flex yoo-link-tool-justify-between yoo-link-tool-items-center yoo-link-tool-w-full"
         onClick={() => setAdditionPropsOpen((p) => !p)}
       >
-        Additional props
+        {editor.getLabelText('tools.link.additionalProps') || 'Additional props'}
         <ChevronUp style={{ transform: isAdditionalPropsOpen ? `rotate(180deg)` : `rotate(0deg)` }} />
       </button>
       {isAdditionalPropsOpen && (
         <>
           <div className="yoo-link-tool-mt-2">
             <label htmlFor="target" className="yoopta-link-tool-label">
-              Link target
+              {editor.getLabelText('tools.link.target') || 'Link target'}
             </label>
             <input
               id="target"
@@ -94,13 +94,13 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
               name="target"
               value={link.target}
               onChange={onChange}
-              placeholder="Edit link target"
+              placeholder={editor.getLabelText('tools.link.targetPlaceholder') || 'Edit link target'}
               autoComplete="off"
             />
           </div>
           <div className="yoo-link-tool-mt-2">
             <label htmlFor="rel" className="yoopta-link-tool-label">
-              Link rel
+              {editor.getLabelText('tools.link.rel') || 'Link rel'}
             </label>
             <input
               id="rel"
@@ -109,7 +109,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
               name="rel"
               value={link.rel}
               onChange={onChange}
-              placeholder="Edit link rel"
+              placeholder={editor.getLabelText('tools.link.relPlaceholder') || 'Edit link rel'}
               autoComplete="off"
             />
           </div>
@@ -122,14 +122,16 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
           disabled={!link.url}
           onClick={onSave}
         >
-          {props.link.url ? 'Update' : 'Add'}
+          {props.link.url
+            ? editor.getLabelText('tools.link.update') || 'Update'
+            : editor.getLabelText('tools.link.add') || 'Add'}
         </button>
         <button
           type="button"
           className="yoopta-button yoo-link-tool-ml-2 yoo-link-tool-bg-[#f4f4f5] yoo-link-tool-text-[#000] yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-sm disabled:yoo-link-tool-opacity-50"
           onClick={onDelete}
         >
-          Delete link
+          {editor.getLabelText('tools.link.delete') || 'Delete link'}
         </button>
       </div>
     </div>
diff --git a/packages/tools/toolbar/src/components/DefaultToolbarRender.tsx b/packages/tools/toolbar/src/components/DefaultToolbarRender.tsx
index 807fe3cab..fc03aac65 100644
--- a/packages/tools/toolbar/src/components/DefaultToolbarRender.tsx
+++ b/packages/tools/toolbar/src/components/DefaultToolbarRender.tsx
@@ -114,7 +114,11 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
     };
   };
 
-  const blockLabel = activeBlock?.options?.display?.title || activeBlock?.type || '';
+  const blockLabel =
+    editor.getLabelText(`plugins.${activeBlock?.type}.display.title`) ||
+    activeBlock?.options?.display?.title ||
+    activeBlock?.type ||
+    '';
 
   const ActionMenu = tools.ActionMenu;
   const LinkTool = tools.LinkTool;
@@ -269,7 +273,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
           }}
           style={getModalTriggerStyle('link')}
         >
-          <span className="yoo-toolbar-mr-0">Link</span>
+          <span className="yoo-toolbar-mr-0">{editor.getLabelText('tools.toolbar.linkTitle') || 'Link'}</span>
           {modals.link && !!LinkTool && (
             <Portal id="yoo-link-tool-portal">
               <Overlay lockScroll className="z-[100]" onClick={onClickLinkOverlay}>
diff --git a/packages/tools/toolbar/src/components/HighlightColor.tsx b/packages/tools/toolbar/src/components/HighlightColor.tsx
index f35b27812..057008629 100644
--- a/packages/tools/toolbar/src/components/HighlightColor.tsx
+++ b/packages/tools/toolbar/src/components/HighlightColor.tsx
@@ -60,7 +60,7 @@ const HighlightColor = ({ editor, refs, floatingStyles, highlightColors = {} }:
     }
 
     setLocalColor(null);
-  }, 500);
+  }, 250);
 
   const handleColorChange = (type: 'color' | 'backgroundColor', color: string, shouldDebounce?: boolean) => {
     if (shouldDebounce) {
@@ -105,7 +105,7 @@ const HighlightColor = ({ editor, refs, floatingStyles, highlightColors = {} }:
               }`}
               onClick={() => setTab('text')}
             >
-              Text
+              {editor.getLabelText('tools.toolbar.highlightColor.text') || 'Text'}
             </button>
             <button
               className={`yoo-toolbar-px-3 yoo-toolbar-py-1 yoo-toolbar-text-sm yoo-toolbar-rounded ${
@@ -115,7 +115,7 @@ const HighlightColor = ({ editor, refs, floatingStyles, highlightColors = {} }:
               }`}
               onClick={() => setTab('background')}
             >
-              Background
+              {editor.getLabelText('tools.toolbar.highlightColor.background') || 'Background'}
             </button>
           </div>
 
@@ -139,7 +139,7 @@ const HighlightColor = ({ editor, refs, floatingStyles, highlightColors = {} }:
               className="yoo-toolbar-text-sm yoo-toolbar-text-gray-600 hover:yoo-toolbar-text-gray-900 yoo-toolbar-flex yoo-toolbar-items-center"
               onClick={() => setShowColorPicker(!showColorPicker)}
             >
-              Color Picker
+              {editor.getLabelText('tools.toolbar.highlightColor.customColor') || 'Custom color'}
               <PaletteIcon className="yoo-toolbar-w-4 yoo-toolbar-h-4 yoo-toolbar-ml-1" />
             </button>
 
diff --git a/packages/tools/toolbar/src/components/utils.ts b/packages/tools/toolbar/src/components/utils.ts
index 011206e84..a58813274 100644
--- a/packages/tools/toolbar/src/components/utils.ts
+++ b/packages/tools/toolbar/src/components/utils.ts
@@ -20,11 +20,14 @@ export function buildActionMenuRenderProps({ editor, view, onClose }: Params) {
   const getActions = () => {
     const items = Object.keys(editor.blocks)
       .filter((type) => filterToggleActions(editor, type))
-      .map((action) => {
-        const title = editor.blocks[action].options?.display?.title || action;
-        const description = editor.blocks[action].options?.display?.description;
-        const icon = editor.blocks[action].options?.display?.icon;
-        return { type: action, title, description, icon };
+      .map((type) => {
+        const title =
+          editor.getLabelText(`plugins.${type}.display.title`) || editor.blocks[type].options?.display?.title || type;
+        const description =
+          editor.getLabelText(`plugins.${type}.display.description`) ||
+          editor.blocks[type].options?.display?.description;
+        const icon = editor.blocks[type].options?.display?.icon;
+        return { type: type, title, description, icon };
       });
 
     return items;
diff --git a/web/next-example/src/components/examples/withTranslations/index.tsx b/web/next-example/src/components/examples/withTranslations/index.tsx
new file mode 100644
index 000000000..e404a28c0
--- /dev/null
+++ b/web/next-example/src/components/examples/withTranslations/index.tsx
@@ -0,0 +1,111 @@
+import YooptaEditor, { createYooptaEditor, useTranslation } from '@yoopta/editor';
+
+import Paragraph from '@yoopta/paragraph';
+import Blockquote from '@yoopta/blockquote';
+import Embed from '@yoopta/embed';
+import Link from '@yoopta/link';
+import Callout from '@yoopta/callout';
+import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
+import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
+import { HeadingOne, HeadingThree, HeadingTwo } from '@yoopta/headings';
+import Code from '@yoopta/code';
+import Table from '@yoopta/table';
+import Divider from '@yoopta/divider';
+import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
+import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
+import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
+import { useMemo, useRef } from 'react';
+import { INITIAL_VALUE } from './initValue';
+
+const plugins = [
+  Paragraph,
+  Table,
+  Divider,
+  HeadingOne,
+  HeadingTwo,
+  HeadingThree,
+  Blockquote,
+  Callout,
+  NumberedList,
+  BulletedList,
+  TodoList,
+  Code,
+  Link,
+  Embed,
+];
+
+const TOOLS = {
+  ActionMenu: {
+    render: DefaultActionMenuRender,
+    tool: ActionMenuList,
+  },
+  Toolbar: {
+    render: DefaultToolbarRender,
+    tool: Toolbar,
+  },
+  LinkTool: {
+    render: DefaultLinkToolRender,
+    tool: LinkTool,
+  },
+};
+
+const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
+
+const translations = {
+  bro: {
+    core: {
+      editor_placeholder: "Yo, smash '/' for options, bro!",
+      save: 'Bro, hit Save',
+      cancel: 'Nah, cancel it',
+    },
+    paragraph: {
+      title: 'Type it out, dude...',
+      description: 'Just some chill text, bro',
+    },
+    table: {
+      title: 'Table, bro!',
+      description: "Lines and boxes, keepin' it organized, my dude.",
+    },
+  },
+};
+
+function WithTranslationsExample() {
+  const editor = useMemo(() => createYooptaEditor(), []);
+  const selectionRef = useRef(null);
+  const { currentLanguage, setLanguage } = useTranslation();
+
+  return (
+    <div
+      className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center flex-col items-center"
+      ref={selectionRef}
+    >
+      <div className="flex gap-2">
+        <button
+          className={`border-primary border-2 p-2 ${currentLanguage === 'en' ? 'bg-blue-500' : undefined}`}
+          onClick={() => setLanguage('en')}
+        >
+          English
+        </button>
+        <button
+          className={`border-primary border-2 p-2 ${currentLanguage === 'bro' ? 'bg-blue-500' : undefined}`}
+          onClick={() => setLanguage('bro')}
+        >
+          Switch to Bro
+        </button>
+      </div>
+      <YooptaEditor
+        editor={editor}
+        plugins={plugins}
+        tools={TOOLS}
+        marks={MARKS}
+        selectionBoxRoot={selectionRef}
+        autoFocus
+        value={INITIAL_VALUE}
+        onChange={(value) => console.log(value)}
+        translations={translations}
+      />
+    </div>
+  );
+}
+
+export default WithTranslationsExample;
diff --git a/web/next-example/src/components/examples/withTranslations/initValue.ts b/web/next-example/src/components/examples/withTranslations/initValue.ts
new file mode 100644
index 000000000..b5f15bd88
--- /dev/null
+++ b/web/next-example/src/components/examples/withTranslations/initValue.ts
@@ -0,0 +1,536 @@
+export const INITIAL_VALUE = {
+  "a3dcc117-7a3a-410f-98fa-8cbf620acebf": {
+    "id": "a3dcc117-7a3a-410f-98fa-8cbf620acebf",
+    "value": [
+      {
+        "id": "e3599711-7674-498b-bcba-099b600d6eb3",
+        "type": "heading-one",
+        "children": [
+          {
+            "text": "Let's start from lorem ipsum"
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "type": "HeadingOne",
+    "meta": {
+      "order": 0,
+      "depth": 0
+    }
+  },
+  "40fb1893-cc80-43c9-9a4c-95ce7ebd0cd8": {
+    "id": "40fb1893-cc80-43c9-9a4c-95ce7ebd0cd8",
+    "value": [
+      {
+        "id": "2221b81d-11c3-4160-b40f-6db00a0af5b9",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": ""
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "type": "Paragraph",
+    "meta": {
+      "order": 1,
+      "depth": 0
+    }
+  },
+  "a98db6b6-496e-40ab-9893-c4778c7f967a": {
+    "id": "a98db6b6-496e-40ab-9893-c4778c7f967a",
+    "type": "Code",
+    "meta": {
+      "depth": 0,
+      "order": 6
+    },
+    "value": [
+      {
+        "id": "c442332d-da41-4359-93f4-bffc445189fe",
+        "type": "code",
+        "props": {
+          "nodeType": "void",
+          "language": "javascript",
+          "theme": "GithubDark"
+        },
+        "children": [
+          {
+            "text": "const translations = {\n  'bro': {\n    core: {\n      editor_placeholder: \"Yo, smash '/' for options, bro!\",\n      save: \"Bro, hit Save\",\n      cancel: \"Nah, cancel it\"\n    },\n    paragraph: {\n      title: \"Type it out, dude...\",\n      description: \"Just some chill text, bro\"\n    },\n    table: {\n      title: \"Table, bro!\",\n      description: \"Lines and boxes, keepin' it organized, my dude.\"\n    }\n};\n\n<YooptaEditor\n  editor={editorInstance}\n  plugins={plugins}\n  translations={translations}\n/>;"
+          }
+        ]
+      }
+    ]
+  },
+  "8c49322d-1e9a-4d1c-8516-f9f563ea2853": {
+    "id": "8c49322d-1e9a-4d1c-8516-f9f563ea2853",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "e20bad2f-5309-485b-871d-ec0aaf319873",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": "The"
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "translations",
+            "code": true
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "property in"
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "YooptaEditorProps",
+            "code": true
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "allows you to provide custom translations for various labels, placeholders, and text elements in the editor. This makes it easy to localize the editor into different languages or customize specific text for your users."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 2
+    }
+  },
+  "863ba1a3-17f7-4547-b9bb-03cda13e5cc7": {
+    "id": "863ba1a3-17f7-4547-b9bb-03cda13e5cc7",
+    "type": "BulletedList",
+    "value": [
+      {
+        "id": "a55e57ed-9195-4dc0-95b1-a19010fab4c5",
+        "type": "bulleted-list",
+        "children": [
+          {
+            "text": "Translations are grouped by "
+          },
+          {
+            "bold": true,
+            "text": "languages"
+          },
+          {
+            "text": " (e.g., "
+          },
+          {
+            "code": true,
+            "text": "en"
+          },
+          {
+            "text": ", "
+          },
+          {
+            "code": true,
+            "text": "es"
+          },
+          {
+            "text": ") and "
+          },
+          {
+            "bold": true,
+            "text": "namespaces/plugins"
+          },
+          {
+            "text": " (e.g., "
+          },
+          {
+            "code": true,
+            "text": "core"
+          },
+          {
+            "text": ", "
+          },
+          {
+            "code": true,
+            "text": "paragraph"
+          },
+          {
+            "text": ")."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 3
+    }
+  },
+  "f684b4a4-0cfb-4a75-ab2b-efeea9265a04": {
+    "id": "f684b4a4-0cfb-4a75-ab2b-efeea9265a04",
+    "type": "BulletedList",
+    "value": [
+      {
+        "id": "02e71ba2-0cab-44e6-9fc2-cf97703a871b",
+        "type": "bulleted-list",
+        "children": [
+          {
+            "text": "You can override default translations or add new languages at initialization."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 4
+    }
+  },
+  "eaea1bc7-813d-4d38-8cc2-081fbf9a2e20": {
+    "id": "eaea1bc7-813d-4d38-8cc2-081fbf9a2e20",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "3beaec7e-72a8-42c0-94c0-8a9fcc5b7315",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": "The"
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "setLanguage",
+            "code": true
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "function from the"
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "useTranslation",
+            "code": true
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "hook allows you to change the language at runtime:"
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 9
+    }
+  },
+  "5cadd71e-1ad7-4ab0-bc43-3dd6da8527f2": {
+    "id": "5cadd71e-1ad7-4ab0-bc43-3dd6da8527f2",
+    "type": "Code",
+    "value": [
+      {
+        "children": [
+          {
+            "text": "import {useTranslation} from '@yoopta-editor/core';\n\nconst { setLanguage } = useTranslation();\n\n// Switch to Spanish\nsetLanguage('bro');"
+          }
+        ],
+        "type": "code",
+        "id": "30489325-114b-4294-9e69-99f31120e373",
+        "props": {
+          "language": "javascript",
+          "theme": "VSCode",
+          "nodeType": "void"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 10
+    }
+  },
+  "c2a332bc-ab08-42d8-a058-fc751980ae11": {
+    "id": "c2a332bc-ab08-42d8-a058-fc751980ae11",
+    "type": "HeadingThree",
+    "meta": {
+      "depth": 0,
+      "order": 8
+    },
+    "value": [
+      {
+        "id": "4c3b33dd-b042-4e01-b72b-2309ac8533b0",
+        "type": "heading-three",
+        "props": {
+          "nodeType": "block"
+        },
+        "children": [
+          {
+            "text": "Changing the Language Dynamically"
+          }
+        ]
+      }
+    ]
+  },
+  "ccbd5d66-0e7b-47f9-9486-5a0bc0e3b2bb": {
+    "id": "ccbd5d66-0e7b-47f9-9486-5a0bc0e3b2bb",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "d981af18-c168-4dc4-b433-96c88f3590ba",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": ""
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 7
+    }
+  },
+  "36f4b7ca-5bfb-4abf-84a2-168b0f59d0e9": {
+    "id": "36f4b7ca-5bfb-4abf-84a2-168b0f59d0e9",
+    "type": "BulletedList",
+    "value": [
+      {
+        "id": "255b361e-3ef9-4e00-9917-67e9549da593",
+        "type": "bulleted-list",
+        "children": [
+          {
+            "text": "If no translations prop is provided, the editor uses its default translations in English."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      },
+      {
+        "id": "255b361e-3ef9-4e00-9917-67e9549da593",
+        "type": "bulleted-list",
+        "props": {
+          "nodeType": "block"
+        },
+        "children": [
+          {
+            "text": "If a key is missing in the current language, the editor falls back to the key itself (e.g., 'core.save')."
+          }
+        ]
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 5
+    }
+  },
+  "d5477264-0e09-4a8b-8de7-26250d2aaabe": {
+    "id": "d5477264-0e09-4a8b-8de7-26250d2aaabe",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "aa9f258f-ddb5-46b3-a5c3-7e1531435f02",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": "The"
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "getAvailableKeys",
+            "code": true
+          },
+          {
+            "text": " "
+          },
+          {
+            "text": "utility allows you to retrieve all available translation keys for the current language at runtime. This is helpful for:"
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 13
+    }
+  },
+  "b73f6f07-f01e-4d83-ad10-d06d0408adbf": {
+    "id": "b73f6f07-f01e-4d83-ad10-d06d0408adbf",
+    "type": "BulletedList",
+    "value": [
+      {
+        "id": "a8c988ba-5aea-4b20-928d-5c1c0598e0b3",
+        "type": "bulleted-list",
+        "children": [
+          {
+            "text": "Getting a complete list of keys to customize."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 14
+    }
+  },
+  "6e5020a6-8e33-4b10-b0cf-2834b2453ee9": {
+    "id": "6e5020a6-8e33-4b10-b0cf-2834b2453ee9",
+    "type": "BulletedList",
+    "value": [
+      {
+        "id": "fae0fdb9-1f8c-406c-a22c-34052c5902ad",
+        "type": "bulleted-list",
+        "children": [
+          {
+            "text": "Generating a template for translation."
+          }
+        ],
+        "props": {
+          "nodeType": "block"
+        }
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 15
+    }
+  },
+  "990035fe-8d82-4a50-a1f3-bc726ffcb026": {
+    "id": "990035fe-8d82-4a50-a1f3-bc726ffcb026",
+    "type": "HeadingThree",
+    "meta": {
+      "depth": 0,
+      "order": 12
+    },
+    "value": [
+      {
+        "id": "adee5237-ee78-4a7c-bab9-4eb8cfe929fc",
+        "type": "heading-three",
+        "props": {
+          "nodeType": "block"
+        },
+        "children": [
+          {
+            "text": "Using "
+          },
+          {
+            "text": "getAvailableKeys",
+            "code": true
+          },
+          {
+            "text": " to Fetch Translation Keys"
+          }
+        ]
+      }
+    ]
+  },
+  "a3ccf244-ad34-4a90-975d-f352454c4bed": {
+    "id": "a3ccf244-ad34-4a90-975d-f352454c4bed",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "3615202d-778d-4a99-8e9d-e9905b17bcbc",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": ""
+          }
+        ]
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 11
+    }
+  },
+  "bdafc963-4a6f-4ed3-a7bf-8048ff6bf607": {
+    "id": "bdafc963-4a6f-4ed3-a7bf-8048ff6bf607",
+    "type": "Code",
+    "meta": {
+      "depth": 0,
+      "order": 16
+    },
+    "value": [
+      {
+        "id": "c3d018e8-68a6-41af-841c-1987add46055",
+        "type": "code",
+        "props": {
+          "nodeType": "void",
+          "language": "javascript",
+          "theme": "GithubDark"
+        },
+        "children": [
+          {
+            "text": "import { useTranslation } from '@yoopta/editor';\n\nconst TranslationKeysExample = () => {\n  const { getAvailableKeys, currentLanguage } = useTranslation();\n\n  const handleFetchKeys = () => {\n    const keys = getAvailableKeys();\n    console.log('Available Keys:', keys);\n  };\n\n  return (\n    <div>\n      <p>Current Language: {currentLanguage}</p>\n      <button onClick={handleFetchKeys}>Get Available Translation Keys</button>\n    </div>\n  );\n};"
+          }
+        ]
+      }
+    ]
+  },
+  "3071d059-79fa-4327-aaba-e53f00ce4029": {
+    "id": "3071d059-79fa-4327-aaba-e53f00ce4029",
+    "type": "Paragraph",
+    "value": [
+      {
+        "id": "55b4274b-7454-431a-8917-427ea941f1bc",
+        "type": "paragraph",
+        "children": [
+          {
+            "text": ""
+          }
+        ]
+      }
+    ],
+    "meta": {
+      "align": "left",
+      "depth": 0,
+      "order": 17
+    }
+  }
+}
diff --git a/web/next-example/src/pages/examples/[example].tsx b/web/next-example/src/pages/examples/[example].tsx
index 92f58647d..82ef74552 100644
--- a/web/next-example/src/pages/examples/[example].tsx
+++ b/web/next-example/src/pages/examples/[example].tsx
@@ -25,6 +25,7 @@ import withShadcnUILibrary from '@/components/examples/withShadcnUILibrary';
 import withEditorHistory from '@/components/examples/withEditorHistory';
 import withEditorOperations from '@/components/examples/withEditorOperations';
 import withEmailBuilder from '@/components/examples/withEmailBuilder';
+import withTranslations from '@/components/examples/withTranslations';
 // import withCraftExample from '@/components/examples/withCraftExample';
 // import withEditorFocusBlur from '@/components/examples/withEditorFocusBlur';
 // import withStarterKit from '@/components/examples/withStarterKit';
@@ -61,6 +62,7 @@ export const EXAMPLES: Record<string, () => React.JSX.Element> = {
   withSavingToDatabase,
   withCustomStyles,
   withLargeDocuments,
+  withTranslations
   // withStarterKit,
   // withCustomHTMLAttributes,
   // withEditorFocusBlur,
@@ -186,6 +188,10 @@ const EXAMPLE_MAP: Record<keyof typeof EXAMPLES, any> = {
     title: 'Meet Email-Builder based on Yoopta! (new)',
     description: '',
   },
+  withTranslations: {
+    title: 'Add translations (new)',
+    description: '',
+  },
 };
 
 const ExampleComponentPage = () => {