How to build in-place editable modern webpart?

Question

I'm trying to build a webpart that display tiles with custom data.

I'm trying to mimic the behavior of the page banner webpart that allow to edit each tiles directly within the webpart, each tile having an edit button (when page is in edit mode).

How to do that? I've seen a lot of documentation regarding the property pane, but always scoped to the global webpart (not individual parts)

Answer 1

You will have to build that experience within your custom components, and then send the configuration back to the web part to be saved as a web part property.

This example may help as an implementation reference: WebPartTitle control.

This component allows the user to edit the title of the web part directly within the page, and the value is then passed back to the web part to be saved.