# Code field

> An editable, syntax-highlighted code field: a real textarea over the owned tokenizer, with Tab indentation, Escape then Tab to leave, line numbers, wrapping…

Language: en
Canonical: https://texuli.com/examples/blocks-code-field/
Markdown: https://texuli.com/examples/blocks-code-field.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

An editable, syntax-highlighted code field: a real textarea over the owned tokenizer, with Tab indentation, Escape then Tab to leave, line numbers, wrapping, read-only and disabled states. Fictional content.

[Code field](https://texuli.com/examples/blocks-code-field/)

`blocks-code-field` · `blocks/CodeField`

 blocks code

 Props
- `disabled`
- `highlightLimit`
- `indentWith`
- `label`
- `language`
- `lineNumbers`
- `placeholder`
- `readonly`
- `rows`
- `showKeyboardHint`
- `tabSize`
- `value`
- `wrap`

Live example loads in an isolated same-origin preview frame.

Source (blocks-code-field/CodeFieldDemo.svelte)

```
<script lang="ts">
import { CodeField } from '@texuli/blocks/code-field';

let source = $state(
  [
    'interface Note {',
    '  id: string;',
    '  title: string;',
    '}',
    '',
    '// Fetch one note from the fictional API.',
    'export async function getNote(id: string): Promise<Note> {',
    "  const response = await fetch('https://api.example.com/notes/' + id);",
    '  return (await response.json()) as Note;',
    '}',
  ].join('\n')
);
let config = $state(
  'name: harbor\nreplicas: 2\n# A deliberately long comment that wraps inside the field instead of scrolling sideways.'
);
let query = $state('');
</script>

<article class="demo" data-example="blocks-code-field" aria-labelledby="code-field-title">
  <h2 id="code-field-title">Code field</h2>

  <CodeField
    bind:value={source}
    language="ts"
    label="Note loader (TypeScript)"
    lineNumbers
    showKeyboardHint
    name="loader"
    data-case="ts"
  />
  <p class="count" data-count>{source.split('\n').length} lines</p>

  <CodeField bind:value={config} language="yaml" label="Deploy settings (YAML, wrapped)" wrap lineNumbers rows={3} data-case="wrap" />

  <CodeField
    bind:value={query}
    language="sql"
    label="Query"
    placeholder="SELECT id FROM notes;"
    rows={2}
    data-case="empty"
  />

  <CodeField value={'{\n  "theme": "enterprise-neutral"\n}'} language="json" label="Read-only settings" readonly rows={2} data-case="readonly" />

  <CodeField value={'pnpm dev --port 4810'} language="bash" label="Disabled command" disabled rows={1} data-case="disabled" />
</article>

<style>
  .demo {
    display: grid;
    gap: 1rem;
    max-inline-size: 46rem;
    padding: 1.5rem;
  }
  .demo h2,
  .count {
    margin: 0;
  }
  .count {
    font-size: 0.875rem;
  }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)