Render React code

Type /react to add a Render React code block.

Render React code

1. Select Render 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 verticallly resize the preview area, click the resize handle and drag to the desired height

/

The following options for render code blocks are available in the block configuration menu:

• Alignment: Choose whether to align the preview left or center
• Background color: Select a background color for the preview
• Show code view: If turned off, the code will be hidden in the published documentation, only the preview will be shown
• Edit dependencies: This will take you to the settings page to edit the package.json, see below

Edit dependencies

Include custom or predefined dependencies for your code block.

1. Either click Edit dependencies in the block configuration menu, or go to Settings -> General -> Render Code Package.json
2. 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
3. If you select a template and make edits, you can click Reset to default to start with the default template again
4. The dependencies will now be used for all of your Render Code blocks

Live example

The following widget has live code enabled, so click the new "Edit" button to see it in action!

Try changing one of the alerts to error message using the following code:

                                                        
                                                        
                                                            <Alert severity="error">Error Error Error!</Alert>