EntityEditor

Save PDF

Last Updated: May 5, 2026
2 minute read

MarkLogic Server
Documentation

The EntityEditor component displays fields from a document in a structured format, with optional editing capabilities. It is highly configurable, allowing you to define how each field is rendered and includes support for lists, custom content display, and tooltips.

Display fields with custom titles, descriptions, and order.
Render values as strings, lists (using chips), or with custom render logic.
Optional editing mode with support for custom editors, required fields, and save/cancel actions.
Tooltips for field descriptions.
Configurable layout and styles.

EntityEditor example rendering

Display mode

Edit mode

EntityEditor example configuration

import { EntityEditor } from 'ml-fasttrack';

const results = {
    "id": 10016,
    "tags": [
        "Wall Street Journal",
        "Los Angeles Times"
    ],
    "address": {
        "street": "854 Dunning Plaza",
        "city": "Los Angeles",
        "state": "CA",
        "postal": 90065
    }
}

const handleSave = (values) => {
  console.log("Saved values:", values);
};

//...

<EntityEditor
  title={<b>Document Details</b>}
  data={results || {}}
  editConfig={{
    onSave: handleSave,
  }}
  style={{ width: "500px" }}
  config={[
    {
      key: "organizationId",
      title: "ID",
      order: 1,
      valuePath: { path: "id" },
      editConfig: { isRequired: true },
      renderConfig: { type: "default" },
    },
    {
      key: "tags",
      title: "Tags",
      valuePath: { path: "tags" },
      renderConfig: {
        type: "list",
        onRender: (tag) => tag,
        ChipProps: { themeColor: "info" },
      },
    },
    {
      key: "address",
      title: "Address",
      order: 2,
      valuePath: {
        path: "address",
      },
      editConfig: {
        disabled: true,
      },
      renderConfig: {
        onRender: (address) => {
          return (
            <div
              style={{
                flex: 2,
                display: "flex",
                flexDirection: "column",
                gap: "14px",
              }}
            >
              <div>
                <b>Street: </b>
                <span>{address.street}</span>
              </div>
  
              <div>
                <b>City: </b>
                <span>{address.city}</span>
              </div>
  
              <div>
                <b>State: </b>
                <span>{address.state}</span>
              </div>
  
              <div>
                <b>Postal: </b>
                <span>{address.postal}</span>
              </div>
            </div>
          );
        },
      },
    },
  ]}
/>

Each valuePath takes a PathConfig object for defining the values from data to display. The onSave property in editConfig enables you to save your edited document content as you wish.

For more examples and information about the EntityEditor widget, see FastTrack Storybook.

Develop with FastTrack

EntityEditor

Table of Contents

EntityEditor

EntityEditor widget features

EntityEditor example rendering

Display mode

Edit mode

EntityEditor example configuration