Static preview. Server-backed interactions are available only in a local checkout.
Carve website Demo source laravel-carve package

Static Mode (Graceful Degradation)

In a script-free target such as print, PDF, or email, interactive constructs keep their content and structure while dropping the interaction. The examples below include a disclosure and a code group.

Switch a converter profile to static mode with one config line:

'mode' => 'static'

Source

::: details "How does degradation work?"
The disclosure stays a native `<details>` element; in static mode it
renders `open` so nothing is hidden on paper.
:::

Math survives too: $`E = mc^2`.

::: code-group
``` bash [PHP]
composer require markup-carve/laravel-carve
```

``` bash [JavaScript]
npm install @markup-carve/carve-js
```
:::

Interactive Profile (default)

'mode' => 'interactive'

Rendered:

How does degradation work?

The disclosure stays a native <details> element; in static mode it renders open so nothing is hidden on paper.

Math survives too: \(E = mc^2\).

composer require markup-carve/laravel-carve

npm install @markup-carve/carve-js

HTML:

<details>
  <summary>How does degradation work?</summary>
  <p>The disclosure stays a native <code>&lt;details&gt;</code> element; in static mode it
renders <code>open</code> so nothing is hidden on paper.</p>
</details>
<p>Math survives too: <span class="math inline" role="math">\(E = mc^2\)</span>.</p>
<div class="code-group" role="group" aria-label="Code examples">
<input type="radio" name="codegroup-1" id="codegroup-1-tab-1" class="code-group-radio" checked>
<label for="codegroup-1-tab-1" class="code-group-label">PHP</label>
<input type="radio" name="codegroup-1" id="codegroup-1-tab-2" class="code-group-radio">
<label for="codegroup-1-tab-2" class="code-group-label">JavaScript</label>
<div class="code-group-panel" role="group" aria-label="PHP"><pre><code class="language-bash">composer require markup-carve/laravel-carve
</code></pre>
</div>
<div class="code-group-panel" role="group" aria-label="JavaScript"><pre><code class="language-bash">npm install @markup-carve/carve-js
</code></pre>
</div>
</div>

Static Profile

'mode' => 'static'

Rendered:

How does degradation work?

The disclosure stays a native <details> element; in static mode it renders open so nothing is hidden on paper.

Math survives too: \(E = mc^2\).

PHP

composer require markup-carve/laravel-carve

JavaScript

npm install @markup-carve/carve-js

HTML:

<details open>
  <summary>How does degradation work?</summary>
  <p>The disclosure stays a native <code>&lt;details&gt;</code> element; in static mode it
renders <code>open</code> so nothing is hidden on paper.</p>
</details>
<p>Math survives too: <span class="math inline" role="math">\(E = mc^2\)</span>.</p>
<div class="code-group" role="group" aria-label="Code examples">
  <section class="code-group-panel">
  <h3 class="code-group-label">PHP</h3>
<pre><code class="language-bash">composer require markup-carve/laravel-carve
</code></pre>
  </section>
  <section class="code-group-panel">
  <h3 class="code-group-label">JavaScript</h3>
<pre><code class="language-bash">npm install @markup-carve/carve-js
</code></pre>
  </section>
</div>

Configuration

// config/carve.php
'converters' => [
    'print' => [
        'safe_mode' => true,
        'mode' => 'static',
        'extensions' => ['details', 'code_group'],
    ],
],

Then render with the named profile:

Carve::toHtml($article->body, 'print');