Code blocks

Render React code

1. Select React Code from the block menu.
2. Type or paste code into the box.
3. Your rendered code will appear in the preview above.
4. To vertically resize the preview area, click the resize handle and drag to the desired height

The following display options for React code blocks are available in the property panel:

• Align preview content: Choose whether to align the preview left or center
• Preview height: Adjust the height of the preview.
• Background color: Select a background color for the preview
• Show code: If turned off, the code will be hidden in the published documentation, only the preview will be shown

Edit code

1. Click the Edit code button in the property panel.
2. You can edit the live code within the block in the React code tab. A preview of the code is shown on the right.
3. Click Save.

Edit global dependencies

Include custom or predefined dependencies for your code block.

1. Click the Edit code button in the property panel.
2. You can edit the dependencies within the block in the Global dependencies tab. A preview of the code is show on the right.
3. Click Save.
4. Select a template to use if you want to use an existing library as a dependency, or fill in the package.json with your own custom content.
5. Click Save. The dependencies will now be used for all of your Render Code blocks.