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

autosave​

autosave: boolean

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

Default​

false

Defined in​

src/sdk/models.ts:966

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

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

closeBrackets​

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default​

true

Inherited from​

EditorConfig.closeBrackets

Defined in​

src/sdk/models.ts:930

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

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

editorMode​

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

EditorConfig.editorMode

Defined in​

src/sdk/models.ts:947

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

emmet​

emmet: boolean

Enables Emmet.

Default​

true

Inherited from​

EditorConfig.emmet

Defined in​

src/sdk/models.ts:942

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

fontFamily​

fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

EditorConfig.fontFamily

Defined in​

src/sdk/models.ts:882

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

formatOnsave​

formatOnsave: boolean

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

Default​

false

Defined in​

src/sdk/models.ts:986

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

lineNumbers​

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default​

true

Inherited from​

EditorConfig.lineNumbers

Defined in​

src/sdk/models.ts:912

minimap​

minimap: boolean

Enables minimap in code editor.

Default​

false

Inherited from​

EditorConfig.minimap

Defined in​

src/sdk/models.ts:936

recoverUnsaved​

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default​

true

Defined in​

src/sdk/models.ts:1001

semicolons​

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default​

true

Inherited from​

FormatterConfig.semicolons

Defined in​

src/sdk/models.ts:822

showSpacing​

showSpacing: boolean

Enables showing element spacing in the result page.

Default​

false

Defined in​

src/sdk/models.ts:1007

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

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

theme​

theme: Theme

Sets the app theme to light/dark mode.

Default​

"dark"

Inherited from​

EditorConfig.theme

Defined in​

src/sdk/models.ts:857

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

trailingComma​

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default​

true

Inherited from​

FormatterConfig.trailingComma

Defined in​

src/sdk/models.ts:833

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

welcome​

welcome: boolean

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

Defined in​

src/sdk/models.ts:1012

wordWrap​

wordWrap: boolean

Enables word-wrap for long lines.

Default​

false

Inherited from​

EditorConfig.wordWrap

Defined in​

src/sdk/models.ts:918

Sponsors