CodeEdit

Basic usage

A controlled component — the value comes via value, changes are reported via `onValue.

tsx

const hello = 'world';

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { CodeEdit } from "~/components/ui/base/code-edit";

export default component$(() => {
  const code = useSignal("const hello = 'world';");

  return (
    <CodeEdit
      value={code.value}
      onValue$={(v) => { code.value = v; }}
    />
  );
});

TSX / TypeScript

The tsx language — suitable for Qwik component and TypeScript examples. Set other languages (json, html, css) the same way via the language prop.

tsx

// example

tsx

import { component$, useSignal, $ } from "@builder.io/qwik";
import { CodeEdit } from "~/components/ui/base/code-edit";

export default component$(() => {
  const tsxCode = useSignal("// example");
  const set = $((v: string) => {
    tsxCode.value = v;
  });
  return (
    <CodeEdit language="tsx" value={tsxCode.value} onValue$={set} />
  );
});

readOnly

Prop readOnly — no textarea, only a highlighted listing.

json

{
  "name": "q-ui-lib",
  "version": "1.0.0"
}

tsx

<CodeEdit
  readOnly
  language="json"
  value={JSON.stringify({ name: "q-ui-lib", version: "1.0.0" }, null, 2)}
/>

Metadata

Source: meta.generated.json (see npm run generate)

File base/code-edit/meta.generated.json not found or path not allowed.