---
title: Source View Mode
description: Switch Jodit to HTML source editing mode or make it the default.
keywords: source mode, html editing, code view, source view
---

# Editing html in source view

You can switch to code editing mode by pressing the `Source` button.
But you can also make it the default mode:

```js
Jodit.make('#editor', {
	defaultMode: Jodit.MODE_SOURCE
});
```

`{example SourceMode}`

3 editing modes available

- Mode WYSIWYG - Jodit.MODE_WYSIWYG
- Mode Source - Jodit.MODE_SOURCE
- Split mode in two - Jodit.MODE_SPLIT

> You can switch between them. The split mode is off by default.:

```js
Jodit.make('#editor', {
	useSplitMode: true,
	defaultMode: Jodit.MODE_SPLIT
});
```

`{example SplitMode}`

Code editing mode, by default works on the editor [Ace](https://ace.c9.io/), but this behavior can be toggled
You can use a regular textarea to edit your code:

```js
Jodit.make('#editor', {
	defaultMode: Jodit.MODE_SOURCE,
	sourceEditor: 'area'
});
```

`{example TextAreaSourceMode}`

## Ace themes

But for Ace, editors can apply its own settings.
For example change theme:

### List of available themes

- Chrome `ace/theme/chrome`
- Clouds `ace/theme/clouds`
- Crimson Editor `ace/theme/crimson_editor`
- Dawn `ace/theme/dawn`
- Dreamweaver `ace/theme/dreamweaver`
- Eclipse `ace/theme/eclipse`
- GitHub `ace/theme/github`
- IPlastic `ace/theme/iplastic`
- Solarized Light `ace/theme/solarized_light`
- TextMate `ace/theme/textmate`
- Tomorrow `ace/theme/tomorrow`
- XCode `ace/theme/xcode`
- Kuroir `ace/theme/kuroir`
- KatzenMilch `ace/theme/katzenmilch`
- SQL Server `ace/theme/sqlserver`
- Ambiance `ace/theme/ambiance`
- Chaos `ace/theme/chaos`
- Clouds Midnight `ace/theme/clouds_midnight`
- Cobalt `ace/theme/cobalt`
- Gruvbox `ace/theme/gruvbox`
- Green on Black `ace/theme/gob`
- idle Fingers `ace/theme/idle_fingers`
- krTheme `ace/theme/kr_theme`
- Merbivore `ace/theme/merbivore`
- Merbivore Soft `ace/theme/merbivore_soft`
- Mono Industrial `ace/theme/mono_industrial`
- Monokai `ace/theme/monokai`
- Pastel on dark `ace/theme/pastel_on_dark`
- Solarized Dark `ace/theme/solarized_dark`
- Terminal `ace/theme/terminal`
- Tomorrow Night `ace/theme/tomorrow_night`
- Tomorrow Night Blue `ace/theme/tomorrow_night_blue`
- Tomorrow Night Bright `ace/theme/tomorrow_night_bright`
- Tomorrow Night 80s `ace/theme/tomorrow_night_eighties`
- Twilight `ace/theme/twilight`
- Vibrant Ink `ace/theme/vibrant_ink`

```js
Jodit.make('#editor2', {
	defaultMode: Jodit.MODE_SOURCE,
	sourceEditorNativeOptions: {
		theme: 'ace/theme/eclipse'
	}
});
```

`{example SourceModeAceTheme}`

You can find a complete list of options on the [editor's site](https://github.com/ajaxorg/ace/wiki/Configuring-Ace)
By default they are set like this:

```js
{
  "showGutter": true,
  "theme": "ace/theme/idle_fingers",
  "mode": "ace/mode/html",
  "wrap": true,
  "highlightActiveLine": true
}
```