Copy-paste prompt · Quill

Add image upload to your Quill editor in one prompt

Quill is a contenteditable editor, so it uses PixelVault's upload helper rather than the textarea widget. This prompt wires paste + drop to upload images and insert them with Quill's embed API — no upload backend. Copy it into your AI coding agent.

Works with Claude CodeCursorWindsurfCopilot

1
Copy the prompt
The one big button below.
2
Paste it into your agent
In your project — Claude Code, Cursor, etc.
3
Drop in your key
Swap pv_pub_REPLACE_ME for a free key. Done.

Prompt for your coding agent

Add image paste-and-host to my Quill editor using PixelVault.

Context — read this first and use only the documented API:
- Overview + API: https://pixelvault.dev/llms.txt
- PixelVault upload helper (from @pixelvault-dev/paste):
    import { uploadImage } from "@pixelvault-dev/paste";
    const { url } = await uploadImage(file, { publishableKey: "pv_pub_REPLACE_ME" });
    // returns { id, url, mimeType, size }; throws PixelVaultPasteError on failure

Important: Quill is a contenteditable editor, not a <textarea>, so do NOT use the
paste-react/usePaste widget here — use uploadImage() directly.

Do this:
1. Install: npm install @pixelvault-dev/paste

2. On my Quill instance, listen for image files pasted or dropped into the editor:
   add "paste" and "drop" listeners on quill.root, pull any image File out of
   event.clipboardData / event.dataTransfer, and call event.preventDefault() so
   Quill doesn't try to insert the raw image data itself.

3. For each image file: call uploadImage(file, { publishableKey }), and on success
   insert it with Quill's documented embed API at the current selection:
     const range = quill.getSelection(true);
     quill.insertEmbed(range.index, "image", url, "user");
     quill.setSelection(range.index + 1);
   Show a fallback if the upload throws PixelVaultPasteError.

4. Use my publishable key where I wrote pv_pub_REPLACE_ME (I'll paste my own).

Rules:
- For the PixelVault part, use ONLY uploadImage(file, options) as documented above —
  do NOT invent PixelVault endpoints, options, or other packages.
- Use Quill's own documented insertEmbed(index, "image", url) API for insertion.
- Don't block the editor on the upload; insert the image when the URL resolves.

What the agent will do

Install @pixelvault-dev/paste (core)
Listen for pasted/dropped images on quill.root, upload via uploadImage()
Insert with quill.insertEmbed(i, 'image', url)
No backend changes — uploads go straight to PixelVault with your key

Grab your free key

The one thing the agent can't generate is your publishable key (pv_pub_…) — it's origin-scoped and upload-only, safe to ship in browser code. Create one, add your app's origin, and paste it in.

Get your free key →

Free tier: 200 MB storage, 500 uploads/mo, 1 GB bandwidth. No card.

How this differs from the textarea prompts

The React, Vue, and plain-HTML prompts use our drop-in widget, which attaches to a <textarea>. Quill renders a contenteditable surface, so the widget can't attach to it — you upload the file yourself with the lower-level uploadImage() helper and insert with Quill's embed API, exactly like the TipTap and Lexical prompts.

The PixelVault part, by hand

Everything editor-specific is standard Quill. The only PixelVault call is one function:

import { uploadImage } from "@pixelvault-dev/paste";

const { url } = await uploadImage(file, {
  publishableKey: "pv_pub_xxxxxxxx",
});
// then insert at the caret with Quill's embed API:
const range = quill.getSelection(true);
quill.insertEmbed(range.index, "image", url, "user");
quill.setSelection(range.index + 1);

Wire the upload into paste/drop listeners on quill.root, and insert on success. The docs and llms.txt have the full reference.

Why a prompt instead of docs?

Because "add image upload to my Quill editor" is exactly what you'd hand a coding agent — and it needs to know to use uploadImage() plus Quill's insertEmbed, not guess at a nonexistent widget. This prompt grounds the PixelVault call and lets the agent handle Quill's API. Copy, paste, ship.

FAQ

How do I add image upload to a Quill editor?

Copy the prompt above into your AI coding agent. Because Quill is contenteditable (not a textarea), it uses PixelVault's uploadImage() helper on paste/drop of image files, then inserts the returned CDN URL with quill.insertEmbed(index, "image", url).

Why doesn't the usePaste widget work with Quill?

The usePaste / attachPaste widget attaches to a <textarea> or <input>. Quill renders a contenteditable surface, so you upload with the lower-level uploadImage() function and insert with Quill's insertEmbed API instead.

Do I need an upload backend for Quill image uploads?

No. uploadImage() sends the file straight from the browser to PixelVault with an origin-scoped, upload-only publishable key. There's no server route to build.