v149 · android · user input

Android IME media insertion

Android IMEs can now insert images, GIFs, and stickers directly into web pages — the same affordance native Android apps have had via InputConnection.commitContent(). Web editors that opt in receive the media as a InputEvent with a dataTransfer attached.

concepts

  1. Sticker Drop

    An editable surface that accepts pasted/inserted media from any source. Drop a GIF in from the IME picker on Android (or drag-and-drop from desktop as a fallback) and the editor renders it inline.

  2. Comment Composer

    A social-style comment box that intercepts inserted media before it enters the document and lifts each file into a removable attachment chip — the shape Twitter/Bluesky-style apps actually want. Live event log shows the beforeinput/input flow.

  3. BeforeInput Monitor

    Live beforeinput / input event log for a contenteditable area. Toggle MIME-type acceptance and block insertion with preventDefault(). Desktop: simulate GIF/PNG/WebP insertions with the toolbar buttons — the same event flow Android IME media produces.

  4. Media Picker Demo

    A contenteditable rich text editor with enterkeyhint set, listening on beforeinput and paste events. A live event monitor displays inputType, dataTransfer.items, and image detection. A "Simulate Insertion" button fires a canvas-generated image through the same flow, with inserted images appearing as thumbnails with file metadata.

  5. MIME Type Filter

    Toggle which MIME types (GIF, PNG, JPEG, WebP, MP4) your editor accepts, then simulate IME insertions to watch the filter call event.preventDefault() on rejected types. Shows exactly how to gate the beforeinput handler by content type.

  6. Media Gallery

    A contenteditable editor that lifts inserted media out of the DOM and into a separate scrollable gallery. On mobile, insert real media from the Android keyboard; on desktop, simulate GIF/PNG/WebP/JPEG insertions with the toolbar buttons.

why it shipped

On Android, the keyboard is often the entry point for media: GIPHY-style stickers, emoji, custom GIFs. Native apps have been able to receive those for years; web inputs have not. That gap forced web messaging clients to ship custom keyboards or fall back to "share to" intents. Wiring up InputConnection.commitContent() in WebView and Chrome on Android lets the web close that gap with no new web API — the existing InputEvent + DataTransfer path carries the media.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗