Update docs for PySide text elements and --show-code/CGX_DEBUG

Document the new PySide text element support (#191): update the
renderer-support note in the template syntax guide, add a Text Content
section to the PySide renderer page, and switch the counter examples to
text interpolation to match examples/pyside/counter.cgx.

Document the --show-code CLI flag and the CGX_DEBUG environment
variable (#175) on the CLI page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: berendkleinhaneveld

docs/getting-started/cli.md

@@ -21,6 +21,7 @@ uv run collagraph [OPTIONS] <component.cgx>
 | `--renderer {pyside,pygfx,dict}` | `pyside` | Renderer to use |
 | `--state <json>` | - | Initial state as JSON string or path to JSON file |
 | `--hot-reload`, `-H` | off | Enable hot reload (auto-update on file changes) |
+| `--show-code` | off | Pretty print the compiled Python code for the component and exit |
 
 ## Examples
 
@@ -36,4 +37,15 @@ uv run collagraph --state '{"name": "World"}' hello.cgx
 
 # Run with hot reload
 uv run collagraph -H examples/pyside/counter.cgx
+
+# Inspect the Python code that is compiled for a component
+uv run collagraph --show-code examples/pyside/counter.cgx
+```
+
+## Debugging Compiled Components
+
+Templates are compiled to Python render methods. Besides `--show-code`, you can set the `CGX_DEBUG` environment variable to have the generated source written to a temporary file that is used as the compile filename. Debuggers (pdb, PyCharm, VS Code) can then step through the generated render methods with correct source display:
+
+```sh
+CGX_DEBUG=1 uv run collagraph examples/pyside/counter.cgx
 ```

docs/getting-started/first-component.md

@@ -8,8 +8,8 @@ Create a file `counter.cgx`:
 
 ```html
 <widget>
-  <label :text="f'Count: {count}'" />
-  <button text="bump" @clicked="bump" />
+  <label>Count: {{ count }}</label>
+  <button @clicked="bump">bump</button>
 </widget>
 
 <script>
@@ -38,7 +38,7 @@ uv run collagraph counter.cgx
 The template defines what gets rendered. Each tag corresponds to a widget or element in the target renderer.
 
 - `<widget>` -- a plain QWidget container (PySide6 renderer)
-- `:text="f'Count: {count}'"` -- a dynamic binding (note the `:` prefix). The expression is a Python f-string.
+- `Count: {{ count }}` -- text content with interpolation. The expression inside `{{ }}` is evaluated as Python and updates automatically when state changes.
 - `@clicked="bump"` -- an event handler. Calls the `bump` method when the button is clicked.
 
 ### Script

docs/guide/template-syntax.md

@@ -52,11 +52,17 @@ Elements can contain text content, with double curly braces for dynamic expressi
 Expressions inside `{{ }}` are evaluated as Python. Static and dynamic parts can be mixed freely, and multiline text is normalized (leading indentation after line breaks is stripped). To render literal braces, escape them with a backslash: `\{{`.
 
 !!! note "Renderer support"
-    Text content requires the renderer to support text elements. The Pygfx renderer supports it (inside `<text>` elements); the PySide6 renderer does not — with Qt widgets, set text via the `text` attribute instead:
+    Text content requires the renderer to support text elements. The Pygfx renderer supports it inside `<text>` elements. The PySide6 renderer supports it inside widgets that display text, such as `<label>` and `<button>` (see [PySide6 Renderer](../renderers/pyside.md#text-content)):
 
     ```html
-    <label text="Static text" />
-    <label :text="f'Hello, {name}'" />
+    <label>Hello, {{ name }}!</label>
+    <button @clicked="bump">bump</button>
+    ```
+
+    For other Qt widgets, set text via the `text` attribute instead:
+
+    ```html
+    <lineedit :text="f'Hello, {name}'" />
     ```
 
 ## Attribute Binding

docs/index.md

@@ -8,8 +8,8 @@ Collagraph lets you build declarative UIs using class-based components with a Vu
 
 ```html title="counter.cgx"
 <widget>
-  <label :text="f'Count: {count}'" />
-  <button text="bump" @clicked="bump" />
+  <label>Count: {{ count }}</label>
+  <button @clicked="bump">bump</button>
 </widget>
 
 <script>

docs/renderers/pyside.md

@@ -84,6 +84,29 @@ Dynamic attributes use Python expressions:
 <slider :value="self.state['position']" />
 ```
 
+## Text Content
+
+Widgets that display text can take their text as element content, including `{{ }}` interpolation:
+
+```html
+<label>Count: {{ count }}</label>
+<button @clicked="bump">bump</button>
+```
+
+This is supported for `QLabel` and all `QAbstractButton` subclasses (`<button>`, `<checkbox>`, `<radiobutton>`, ...). The joined content of all text children is displayed through the widget's `setText()` method, so text can be mixed with directives:
+
+```html
+<label>
+  Hello<template v-if="name">, {{ name }}</template>!
+</label>
+```
+
+For other widgets, set text via the `text` attribute instead:
+
+```html
+<lineedit :text="initial_value" />
+```
+
 ## Layouts
 
 Child widgets are laid out using layout elements: