How does in-line editing editing work in CiviCRM?
Assuming you have an API that allows to modify the entity you want (if it's a custom one, it's easy to add), adding a few classes should be enough to enable the edit in place. You need to define the entity that contain the field (class crm-entity, id "type-{id}" on a containing dom node and then "crm-editable crmf-{fieldname}". for example:

&lt;table&gt;
  &lt;tr class="crm-entity" id="contact-123"&gt;

    &lt;!-- textfield (default type) --&gt;
    &lt;td class="crm-editable crmf-first_name"&gt;Fred&lt;/td&gt;

    &lt;!-- select list with empty option --&gt;
    &lt;!-- (note: options will be fetched automatically by the api) --&gt;
    &lt;td class="crm-editable crmf-prefix_id"
        data-type="select"
        data-empty-option="{ts}- none -{/ts}"&gt;Mr.&lt;/td&gt;

    &lt;!-- yes/no select --&gt;
    &lt;td class="crm-editable crmf-is_deceased" data-type="boolean"&gt;
      No
    &lt;/td&gt;

  &lt;/tr&gt;
&lt;/table&gt;


More details in the doc

https://docs.civicrm.org/dev/en/latest/framework/ui/#in-place-field-editing