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:1058

autosave​

autosave: boolean

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

Default​

false

Defined in​

src/sdk/models.ts:1007

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:1013

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:1000

closeBrackets​

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default​

true

Inherited from​

EditorConfig.closeBrackets

Defined in​

src/sdk/models.ts:971

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:1021

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:892

editorMode​

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

EditorConfig.editorMode

Defined in​

src/sdk/models.ts:988

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:918

emmet​

emmet: boolean

Enables Emmet.

Default​

true

Inherited from​

EditorConfig.emmet

Defined in​

src/sdk/models.ts:983

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:965

fontFamily​

fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

EditorConfig.fontFamily

Defined in​

src/sdk/models.ts:923

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:931

formatOnsave​

formatOnsave: boolean

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

Default​

false

Defined in​

src/sdk/models.ts:1027

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:1036

lineNumbers​

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default​

true

Inherited from​

EditorConfig.lineNumbers

Defined in​

src/sdk/models.ts:953

minimap​

minimap: boolean

Enables minimap in code editor.

Default​

false

Inherited from​

EditorConfig.minimap

Defined in​

src/sdk/models.ts:977

recoverUnsaved​

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default​

true

Defined in​

src/sdk/models.ts:1042

semicolons​

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default​

true

Inherited from​

FormatterConfig.semicolons

Defined in​

src/sdk/models.ts:863

showSpacing​

showSpacing: boolean

Enables showing element spacing in the result page.

Default​

false

Defined in​

src/sdk/models.ts:1048

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:868

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:947

theme​

theme: Theme

Sets the app theme to light/dark mode.

Default​

"dark"

Inherited from​

EditorConfig.theme

Defined in​

src/sdk/models.ts:898

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:905

trailingComma​

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default​

true

Inherited from​

FormatterConfig.trailingComma

Defined in​

src/sdk/models.ts:874

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:939

welcome​

welcome: boolean

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

Defined in​

src/sdk/models.ts:1053

wordWrap​

wordWrap: boolean

Enables word-wrap for long lines.

Default​

false

Inherited from​

EditorConfig.wordWrap

Defined in​

src/sdk/models.ts:959

Sponsors