DOM Studio

Component

Code input

<DomCodeInput>

A form input for code or structured text. It progressively enhances to CodeMirror from a CDN and falls back to a textarea if loading fails.

Playground

Try every prop live

Code input playground

The enhanced editor is loaded after mount. If the CDN is unavailable, the textarea fallback still works.

Enhanced editor is optional.

Playground.vuevue
<script setup>
import { reactive } from 'vue';
import { DomCodeInput } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "{\n\t\"name\": \"DOM Studio\",\n\t\"editable\": true\n}",
	  "id": "",
	  "name": "",
	  "label": "Configuration",
	  "description": "Enhanced editor is optional.",
	  "placeholder": "",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "lang": "json",
	  "rows": 8,
	  "editor": true
	});
</script>

<template>
	<DomCodeInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Progressive editor

Useful for JSON, prompts, templates, snippets, and other structured text inside forms.

Loads an enhanced editor from a CDN when available; otherwise this remains a textarea.

CodeField.vuevue
<script setup>
import { ref } from 'vue';
import { DomCodeInput } from '../../../lib/vue';

const code = ref(`{
\t"name": "DOM Studio",
\t"editable": true,
\t"theme": "token-based"
}`);
</script>

<template>
	<div class="w-full max-w-2xl">
		<DomCodeInput
			v-model="code"
			label="Configuration"
			description="Loads an enhanced editor from a CDN when available; otherwise this remains a textarea."
			lang="json"
			:rows="8"
		/>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestringstring''Code text.
lang'text' | 'json' | 'js' | 'html' | 'css' | 'vue' | 'md'string'text'Language hint for the optional enhanced editor.
rowsnumbernumber10Textarea fallback rows.
editorbooleanbooleantrueAttempt to load the enhanced editor from the CDN.

Field props

NameTypeTSDefaultDescription
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
placeholderstringstring''Placeholder shown when the control is empty.
requiredbooleanbooleanfalseMark the field as required.
disabledbooleanbooleanfalseDisable field interaction.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		{}Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | falsestring'field'Render default field chrome, or false to render only the control while keeping form state wiring.

Auto-generated from Code input.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValuestringFired when the code changes.
@focus—Fired when the input receives focus.
@blur—Fired when the input loses focus.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.