Skip to main content

Interface: UserConfig

Extends

Extended by

Properties

appLanguage

appLanguage: undefined | AppLanguage

Sets the app UI language used.

Defined in

models.ts:707


autosave

autosave: boolean

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

Default

false

Defined in

models.ts:656


autotest

autotest: boolean

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

Default

false

Defined in

models.ts:662


autoupdate

autoupdate: boolean

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

Default

true

Defined in

models.ts:649


closeBrackets

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default

true

Inherited from

EditorConfig.closeBrackets

Defined in

models.ts:801


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

models.ts:670


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

models.ts:722


editorMode

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from

EditorConfig.editorMode

Defined in

models.ts:812


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

models.ts:748


emmet

emmet: boolean

Enables Emmet.

Default

true

Inherited from

EditorConfig.emmet

Defined in

models.ts:807


enableAI

enableAI: boolean

If true, AI code assistant is enabled.

Default

false

Inherited from

EditorConfig.enableAI

Defined in

models.ts:818


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

models.ts:795


fontFamily

fontFamily: undefined | string

Sets the code editor font family.

Inherited from

EditorConfig.fontFamily

Defined in

models.ts:753


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

models.ts:761


formatOnsave

formatOnsave: boolean

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

Default

false

Defined in

models.ts:676


layout

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

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

models.ts:685


lineNumbers

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default

true

Inherited from

EditorConfig.lineNumbers

Defined in

models.ts:783


recoverUnsaved

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default

true

Defined in

models.ts:691


semicolons

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default

true

Inherited from

FormatterConfig.semicolons

Defined in

models.ts:838


showSpacing

showSpacing: boolean

Enables showing element spacing in the result page.

Default

false

Defined in

models.ts:697


singleQuote

singleQuote: boolean

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

Default

false

Inherited from

FormatterConfig.singleQuote

Defined in

models.ts:843


tabSize

tabSize: number

The number of spaces per indentation-level.

Also used in code formatting.

Default

2

Inherited from

FormatterConfig.tabSize

Defined in

models.ts:777


theme

theme: Theme

Sets the app theme to light/dark mode.

Default

"dark"

Inherited from

EditorConfig.theme

Defined in

models.ts:728


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

models.ts:735


trailingComma

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default

true

Inherited from

FormatterConfig.trailingComma

Defined in

models.ts:849


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

models.ts:769


welcome

welcome: boolean

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

Defined in

models.ts:702


wordWrap

wordWrap: boolean

Enables word-wrap for long lines.

Default

false

Inherited from

EditorConfig.wordWrap

Defined in

models.ts:789