---
title: Source Mode
description: Switch Jodit to HTML source editing mode.
keywords: source mode, html editing, code view
---

# Edit content in source mode

```html
<link type="text/css" rel="stylesheet" href="build/jodit.min.css" />
<script type="text/javascript" src="build/jodit.min.js"></script>
```

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

### Result

```html
<!-- Example Start -->
<textarea id="dummy" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#dummy', {
		defaultMode: Jodit.MODE_SOURCE
	});
</script>
<!-- Example End -->
```

## Without ACE

Use simple `textarea` without ACE editor

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

### Result

```html
<!-- Example Start -->
<textarea id="editor" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#editor', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditor: 'area'
	});
</script>
<!-- Example End -->
```

## Another ACE theme

Ace 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

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

### Result

```html
<!-- Example Start -->
<textarea id="editor2" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	new Jodit('#editor2', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditorNativeOptions: {
			theme: 'ace/theme/eclipse'
		}
	});
</script>
<!-- Example End -->
```

Show gutter

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

### Result

```html
<!-- Example Start -->
<textarea id="editor3" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>

<script>
	Jodit.make('#editor3', {
		defaultMode: Jodit.MODE_SOURCE,
		sourceEditorNativeOptions: {
			theme: 'ace/theme/eclipse',
			showGutter: true
		}
	});
</script>
<!-- Example End -->
```