RTL Support: Full

Accessibility: Full

Translations: Not Needed

Try in Cursor

Code Editor

Code editor component

Default

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'
  const code = ref('.class-name{display:flex}')
  const updateCode = (value: string) => {
    code.value = value
  }
</script>
<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" />
</template>

No Gutter

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" hideGutters />
</template>

Dark Mode

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" dark-mode />
</template>

Read Only

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" read-only />
</template>

Line Wrapping

This gives you the ability to wrap long lines inside the editor.

Vue

<template>
  <HLCodeEditor :value="lineWrappingCode" @update:value="updateCode1" language="javascript" id="testing" line-wrapping />
</template>

Custom diagnostics

You can show custom lint messages (e.g. from validation or accessibility checks) by passing the customErrors prop. Each item must have line (1-based), message, and optional severity ('error' | 'hint' | 'info' | 'warning'). They appear in the gutter and as hover tooltips alongside language lint (e.g. ESLint, JSON). Empty or whitespace-only messages are filtered out.

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'
  const snippet = ref(`<section>
    <div class="card">
      <button>Submit</button>
    </div>
  </section>`)
  const customErrors = ref([
    { line: 2, message: 'Missing data-test attribute on .card container', severity: 'warning' },
    { line: 3, message: 'Buttons must include aria-label or descriptive text', severity: 'error' },
  ])
</script>
<template>
  <HLCodeEditor v-model:value="snippet" language="html" id="editor" :custom-errors="customErrors" />
</template>

Set Content

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor, HLButton } from '@platform-ui/highrise'
  import { useRTL } from '../../.vitepress/theme/useRTL'
  const { direction } = useRTL()
  const code = ref('.class-name{display:flex}')
  const editorRef = ref(null)
  const setCode = () => {
    editorRef.value?.setContent('#id{display:flex}')
  }

</script>
<template>
  <HLCodeEditor ref="editorRef" :value="code" @update:value="updateCode" language="css" id="testing" />
  <HLButton @click="setCode" class="mt-3">Set Code to id</HLButton>
</template>

Accessibility

• Supply aria-label when the editor lacks a visible label and mention the language/context in that string.
• Attach formatting tips, lint errors, or character limits through aria-describedby, and surface live errors inside an aria-live="polite" region.
• Document custom shortcuts in helper text so assistive tech users know how to interact without a mouse.

Imports

import { HLCodeEditor } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
language	'css' | 'html' | 'javascript' | 'json'	-	The language of the code
value	string	''	The value of the code inside the editor
resize	boolean	true	Whether the code editor is resizable
prettify	boolean	true	Whether to format the code
readOnly	boolean	false	Whether to allow editing the code editor
hideGutters	boolean	false	Whether to hide left side gutter (line numbers)
darkMode	boolean	false	whether the code editor theme is dark mode
autofocus	boolean	false	Focuses the editor as soon as it mounts.
lineWrapping	boolean	false	Enables wrapping long lines inside the editor.
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	The size of the code text inside the editor
customErrors	Array<{ line: number; message: string; severity?: 'error' | 'hint' | 'info' | 'warning' }>	[]	Custom diagnostics shown in the gutter and on hover (line is 1-based)

Emits

Name	Parameters	Description
@update:value	(value: string)	Fired when the value changes

Methods

Name	Parameters	Description
setContent	(value: string)	Set the value of the code inside the editor