CodeMirror — usage examples

CodeMirror ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { CodeMirror } from '@rozie-ui/codemirror-react';

export function Demo() {
  const [value, setValue] = useState('const greeting = "hello";\n');
  return (
    <CodeMirror
      value={value}
      onValueChange={setValue}
      language="javascript"
      theme="dark"
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import CodeMirror from '@rozie-ui/codemirror-vue';

const value = ref('const greeting = "hello";\n');
</script>

<template>
  <CodeMirror v-model:value="value" language="javascript" theme="dark" />
</template>

svelte

<script lang="ts">
  import CodeMirror from '@rozie-ui/codemirror-svelte';

  let value = $state('const greeting = "hello";\n');
</script>

<CodeMirror bind:value language="javascript" theme="dark" />

import { Component } from '@angular/core';
import { CodeMirror } from '@rozie-ui/codemirror-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [CodeMirror],
  template: `
    <CodeMirror [(value)]="value" language="javascript" theme="dark" />
  `,
})
export class DemoComponent {
  value = 'const greeting = "hello";\n';
}

tsx

import { createSignal } from 'solid-js';
import { CodeMirror } from '@rozie-ui/codemirror-solid';

export function Demo() {
  const [value, setValue] = createSignal('const greeting = "hello";\n');
  return (
    <CodeMirror
      value={value()}
      onValueChange={setValue}
      language="javascript"
      theme="dark"
    />
  );
}

import '@rozie-ui/codemirror-lit';

// <rozie-code-mirror> is a custom element. Bind `value` as a property and
// listen for the `value-change` event (the two-way change channel).
const el = document.querySelector('rozie-code-mirror');
el.value = 'const greeting = "hello";\n';
el.language = 'javascript';
el.theme = 'dark';
el.addEventListener('value-change', (e) => {
  el.value = e.detail;
});

Imperative handle

Beyond props and events, CodeMirror exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { CodeMirror, type CodeMirrorHandle } from '@rozie-ui/codemirror-react';

const cm = useRef<CodeMirrorHandle>(null);
// <CodeMirror ref={cm} ... />
cm.current?.focus();
const text = cm.current?.getValue();

vue

<script setup>
import { ref } from 'vue';
const cm = ref();          // template ref
</script>

<template>
  <CodeMirror ref="cm" />
  <button @click="cm.focus()">Focus</button>
</template>

svelte

<script>
  let cm;                  // component instance via bind:this
</script>

<CodeMirror bind:this={cm} />
<button onclick={() => cm.focus()}>Focus</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(CodeMirror) cm!: CodeMirror;  // or the viewChild() signal
  focusEditor() { this.cm.focus(); }
  read() { return this.cm.getValue(); }
}

tsx

import { CodeMirror, type CodeMirrorHandle } from '@rozie-ui/codemirror-solid';

let handle: CodeMirrorHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<CodeMirror ref={(h) => (handle = h)} />;
handle?.focus();
const text = handle?.getValue();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-code-mirror');
el.focus();
const text = el.getValue();

CodeMirror — usage examples ​

Usage ​

Imperative handle ​

See also ​

CodeMirror — usage examples

Usage

Imperative handle

See also