How to get FxNodePreview

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

Type: Component

Makes a preview of a loaded document in the editor. This can also be a preview of a node inside the given document. The preview is more compact styled than the normal document view.

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


# Name Type Description
1. documentId DocumentId

The document ID of the document to preview

2. [paddingSize] Number | String | Object

The amount of padding rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no padding at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

Or you can pass an object whose properties determine a specific padding size for either:

  • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

  • 'vertical': %single size value% to set the 'top' and 'bottom' padding

Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

  Default value
3. [traversalRootNodeId] NodeId

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

  Default value

Related links

Was this page helpful?