Is it possible to have a full editing experience within Experience Editor with components that don't use the built-in @sitecore/sitecore-jss-nextjs Fields and Types?

For example, I have a component that looks like this:

const MyComponent = (props: MyComponentProps): JSX.Element => (
    <h1><Text field={props.fields.myComponentHeading}/></h1>
    <p><Text field={props.fields.myComponentText}/></p>

In the above example, the value for the <h1> and <p> can be edited directly in the Experience editor.

In contrast in this example:

const MyComponent = (props: MyComponentProps): JSX.Element => (

a content editor would need to select the component, then click the pencil icon and edit the values in the modal window for the data source.

Is there a way to allow the Experience Editor workflow to be the same in both examples, or is using elements like <Text field={...} /> the only way to do this?

1 Answer 1


I think the below information will be sufficient to understand the in-line edition feature with Experience Editor in the JSS app.

  • The Sitecore Experience Editor only supports in-page (inline) editing of a limited number of fields. These are the field for which JSS provides components.

  • Internal link fields, such as Droptree, need to be edited in one of the form-based UIs, like the field editor "pencil" button mentioned in the styleguide. To change the Droptree (or Treelist, or Multilist, etc.) field itself and change the linked items, you can use that field editor button.

  • You can still use <Text /> and other components to render content from the linked item. That can still be edited inline.

You can find the discussion here. Where @nickwesselman stated the above.


Hope this answer your question.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.