Skip to main content

Interface: UserConfig

User preferences and settings for the playground.

Extends​

Extended by​

Properties​

appLanguage​

appLanguage: undefined | AppLanguage

Sets the app UI language used.

Defined in​

src/sdk/models.ts:1095

autosave​

autosave: boolean

If true, the project is automatically saved on code change, after time delay.

Default​

false

Defined in​

src/sdk/models.ts:1044

autotest​

autotest: boolean

If true, the project is watched for code changes which trigger tests to auto-run.

Default​

false

Defined in​

src/sdk/models.ts:1050

autoupdate​

autoupdate: boolean

If true, the result page is automatically updated on code change, after time delay.

Default​

true

Defined in​

src/sdk/models.ts:1037

closeBrackets​

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default​

true

Inherited from​

EditorConfig.closeBrackets

Defined in​

src/sdk/models.ts:1008

delay​

delay: number

Time delay (in milliseconds) following code change, after which the result page is updated (if autoupdate is true) and/or the project is saved (if autosave is true).

Default​

1500

Defined in​

src/sdk/models.ts:1058

editor​

editor: undefined | "auto" | "monaco" | "codemirror" | "codejar"

Selects the code editor to use.

If undefined (the default), Monaco editor is used on desktop, CodeMirror is used on mobile and in simple mode, while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

Default​

undefined

Inherited from​

EditorConfig.editor

Defined in​

src/sdk/models.ts:929

editorMode​

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

EditorConfig.editorMode

Defined in​

src/sdk/models.ts:1025

editorTheme​

editorTheme: undefined | string | EditorTheme[]

Sets the code editor themes.

See docs for editor themes for details.

Examples​

"vs"
"monaco:twilight, codemirror:one-dark"
["vs@light"]
["vs@light", "vs-dark@dark"]
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]

Inherited from​

EditorConfig.editorTheme

Defined in​

src/sdk/models.ts:955

emmet​

emmet: boolean

Enables Emmet.

Default​

true

Inherited from​

EditorConfig.emmet

Defined in​

src/sdk/models.ts:1020

foldRegions​

foldRegions: boolean

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

Default​

false

Inherited from​

EditorConfig.foldRegions

Defined in​

src/sdk/models.ts:1002

fontFamily​

fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

EditorConfig.fontFamily

Defined in​

src/sdk/models.ts:960

fontSize​

fontSize: undefined | number

Sets the font size.

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

Default​

undefined

Inherited from​

EditorConfig.fontSize

Defined in​

src/sdk/models.ts:968

formatOnsave​

formatOnsave: boolean

If true, the code is automatically formatted on saving the project.

Default​

false

Defined in​

src/sdk/models.ts:1064

layout​

layout: undefined | "responsive" | "horizontal" | "vertical"

Sets the app layout to horizontal or vertical. If set to "responsive" (the default) or undefined, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal.

Default​

"responsive"

Defined in​

src/sdk/models.ts:1073

lineNumbers​

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default​

true

Inherited from​

EditorConfig.lineNumbers

Defined in​

src/sdk/models.ts:990

minimap​

minimap: boolean

Enables minimap in code editor.

Default​

false

Inherited from​

EditorConfig.minimap

Defined in​

src/sdk/models.ts:1014

recoverUnsaved​

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default​

true

Defined in​

src/sdk/models.ts:1079

semicolons​

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default​

true

Inherited from​

FormatterConfig.semicolons

Defined in​

src/sdk/models.ts:900

showSpacing​

showSpacing: boolean

Enables showing element spacing in the result page.

Default​

false

Defined in​

src/sdk/models.ts:1085

singleQuote​

singleQuote: boolean

Configures Prettier code formatter to use single quotes instead of double quotes.

Default​

false

Inherited from​

FormatterConfig.singleQuote

Defined in​

src/sdk/models.ts:905

tabSize​

tabSize: number

The number of spaces per indentation-level.

Also used in code formatting.

Default​

2

Inherited from​

FormatterConfig.tabSize

Defined in​

src/sdk/models.ts:984

theme​

theme: Theme

Sets the app theme to light/dark mode.

Default​

"dark"

Inherited from​

EditorConfig.theme

Defined in​

src/sdk/models.ts:935

themeColor​

themeColor: undefined | string

Sets the app theme color. If undefined, it is set to "hsl(214, 40%, 50%)".

Default​

undefined

Inherited from​

EditorConfig.themeColor

Defined in​

src/sdk/models.ts:942

trailingComma​

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default​

true

Inherited from​

FormatterConfig.trailingComma

Defined in​

src/sdk/models.ts:911

useTabs​

useTabs: boolean

If true, lines are indented with tabs instead of spaces.

Also used in code formatting.

Default​

false

Inherited from​

FormatterConfig.useTabs

Defined in​

src/sdk/models.ts:976

welcome​

welcome: boolean

If true, the welcome screen is displayed when the app loads.

Defined in​

src/sdk/models.ts:1090

wordWrap​

wordWrap: boolean

Enables word-wrap for long lines.

Default​

false

Inherited from​

EditorConfig.wordWrap

Defined in​

src/sdk/models.ts:996

Sponsors