Try every prop live in the playground, open on Angular, 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
CallmountEditor in ngAfterViewInit on the element of an ElementRef.photo-editor.component.ts
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
import { mountEditor } from '@embededitor/free/standalone';
import type { Lang } from '@embededitor/free/standalone';
@Component({
selector: 'app-photo-editor',
standalone: true,
template: '<div #host style="height: 600px"></div>'
})
export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
@Input() lang: Lang = 'en-us';
@Input({ required: true }) src!: string;
@ViewChild('host') host!: ElementRef<HTMLElement>;
private editor: ReturnType<typeof mountEditor> | null = null;
ngAfterViewInit() {
this.editor = mountEditor(this.host.nativeElement, this.options());
}
ngOnChanges() {
this.editor?.update(this.options());
}
ngOnDestroy() {
this.editor?.destroy();
this.editor = null;
}
private options() {
return { lang: this.lang, src: this.src };
}
}
Update Props
ngOnChanges sends the full options again through update(options), not a patch. Before the view is ready there is no editor yet, so the first call does nothing.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 ngOnDestroy, 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
CallmountEditor in ngAfterViewInit on the element of an ElementRef.photo-editor.component.ts
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
import { mountEditor } from '@embededitor/lite/standalone';
import type { Lang } from '@embededitor/lite/standalone';
@Component({
selector: 'app-photo-editor',
standalone: true,
template: '<div #host style="height: 600px"></div>'
})
export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
@Input() lang: Lang = 'en-us';
@Input({ required: true }) src!: string;
@ViewChild('host') host!: ElementRef<HTMLElement>;
private editor: ReturnType<typeof mountEditor> | null = null;
ngAfterViewInit() {
this.editor = mountEditor(this.host.nativeElement, this.options());
}
ngOnChanges() {
this.editor?.update(this.options());
}
ngOnDestroy() {
this.editor?.destroy();
this.editor = null;
}
private options() {
return { lang: this.lang, src: this.src };
}
}
Update Props
ngOnChanges sends the full options again through update(options), not a patch. Before the view is ready there is no editor yet, so the first call does nothing.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 ngOnDestroy, 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
CallmountEditor in ngAfterViewInit on the element of an ElementRef.photo-editor.component.ts
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
import { mountEditor } from '@embededitor/full/standalone';
import type { Lang } from '@embededitor/full/standalone';
@Component({
selector: 'app-photo-editor',
standalone: true,
template: '<div #host style="height: 600px"></div>'
})
export class PhotoEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
@Input() lang: Lang = 'en-us';
@Input({ required: true }) src!: string;
@ViewChild('host') host!: ElementRef<HTMLElement>;
private editor: ReturnType<typeof mountEditor> | null = null;
ngAfterViewInit() {
this.editor = mountEditor(this.host.nativeElement, this.options());
}
ngOnChanges() {
this.editor?.update(this.options());
}
ngOnDestroy() {
this.editor?.destroy();
this.editor = null;
}
private options() {
return { lang: this.lang, src: this.src };
}
}
Update Props
ngOnChanges sends the full options again through update(options), not a patch. Before the view is ready there is no editor yet, so the first call does nothing.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 ngOnDestroy, as above. Calling update after destroy throws.Next Steps
Props
Every option the editor takes.
mountEditor
The full signature.