RTL Support: Full

Accessibility: Full

Translations: Not Needed

Code Editor

A lightweight code editor with syntax highlighting, linting, and formatting for CSS, HTML, JavaScript, and JSON.

Default

Bind value and listen to @update:value (or use v-model:value); set language to enable syntax highlighting and linting.

vue

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

<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>

Sizes

Use size to set the font size of the code text — lg, md (default), sm, xs, 2xs, or 3xs.

vue

<template>
  <HLCodeEditor id="size-lg" v-model:value="code" language="javascript" size="lg" />
  <HLCodeEditor id="size-md" v-model:value="code" language="javascript" size="md" />
  <HLCodeEditor id="size-sm" v-model:value="code" language="javascript" size="sm" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'

  const code = ref('const greeting = "hello"')
</script>

No Gutter

Add hideGutters to hide the left line-number gutter.

vue

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

<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>

Dark Mode

Add dark-mode to render the editor with a dark theme.

vue

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

<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>

Read Only

Add read-only to display code without allowing edits.

INFO

read-only and prettify are independent. read-only only blocks user typing — it does not turn off formatting. So a read-only editor still runs Prettier on the value you pass (and on setContent) unless you also set :prettify="false". Use read-only + :prettify="false" to display code exactly as provided.

vue

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

<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>

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>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'

  const lineWrappingCode = ref('const y = `a very long single line of code that should wrap inside the editor`\nconsole.log(y)')
  const updateCode1 = (value: string) => {
    lineWrappingCode.value = value
  }
</script>

Prettify

The editor formats code with Prettier by default (prettify is true) — both the initial value and edits are reformatted. Set :prettify="false" to leave the code exactly as provided, which is what the editor below does with deliberately messy input.

vue

<template>
  <!-- prettify defaults to true; set false to keep code exactly as-is -->
  <HLCodeEditor id="editor-a" v-model:value="code" language="javascript" :prettify="false" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'

  // Messy on purpose — with prettify (default) this would be reformatted
  const code = ref('const   a=1;const b   =2;function add(x,y){return x+y}')
</script>

Disable Resize

The editor is resizable by default. Set :resize="false" to lock its height.

vue

<template>
  <HLCodeEditor id="no-resize" v-model:value="code" language="css" :resize="false" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'

  const code = ref('.class-name { display: flex }')
</script>

Autofocus

Add autofocus to move focus into the editor as soon as it mounts — handy when the editor is the primary control on a page or in a freshly opened dialog.

vue

<template>
  <HLCodeEditor id="autofocus-editor" v-model:value="code" language="javascript" autofocus />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'

  const code = ref('// this editor grabs focus on mount')
</script>

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

<template>
  <HLCodeEditor v-model:value="snippet" language="html" id="editor" :custom-errors="customErrors" />
</template>

<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>

Set Content

Call the setContent method via a template ref to replace the editor's contents imperatively.

vue

<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>

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor, HLButton } from '@platform-ui/highrise'

  const code = ref('.class-name{display:flex}')
  const editorRef = ref(null)
  const updateCode = (value: string) => {
    code.value = value
  }
  const setCode = () => {
    editorRef.value?.setContent('#id{display:flex}')
  }
</script>

Accessibility

Supply aria-label when the editor lacks a visible label and mention the language/context in that string. The editor forwards aria-label onto its internal editable region (defaulting to "Code Editor" when none is passed).
aria-label is the only attribute the editor picks up (it lands on the editable region). Anything else you set on <HLCodeEditor> — aria-describedby, class, data-* — is not applied anywhere. Surface formatting tips, lint errors, or character limits in adjacent visible text or an aria-live="polite" region instead.
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`	`hr-code-editor-{n}` (auto)	The `id` of the element. When omitted, a stable `hr-code-editor-{n}` id is generated.
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

Code Editor ​

Default ​

Sizes ​

No Gutter ​

Dark Mode ​

Read Only ​

Line Wrapping ​

Prettify ​

Disable Resize ​

Autofocus ​

Custom diagnostics ​

Set Content ​

Accessibility ​

Imports ​

Props ​

Emits ​

Methods ​