# @editorjs/embed > Embed Tool for Editor.js Latest version **2.8.0** (published 2025-11-21) · MIT license · 0 weekly downloads ## Install ```sh npm install @editorjs/embed pnpm add @editorjs/embed yarn add @editorjs/embed bun add @editorjs/embed ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.8.0 | | Published | 2025-11-21 | | First published | 2019-03-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=24.0.0 | | Dependencies | 1 | | Unpacked size | 43.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 159 | | Author | CodeX | | Maintainers | codex-team | | Keywords | codex editor, embed, editor.js, editorjs | ## Links - npm: https://www.npmjs.com/package/@editorjs/embed - Repository: https://github.com/editor-js/embed - npm.io page: https://npm.io/package/@editorjs/embed ## Dependencies (1) - [@editorjs/editorjs](https://npm.io/package/@editorjs/editorjs.md) ^2.31.0 ## Alternatives - [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads - [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads - [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads - [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads - [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads ## Recent versions - 2.8.0 (latest) — 2025-11-21 - 2.7.7 — 2025-11-19 - 2.7.6 — 2024-10-12 - 2.7.5 — 2024-10-11 - 2.7.4 — 2024-06-17 - 2.7.2 — 2024-05-17 - 2.7.1 — 2024-04-08 - 2.7.0 — 2023-11-10 - 2.6.0 — 2023-10-18 - 2.5.3 — 2022-09-07 - 2.5.2 — 2022-06-26 - 2.5.1 — 2022-03-05 - 2.5.0 — 2021-11-18 - 2.4.6 — 2021-04-29 - 2.4.5 — 2021-04-26 - … 9 more at https://npm.io/package/@editorjs/embed/versions ## README ![](https://badgen.net/badge/Editor.js/v2.0/blue) # Embed Tool Provides Block tool for embedded content for the [Editor.js](https://editorjs.io). Tool uses Editor.js pasted patterns handling and inserts iframe with embedded content. ## List of services supported > `service` — is a service name that will be saved to Tool's [output JSON](#output-data) - [Facebook](https://www.facebook.com) - `facebook` service - [Instagram](https://www.instagram.com/codex_team/) - `instagram` service - [YouTube](https://youtube.com) - `youtube` service - [X](https://twitter.com) - `twitter` service. (official twitter api is used for render, no need to use twitframe) - [Twitch](https://twitch.tv) - `twitch-video` service for videos and `twitch-channel` for channels - [Miro](https://miro.com) - `miro` service - [Vimeo](https://vimeo.com) — `vimeo` service - [Gfycat](https://gfycat.com) — `gfycat` service - [Imgur](https://imgur.com) — `imgur` service - [Vine](https://vine.co) - `vine` service. The project is in archive state now - [Aparat](https://www.aparat.com) - `aparat` service - [Yandex.Music](https://music.yandex.ru) - `yandex-music-track` service for tracks, `yandex-music-album` for albums and `yandex-music-playlist` for playlists - [Coub](https://coub.com) — `coub` service - [CodePen](https://codepen.io) — `codepen` service - [Pinterest](https://www.pinterest.com) - `pinterest` service - [GitHub Gist](https://gist.github.com) - `github` service - [Reddit](https://www.reddit.com/) - `reddit` service - [Figma](https://www.figma.com/) - `figma` service - [Whimsical](https://whimsical.com/) - whimsical service - 👇 Any other [customized service](#add-more-services) ## Installation Get the package ```shell yarn add @editorjs/embed ``` Include module at your application ```javascript import Embed from '@editorjs/embed'; ``` Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/embed@latest) ## Usage Add a new Tool to the `tools` property of the Editor.js initial config. ```javascript var editor = EditorJS({ ... tools: { ... embed: Embed, }, ... }); ``` ## Available configuration ### Enabling / disabling services Embed Tool supports some services by default (see above). You can specify services you would like to use: ```javascript var editor = EditorJS({ ... tools: { ... embed: { class: Embed, config: { services: { youtube: true, coub: true } } }, }, ... }); ``` > Note that if you pass services you want to use like in the example above, others will not be enabled. ### Add more services You can provide your own services using simple configuration. First, you should create a Service configuration object. It contains following fields: | Field | Type | Description | | ---------- | ---------- | ----------- | | `regex` | `RegExp` | Pattern of pasted URLs. You should use regexp groups to extract resource id | `embedUrl` | `string` | Url of resource\`s embed page. Use `<%= remote_id %>` to substitute resource identifier | `html` | `string` | HTML code of iframe with embedded content. `embedUrl` will be set as iframe `src` | `height` | `number` | _Optional_. Height of inserted iframe | `width` | `number` | _Optional_. Width of inserted iframe | `id` | `Function` | _Optional_. If your id is complex you can provide function to make the id from extraced regexp groups Example: ```javascript { regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/, embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2', html: "", height: 300, width: 600, id: (groups) => groups.join('/embed/') } ``` When you create a Service configuration object, you can provide it with Tool\`s configuration: ```javascript var editor = EditorJS({ ... tools: { ... embed: { class: Embed, config: { services: { youtube: true, coub: true, codepen: { regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/, embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2', html: "", height: 300, width: 600, id: (groups) => groups.join('/embed/') } } } }, }, ... }); ``` #### Inline Toolbar Editor.js provides useful inline toolbar. You can allow it\`s usage in the Embed Tool caption by providing `inlineToolbar: true`. ```javascript var editor = EditorJS({ ... tools: { ... embed: { class: Embed, inlineToolbar: true }, }, ... }); ``` ## Output data | Field | Type | Description | ------- | -------- | ----------- | service | `string` | service unique name | source | `string` | source URL | embed | `string` | URL for source embed page | width | `number` | embedded content width | height | `number` | embedded content height | caption | `string` | content caption ```json { "type" : "embed", "data" : { "service" : "coub", "source" : "https://coub.com/view/1czcdf", "embed" : "https://coub.com/embed/1czcdf", "width" : 580, "height" : 320, "caption" : "My Life" } } ``` # About CodeX CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies. | 🌐 | Join 👋 | Twitter | Instagram | | -- | -- | -- | -- | | [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team) | --- _Source: https://npm.io/package/@editorjs/embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._