# Prancheta An in-page photo editor to crop, rotate, adjust brightness and color, apply filters and export the image. > Prancheta is an exclusive THM Componentes component that puts a photo editor inside your app. People crop to ratios such as 1:1 and 4:5, rotate, mirror, adjust brightness, contrast, saturation, temperature and vignette, apply filters with a live WebGL preview and export JPEG or PNG. It suits profile pictures and image uploads, with labels in Brazilian Portuguese. - Category: Forms and input - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, WebGL - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/prancheta/ ## What it looks like The screen splits between the photo and a panel with three tabs for cropping, adjustments and filters. Over the photo, a white frame with a rule-of-thirds grid and eight handles marks the crop, and everything outside it darkens. Rotating and mirroring come with a short animation. Adjustments are sliders, and seven filter looks plus the original appear as thumbnails made from your own photo. Holding a button shows the original for comparison. When there is room the panel sits beside the photo; in narrower layouts, below it. The export button downloads the file and shows its dimensions and weight. ## You may be looking for this if you asked for something like - “crop a profile picture before uploading, like social networks do” - “a simple image editor inside my web app” - “let users crop a photo to square or 4:5 on my site” - “apply an Instagram-style filter before saving the photo” - “adjust brightness and contrast of an image inside the app” - “rotate and crop a document photo before upload” - “edit a post image without leaving the page” ## Also known as image editor, image cropper, photo editor, crop and filter, photo filters, in-browser image editing ## When to use - Profile pictures for patients, professionals and customers - Uploads of document photos, records and receipts - Creating posts and brand images inside a dashboard - Product listings in online stores with consistent cropping ## When to avoid - Professional editing with layers, text or retouching, which it does not do - Images from another domain without CORS enabled, which cannot be edited - Products for people who do not read Portuguese, since the labels are in Brazilian Portuguese ## How to ask your AI ```text Add an image editor to the profile picture screen: 1:1 crop with handles and keyboard control, rotation, brightness and contrast adjustments, WebGL filter previews with a Canvas 2D fallback, JPEG export, lazy loading and my brand colors. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Prancheta ### Does Prancheta upload the photo to a server? No. Prancheta runs entirely in the browser with no network calls: it opens local files and returns the edited image as a data URL in the export event, with type, width, height and size in bytes. Sending it to your server or storage is up to your code, which your AI can build from that event. ### Does Prancheta work without WebGL and on phones? Yes. Prancheta tries WebGL2, then WebGL1, and falls back to Canvas 2D when neither is available. On phones, the crop handles respond to touch and the panel moves below the photo. Images larger than 4096 px are scaled down on open so they fit the graphics card. ### How do I use Prancheta in Nuxt? The THM Componentes prompt asks your AI to wrap Prancheta in ClientOnly with a static fallback, an image or a color, and to load it on demand, since it relies on canvas and WebGL. The starting image comes from the src prop and must be on the same domain or served with CORS enabled. ## Related components - [Malote](https://vibecode.thmtecnologia.com/en/components/malote/): An area to drag files into or click to choose, with a card that lifts up and a list of the selected files. - [Retoque](https://vibecode.thmtecnologia.com/en/components/retoque/): Two stacked images or screens and a line in the middle you move with the mouse or a finger to compare. - [Lambe-lambe](https://vibecode.thmtecnologia.com/en/components/lambe-lambe/): The photo turns into printed dots, like a newspaper or comic book, and a loupe shows the original. - [Anilina](https://vibecode.thmtecnologia.com/en/components/anilina/): A full color picker that shows what the screen can display, checks contrast and builds a tonal palette. - [Tabelião](https://vibecode.thmtecnologia.com/en/components/tabeliao/): An area to sign with a finger, stylus or mouse, with a baseline, the signer's name, the date and export. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).