diff --git a/knowledge-base/in-place-editor.md b/knowledge-base/in-place-editor.md
new file mode 100644
index 0000000000..1bacbb9f82
--- /dev/null
+++ b/knowledge-base/in-place-editor.md
@@ -0,0 +1,753 @@
+---
+title: In-Place Editor Component
+description: Learn how to create a custom inplace editor component, which blends seamlessly in other web page text content.
+type: how-to
+page_title: How to Implement In-Place Editor Component
+slug: kb-in-place-editor
+position:
+tags: telerik, blazor, inplace, in place
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
UI for Blazor
+
+
+
+
+## Description
+
+This KB article demonstrates and describes how to create a custom `InPlaceEditor` component. The article also answers the following questions:
+
+* How to create an in-place editor, which looks like text when in read mode and switches to an input component when editable?
+* How to toggle between text content and an editor to allow users to edit something in place?
+
+## Solution
+
+The sample below uses an algorithm which toggles between read-only UI and an editable component on user click and blur.
+
+### How It Works
+
+* `InPlaceEditor` is a generic component. It supports strings and most value types, including nullable types.
+* Initially, the component renders a clickable [Button]({%slug components/button/overview%}) with [`Clear` `FillMode`]({%slug button-appearance%}) that shows the current `Value`.
+* The component detects the type of its `Value` and renders the appropriate Telerik editor:
+ * [CheckBox]({%slug checkbox-overview%}) for `bool`
+ * [DatePicker]({%slug components/datepicker/overview%}) for `DateTime` and `DateOnly`
+ * [NumericTextBox]({%slug components/numerictextbox/overview%}) for `int`, `double`, `decimal`, and the other numeric types
+ * [TextBox]({%slug components/textbox/overview%}) for `string`
+ * [TimePicker]({%slug components/timepicker/overview%}) for `TimeOnly`
+* If the `Width` parameter is not set, the In-Place Editor approximately matches the width of its editor components to the current `Value` length. The component uses a `monospace` `font-family` to make this easier.
+* The component features a `ReadOnly` mode that controls the editability, for example, depending on user permissions.
+* The `DisplayFormat` parameter affects the `Value` consistently in both read mode and edit mode.
+* The `Placeholder` parameter provides a helper label that will show when the `Value` is `null` or empty.
+* The `ShowIcons` parameter controls the visibility of optional [SVG Icons]({%slug common-features-icons%}}#svgicon-component). The icons hint users about the ability to edit the component `Value` or provide clickable **Save** and **Cancel** commands in edit mode. The parameter is of type `InPlaceEditorShowIcons`, which is a custom enum and must be imported in both `InPlaceEditor.razor` and all `.razor` files that use `InPlaceEditor`.
+* The `Class` parameter allows you to apply custom styles.
+* The `Title` parameter allows you to show a tooltip hint on read mode.
+* To [see invalid state styling and validation messages in Forms]({%slug inputs-kb-validate-child-component%}), pass the respective `ValueExpression` values to the `InPlaceEditor` component.
+* `InPlaceEditor.razor.css` is a CSS isolation file. It depends on a `YourAppName.styles.css` file in `App.razor` to load.
+
+### Example
+
+The features and business logic below can be subject to additional customizations and enhancements.
+
+To run the code successfully:
+
+* Replace `YourAppName` with the actual root namespace of your app.
+* Make sure your app supports CSS isolation and loads a `YourAppName.styles.css` file. Browser caching of this file can prevent the InPlaceEditor styles from showing.
+
+
+
+````Home.razor
+@* import InPlaceEditorType enum *@
+@using YourAppName.Models
+
+@using System.ComponentModel.DataAnnotations
+
+
InPlaceEditor Component
+
+
+ This in-place editor component works with strings and value types, including nullables, for example:
+
+
+
+ The component supports custom styles and responsive textbox width that depends on the value:
+
+
+
+ The icon can be visible only on hover:
+
+
+
+ (unless the value is empty) or never:
+
+
+
+ You can even edit booleans:
+
+
+
+
+
Configuration
+
+
+
+
+
+
+
+
+ Show Icon:
+
+
+ Always
+
+
+ Hover
+
+
+ Never
+
+
+