Lumeo

Inplace Editor

Edit text directly inline — click to switch between display and edit mode without navigating to a separate form.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<InplaceEditor />

When to Use

  • Inline editing where users click text to edit it directly in place
  • Quick updates to titles, names, or status fields without opening a modal
  • Editable table cells or list items for rapid data entry
  • Settings panels where values should be editable with minimal friction
John Doe

Value: John Doe

Senior Engineer
A software engineer who loves clean code.
Active

Selected: Active

Click to edit your email address.

not-an-email

This value is invalid.

Editor
This value is locked

Switch EditMode to see how the edit control changes when you click to edit.

Sample value

Value: Sample value

API Reference

InplaceEditor

  • Input — Standard text input for form-based editing
  • Form — Full form layout with validation for more complex editing scenarios
  • DataGrid — Data grid with built-in inline editing for tabular data