Skip to main content

Configuration

exhibitionjs can be configured using both data attributes on HTML elements and options passed during initialization.

Editor Options (ExhibitionMonacoEditor)

These options apply to each code editor and can be set via the data-js-options attribute.

OptionTypeDefaultDescription
monacoMonacoInstance-Required. The Monaco Editor module instance.
monacoEditorCreatorEditorCreator-A function that creates the actual Monaco Editor instance.
monacoEditorOptionsobject{}Standard Monaco Editor construction options.
location"head" | "body"bodyWhere the code should be injected in the preview.
prioritynumber0Execution order of the snippet. Higher values run first.
trimDefaultValuebooleantrueWhether to trim leading/trailing whitespace from the initial editor value.
tagAttributesRecord<string, string>{}Attributes to add to the generated <script> or <style> tags.

Example:

<div data-js-exhibition__editor
data-js-options='{
"monacoEditorOptions": {"language": "typescript"},
"priority": 10,
"tagAttributes": {"type": "module"}
}'>
</div>

Init Options

When using Exhibition.create or Exhibition.createMultiple, you can pass an ExhibitionInitOptions object.

These options regulate how objects are initialized after being instantiated (instantiation is regulated by the dependency map).

OptionTypeDefaultDescription
initbooleantrueWhether to automatically initialize everything.
updatePreviewbooleanfalseWhether to trigger an initial preview update after initialization.

Priority of options

When options can be set through an attribute, the attribute's values override the values provided to the object in JavaScript.