Skip to main content

Interface: UserConfig

_internal.UserConfig

Hierarchy​

Properties​

appLanguage​

• appLanguage: undefined | AppLanguage

Sets the app UI language used.

Defined in​

models.ts:708

autosave​

• autosave: boolean

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

Default

false

Defined in​

models.ts:657

autotest​

• autotest: boolean

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

Default

false

Defined in​

models.ts:663

autoupdate​

• autoupdate: boolean

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

Default

true

Defined in​

models.ts:650

closeBrackets​

• closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default

true

Inherited from​

EditorConfig.closeBrackets

Defined in​

models.ts:792

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

editor​

• editor: undefined | "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 CodeJar is used in codeblocks, in lite mode and in readonly playgrounds.

Default

undefined

Inherited from​

EditorConfig.editor

Defined in​

models.ts:719

editorMode​

• editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

EditorConfig.editorMode

Defined in​

models.ts:803

editorTheme​

• editorTheme: undefined | string | EditorTheme[]

Sets the code editor themes.

See docs for editor themes for details.

Example

"vs"

Example

"monaco:twilight, codemirror:one-dark"

Example

["vs@light"]

Example

["vs@light", "vs-dark@dark"]

Example

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

Inherited from​

EditorConfig.editorTheme

Defined in​

models.ts:745

emmet​

• emmet: boolean

Enables Emmet.

Default

true

Inherited from​

EditorConfig.emmet

Defined in​

models.ts:798

enableAI​

• enableAI: boolean

If true, AI code assistant is enabled.

Default

false

Inherited from​

EditorConfig.enableAI

Defined in​

models.ts:809

fontFamily​

• fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

EditorConfig.fontFamily

Defined in​

models.ts:750

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

formatOnsave​

• formatOnsave: boolean

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

Default

false

Defined in​

models.ts:677

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

lineNumbers​

• lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default

true

Inherited from​

EditorConfig.lineNumbers

Defined in​

models.ts:780

recoverUnsaved​

• recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default

true

Defined in​

models.ts:692

semicolons​

• semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default

true

Inherited from​

FormatterConfig.semicolons

Defined in​

models.ts:829

showSpacing​

• showSpacing: boolean

Enables showing element spacing in the result page.

Default

false

Defined in​

models.ts:698

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

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

theme​

• theme: Theme

Sets the app theme to light/dark mode.

Default

"dark"

Inherited from​

EditorConfig.theme

Defined in​

models.ts:725

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

trailingComma​

• trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default

true

Inherited from​

FormatterConfig.trailingComma

Defined in​

models.ts:840

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

welcome​

• welcome: boolean

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

Defined in​

models.ts:703

wordWrap​

• wordWrap: boolean

Enables word-wrap for long lines.

Default

false

Inherited from​

EditorConfig.wordWrap

Defined in​

models.ts:786

Sponsors