Learn Code Editor

1. Basic

It is a real <textarea> with a highlighted copy painted behind it, so Tab indents, Enter keeps your indentation, brackets close themselves and ⌘Z still walks back one edit at a time. Type in it.

utils.ts TypeScript

1<script lang="ts">2	import { CodeEditor } from 'omaris';34	let value = $state(`export function cn(...inputs: ClassValue[]) {5	return twMerge(clsx(inputs));6}7`);8</script>910<CodeEditor bind:value lang="ts" title="utils.ts" height={220} class="w-full" />

2. Copy

copy puts a copy button in the header, or floats one when there is no header.

slugify.ts TypeScript

1<script lang="ts">2	import { CodeEditor } from 'omaris';34	let withHeader = $state(`export function slugify(text) {5	return text6		.toLowerCase()7		.replace(/[^a-z0-9]+/g, '-')8		.replace(/^-|-$/g, '');9}`);1011	let bare = $state(`const total = items.reduce((sum, item) => sum + item.price, 0);`);12</script>1314<div class="flex flex-col gap-5">15	<CodeEditor bind:value={withHeader} lang="ts" title="slugify.ts" copy height={160} />1617	<!-- No title, so the button floats over the corner: quiet until the18	     pointer arrives, and always there on a touch screen. Select a few19	     lines first and it copies the selection instead of the file. -->20	<CodeEditor bind:value={bare} lang="ts" copy height={96} lineNumbers={false} />21</div>

3. Vim

vim is the whole integration. Click in and you are in normal mode — the status bar says which one you are in and echoes the half-typed command. Counts, operators and motions (d2w, ci", >ip, gUiw, gcc), registers, marks, / search, ., <C-a>, and an ex line with :w, :%s/a/b/g and :set rnu. u undoes a whole command, not a keystroke.

total.ts TypeScript

NORMAL Ln 1, Col 1 8 lines 99 chars

mode normal · :w written 0 times

1<script lang="ts">2	import { CodeEditor, Text, type VimMode } from 'omaris';34	let mode = $state<VimMode>('normal');5	let writes = $state(0);67	let value = $state(`export function total(list) {8	let sum = 0;9	for (const n of list) {10		sum += n;11	}12	return sum;13}14`);15</script>1617<div class="flex w-full flex-col gap-2">18	<CodeEditor19		bind:value20		bind:vimMode={mode}21		lang="ts"22		vim23		title="total.ts"24		insertSpaces={false}25		height={240}26		onsave={() => writes++}27	/>28	<Text variant="label-sm" tone="muted">29		mode {mode} · :w written {writes}30		{writes === 1 ? 'time' : 'times'}31	</Text>32</div>

4. Status and read only

status puts line, column and length along the bottom. readOnly keeps the colouring and the gutter but refuses edits, and startLine numbers a snippet from wherever it really begins.

package.json JSON

Ln 1, Col 1 5 lines 85 chars

read-only, numbered from 118

.dark {
	--surface: oklch(0.21 0.01 260);
	--surface-container: oklch(0.26 0.012 260);
}

1<script lang="ts">2	import { CodeEditor, Text } from 'omaris';34	let json = $state(`{5	"name": "omaris",6	"type": "module",7	"peerDependencies": { "svelte": "^5.0.0" }8}`);910	const EXCERPT = `.dark {11	--surface: oklch(0.21 0.01 260);12	--surface-container: oklch(0.26 0.012 260);13}`;14</script>1516<div class="flex w-full flex-col gap-4">17	<CodeEditor bind:value={json} lang="json" title="package.json" status height="9rem" />1819	<div class="flex flex-col gap-1">20		<Text variant="label-sm" tone="muted">read-only, numbered from 118</Text>21		<CodeEditor22			value={EXCERPT}23			lang="css"24			readOnly25			size="sm"26			startLine={118}27			highlightActiveLine={false}28			height="7rem"29		/>30	</div>31</div>

5. Find and diagnostics

⌘F finds and ⌘H replaces — every hit is drawn behind the text, so the count in the panel and the marks in the file agree. markers puts a rule under a span, colours its gutter number, and shows the message in the status bar while the caret is on that line. ⌃Space completes.

totals.ts TypeScript

Ln 1, Col 1 4 lines 80 chars

1<script lang="ts">2	import { CodeEditor } from 'omaris';34	let value = $state(`const total = items.reduce((a, b) => a + b);5let unused = 2;6console.log(totl);7`);8</script>910<CodeEditor11	bind:value12	lang="ts"13	title="totals.ts"14	height={190}15	status16	completions={['items', 'total', 'reduce', 'console']}17	markers={[18		{19			line: 2,20			column: 5,21			endColumn: 11,22			severity: 'warning',23			message: "'unused' is declared but never read"24		},25		{26			line: 3,27			column: 13,28			endColumn: 17,29			severity: 'error',30			message: "Cannot find name 'totl'. Did you mean 'total'?"31		}32	]}33	class="w-full"34/>

6. Overridden

height lives in a custom property rather than a class, so height="auto" plus a min-h-* on classes.frame lets the editor grow with its content instead of scrolling. wrap stops the sideways scroll, and the gutter can go.

1<script lang="ts">2	import { CodeEditor } from 'omaris';34	let value = $state(5		`# every line here is long enough to prove that wrapping is on rather than a horizontal scrollbar\nbun run check && bun run lint && bun run reference`6	);7</script>89<CodeEditor10	bind:value11	lang="bash"12	wrap13	lineNumbers={false}14	tabSize={4}15	autoClose={false}16	height="auto"17	classes={{18		root: 'rounded-shape-lg border-primary/40',19		frame: 'min-h-24',20		input: 'caret-primary'21	}}22	class="w-full"23/>

Walkthrough