Try every prop live in the playground, open on Vue, and copy the code it writes.
- Free
- Lite
- Full
Free is on public npm, with no key. It has the Adjust tools, and a small “embededitor.com” badge in the corner of the menu.Give the host element a height: the editor fills it.
Install
npm install @embededitor/free
yarn add @embededitor/free
pnpm add @embededitor/free
bun add @embededitor/free
Render
PhotoEditor.vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/free/standalone';
import type { Lang } from '@embededitor/free/standalone';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;
const options = () => ({ lang: props.lang, src: props.src });
onMounted(() => {
if (host.value) {
editor = mountEditor(host.value, options());
}
});
watch(() => props.lang, () => {
editor?.update(options());
});
onBeforeUnmount(() => {
editor?.destroy();
});
</script>
<template>
<div ref="host" style="height: 600px"></div>
</template>
Update Props
update(options) takes the full options again, not a patch. The watch above sends them whenever lang changes.src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.Clean Up
Calldestroy() in onBeforeUnmount, as above. Calling update after destroy throws.Lite has the Adjust tools, without the badge. It installs from the private registry, with the key of your license.Yarn 2 and newer ignore Set the key where your install runs, your shell or your CI’s secrets, never in git:Give the host element a height: the editor fills it.
Set Up the Registry
Your license key is on its card in your account ataccount.embededitor.com. Buy a plan to get one.Point the @embededitor scope at the registry, and keep the key in an environment variable named EMBED_EDITOR_KEY, out of git.For npm, pnpm, bun and Yarn 1, add this to the .npmrc of your project:.npmrc
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
.npmrc. Add this to .yarnrc.yml instead:.yarnrc.yml
npmScopes:
embededitor:
npmRegistryServer: "https://get.embededitor.com"
npmAuthToken: "${EMBED_EDITOR_KEY}"
Terminal
export EMBED_EDITOR_KEY=<your-key>
Install
npm install @embededitor/lite
yarn add @embededitor/lite
pnpm add @embededitor/lite
bun add @embededitor/lite
Render
PhotoEditor.vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/lite/standalone';
import type { Lang } from '@embededitor/lite/standalone';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;
const options = () => ({ lang: props.lang, src: props.src });
onMounted(() => {
if (host.value) {
editor = mountEditor(host.value, options());
}
});
watch(() => props.lang, () => {
editor?.update(options());
});
onBeforeUnmount(() => {
editor?.destroy();
});
</script>
<template>
<div ref="host" style="height: 600px"></div>
</template>
Update Props
update(options) takes the full options again, not a patch. The watch above sends them whenever lang changes.src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.Clean Up
Calldestroy() in onBeforeUnmount, as above. Calling update after destroy throws.Full has every tool, without the badge. It installs from the private registry, with the key of your license.Yarn 2 and newer ignore Set the key where your install runs, your shell or your CI’s secrets, never in git:Give the host element a height: the editor fills it.
Set Up the Registry
Your license key is on its card in your account ataccount.embededitor.com. Buy a plan to get one.Point the @embededitor scope at the registry, and keep the key in an environment variable named EMBED_EDITOR_KEY, out of git.For npm, pnpm, bun and Yarn 1, add this to the .npmrc of your project:.npmrc
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
.npmrc. Add this to .yarnrc.yml instead:.yarnrc.yml
npmScopes:
embededitor:
npmRegistryServer: "https://get.embededitor.com"
npmAuthToken: "${EMBED_EDITOR_KEY}"
Terminal
export EMBED_EDITOR_KEY=<your-key>
Install
npm install @embededitor/full
yarn add @embededitor/full
pnpm add @embededitor/full
bun add @embededitor/full
Render
PhotoEditor.vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/full/standalone';
import type { Lang } from '@embededitor/full/standalone';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;
const options = () => ({ lang: props.lang, src: props.src });
onMounted(() => {
if (host.value) {
editor = mountEditor(host.value, options());
}
});
watch(() => props.lang, () => {
editor?.update(options());
});
onBeforeUnmount(() => {
editor?.destroy();
});
</script>
<template>
<div ref="host" style="height: 600px"></div>
</template>
Update Props
update(options) takes the full options again, not a patch. The watch above sends them whenever lang changes.src and state are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.Clean Up
Calldestroy() in onBeforeUnmount, as above. Calling update after destroy throws.Next Steps
Props
Every option the editor takes.
mountEditor
The full signature.