Type: React component

How to get FxNodePreviewWithLinkSelector?


import FxNodePreviewWithLinkSelector from 'fontoxml-fx/src/FxNodePreviewWithLinkSelector.jsx'

Makes a preview of a loaded document in the editor in which a node can be selected. This can also be a preview of a node inside the given document. The preview is less compact styled than the normal document view and will get a scrollbar if the preview is too long.

If the document wasn't already opened in the editor, than use the FxDocumentLoader to load it for the preview.

The selected node in the preview, will also be shown in an information drawer and will be scrolled in to view when the component is mounted.


  1. documentId


    The document ID of the document to preview

  2. onSelectedNodeChange


    Type: Function

    A callback that is called whenever the user clicks on a node in the preview. This node must meet the requirements of the selector property.



    Default value

  3. selector


    Returns all nodes that can be selected in the preview, starting from the documents first node.

    For example use '//*[@id]' to select all nodes with an id attribute

    Note that unlike other "selector" properties, this is actually a query. The name is kept for compatibility.

  4. selectedNodeId


    Type: NodeId

    The selectedNode will be highlighted (selected) in the preview.

    Default value

  5. traversalRootNodeId


    Type: NodeId

    When provided will show a preview for a single node instead of a full document.

    Default value