# Cropping stickers with a secondary Pintura instance
We can use the [willRenderShapeControls](../../api/markup-editor/properties/#willrendershapecontrols) property to add a "crop" button above a sticker shape.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ jQuery](#jquery-panel-0)
* [index.html](#index-html-panel-0)
```html
```
* [App.jsx](#App-jsx-panel-0)
* [App.css](#App-css-panel-0)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useRef } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
openDefaultEditor,
createNode,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
const editorRef = useRef(null);
const willRenderShapeControls = (controls, selectedShapeId) => {
controls[0][3].push(
// Add an Edit button
createNode('Button', 'my-button', {
label: 'Edit',
onclick: () => {
// Find the currently selected shape
const annotations =
editorRef.current.editor.imageAnnotation;
const shape = annotations.find(
(shape) => shape.id === selectedShapeId
);
// Create our sticker editor and use the current backgroundImage as src
const stickerEditor = openDefaultEditor({
class: 'pintura-sticker-editor',
src: shape.backgroundImage,
});
// Update the shape when the sticker is edited
stickerEditor.on('process', ({ dest }) => {
// Update the backgroundImage of the active shape
shape.backgroundImage = URL.createObjectURL(dest);
// Refresh annotations
editorRef.current.editor.imageAnnotation = annotations;
});
},
})
);
return controls;
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
.pintura-sticker-editor {
--editor-modal-overlay-opacity: 0.65;
--editor-modal-border-radius: 1.5rem;
--editor-max-width: 40rem;
--editor-max-height: 50rem;
}
```
* [App.vue](#App-vue-panel-0)
```html
```
* [App.svelte](#App-svelte-panel-0)
```svelte
```
* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)
```javascript
import { Component, ViewChild } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import {
getEditorDefaults,
openDefaultEditor,
createNode,
PinturaNode,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private domSanitizer: DomSanitizer) {}
@ViewChild('editor') editor?: any;
editorDefaults: any = getEditorDefaults();
// Available stickers
stickers: any = [
'./sticker-one.svg',
'./sticker-two.svg',
'./sticker-three.svg',
];
// Manipulate shape controls menu
willRenderShapeControls = (
controls: any,
selectedShapeId: any
): PinturaNode[] => {
controls[0][3].push(
// Add an Edit button
createNode('Button', 'my-button', {
label: 'Edit',
onclick: () => {
// Find the currently selected shape
const annotations = this.editor.editor.imageAnnotation;
const shape = annotations.find(
(shape) => shape.id === selectedShapeId
);
// Create our sticker editor and use the current backgroundImage as src
const stickerEditor = openDefaultEditor({
class: 'pintura-sticker-editor',
src: shape.backgroundImage,
});
// Update the shape when the sticker is edited
stickerEditor.on('process', ({ dest }) => {
// Update the backgroundImage of the active shape
shape.backgroundImage = (
this.domSanitizer.bypassSecurityTrustResourceUrl(
URL.createObjectURL(dest)
)
);
// Refresh annotations
this.editor.editor.imageAnnotation = annotations;
});
},
})
);
return controls;
};
}
```
```html
```
```css
::ng-deep .pintura-editor {
height: 600px;
}
.pintura-sticker-editor {
--editor-modal-overlay-opacity: 0.65;
--editor-modal-border-radius: 1.5rem;
--editor-max-width: 40rem;
--editor-max-height: 50rem;
}
```
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
* [index.html](#index-html-panel-0)
```html
```