### Install Gem Dependencies

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/installation.md

Run the bundle command to install the gem and its dependencies.

```bash
bundle install
```

--------------------------------

### Run Installation Generator

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/installation.md

Execute the generator to create the initial configuration file.

```bash
rails generate reactionview:install
```

--------------------------------

### Create Test Template

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/installation.md

Create a .html.herb file to verify the installation.

```erb
<div class="test">
  <h1>ReActionView Test</h1>
  <p>Current time: <%= Time.current %></p>
</div>
```

--------------------------------

### Install ReActionView

Source: https://github.com/marcoroth/reactionview/blob/main/README.md

Add the gem to your Rails application and run the installation generator.

```bash
bundle add reactionview
rails generate reactionview:install
```

--------------------------------

### Install Herb VS Code Extension

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/guides/development-tools.md

Use the command line to install the Herb language server extension for VS Code.

```bash
code --install-extension marcoroth.herb-lsp
```

--------------------------------

### Complex Layout Example with Helpers

Source: https://context7.com/marcoroth/reactionview/llms.txt

Construct complex HTML layouts by combining custom UI helpers, ERB conditionals, and routing helpers.

```erb
<div class="container py-8">
  <h1 class="title"><%= title "Events by Country" %></h1>

  <%= ui_button "View all cities", url: cities_path, kind: :secondary %>

  <% if @show_countries %>
    <h2>Countries</h2>
    <%= link_to country_path("switzerland"), id: "country-ch", class: "event-item" do %>
      <span class="event-name">Switzerland</span>
      <%= ui_badge(5, kind: :secondary, class: "event-count") %>
    <% end %>
  <% end %>
</div>
```

--------------------------------

### Initialize ReActionView Dev Tools

Source: https://context7.com/marcoroth/reactionview/llms.txt

Manually initialize ReActionView dev tools with project path and auto-initialization options. Access the overlay and destroy the tools.

```typescript
import { initReActionViewDevTools } from '@reactionview/dev-tools'

const devTools = initReActionViewDevTools({
  projectPath: '/path/to/rails/app',
  autoInit: true
})

// Access the underlying HerbOverlay
const overlay = devTools.getHerbOverlay()

// Destroy and cleanup
devTools.destroy()

// Global window access
window.ReActionViewDevTools.init({
  projectPath: '/path/to/rails/app'
})
```

--------------------------------

### Configure ReActionView

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/installation.md

Configure the gem settings in the initializer file.

```ruby
# frozen_string_literal: true

ReActionView.configure do |config|
  # Intercept .html.erb templates and process them with `Herb::Engine` for enhanced features
  # config.intercept_erb = true

  # Enable debug mode in development (adds debug attributes to HTML)
  config.debug_mode = Rails.env.development?
end
```

```ruby
ReActionView.configure do |config|
  config.intercept_erb = true
  config.debug_mode = Rails.env.development?
end
```

--------------------------------

### Access ReActionView Configuration

Source: https://context7.com/marcoroth/reactionview/llms.txt

Use the global configuration object to inspect settings, environment status, and debug modes.

```ruby
# Access the global configuration
config = ReActionView.config

# Check configuration values
config.intercept_erb        # => true/false
config.debug_mode           # => true/false/nil
config.validation_mode      # => :raise/:overlay/:none
config.transform_visitors   # => Array of visitor instances

# Check debug mode status (accounts for Rails environment)
config.debug_mode_enabled?  # => true in development when debug_mode is nil

# Environment checks
config.development?         # => true if Rails.env.development?
config.production?          # => true if Rails.env.production?
config.test?               # => true if Rails.env.test?
```

--------------------------------

### Create .html.herb Templates

Source: https://context7.com/marcoroth/reactionview/llms.txt

Use the .herb extension for templates to leverage HTML-aware parsing.

```erb
<!-- app/views/users/show.html.herb -->
<div class="user-profile">
  <h1>Hello <%= @user.name %></h1>
  <p><%= @user.bio %></p>

  <%= link_to users_path, class: "btn btn-primary" do %>
    Back to Users
  <% end %>
</div>
```

--------------------------------

### Configure Asset Precompilation for ReActionView

Source: https://context7.com/marcoroth/reactionview/llms.txt

Adjust asset precompilation settings in Rails initializers to manage ReActionView assets, especially when using Propshaft.

```ruby
# config/initializers/reactionview.rb

# If using Propshaft and want to skip ReActionView asset precompilation:
config.after_initialize do
  config.assets.precompile -= ReActionView::Railtie::PRECOMPILE_ASSETS
end
```

--------------------------------

### Configure ReActionView

Source: https://github.com/marcoroth/reactionview/blob/main/README.md

Configure the engine in a Rails initializer to enable template interception, debug mode, and validation settings.

```ruby
# config/initializers/reactionview.rb

ReActionView.configure do |config|
  # Intercept .html.erb templates to use Herb::Engine
  # config.intercept_erb = true

  # Enable debug mode
  config.debug_mode = Rails.env.development?

  # Validation mode (:raise, :overlay, or :none) — defaults to :raise in test, :overlay otherwise
  # config.validation_mode = :overlay
end
```

--------------------------------

### Initialize Chart Controller

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0025_canvas_with_boolean_array_and_multiple_attributes_evaluated_95ae40fdfac81fcfee0bca6f6cf55d7a.txt

Use this canvas element to initialize the chart controller with unit type, data, labels, and unit configuration.

```html
<canvas
data-controller="chart"
data-chart-unit-type-value="yes/no"
data-chart-data-value="[true,true,true,true,true,true]"
data-chart-labels-value="[&quot;2025-05-16&quot;,&quot;2025-05-17&quot;,&quot;2025-05-19&quot;,&quot;2025-05-20&quot;,&quot;2025-07-28&quot;,&quot;2025-09-12&quot;]"
data-chart-unit-value="sessions"
></canvas>
```

--------------------------------

### Programmatic Configuration Access

Source: https://context7.com/marcoroth/reactionview/llms.txt

Access ReActionView configuration programmatically for conditional logic or testing.

```APIDOC
## Programmatic Configuration Access

Access ReActionView configuration programmatically for conditional logic or testing.

### Method
N/A (Programmatic Access)

### Endpoint
N/A (Programmatic Access)

### Parameters
N/A

### Request Example
```ruby
# Access the global configuration
config = ReActionView.config

# Check configuration values
config.intercept_erb        # => true/false
config.debug_mode           # => true/false/nil
config.validation_mode      # => :raise/:overlay/:none
config.transform_visitors   # => Array of visitor instances

# Check debug mode status (accounts for Rails environment)
config.debug_mode_enabled?  # => true in development when debug_mode is nil

# Environment checks
config.development?         # => true if Rails.env.development?
config.production?          # => true if Rails.env.production?
config.test?               # => true if Rails.env.test?
```

### Response
N/A (Programmatic Access)

### Response Example
N/A (Programmatic Access)
```

--------------------------------

### Render configuration to HTML

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0014_data_attribute_with_nested_object_compiled_2a7e04fa599666e42a742b244238a926.txt

Injects a JSON-serialized configuration object into a div's data-config attribute.

```ruby
@output_buffer.safe_append='<div data-config="'.freeze; @output_buffer.append=(@config.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Render configuration to HTML buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0028_raw_output_compiled_fc6c59cddd423ba46c0ac2712641f28f.txt

Injects a JSON-serialized configuration object into a data attribute within an HTML div element.

```ruby
@output_buffer.safe_append='<div data-config="'.freeze; @output_buffer.safe_expr_append=(@config.to_json); @output_buffer.safe_append='"></div>'.freeze;
```

```ruby
@output_buffer
```

--------------------------------

### Inject JSON Configuration into Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0016_script_with_raw_helper_and_json_compiled_81e4db69a23a5340424816af188fa112.txt

Appends a script tag containing the serialized configuration object to the current output buffer.

```ruby
@output_buffer.safe_append='<script>window.config = '.freeze; @output_buffer.append=(raw @config.to_json); @output_buffer.safe_append='</script>'.freeze;
@output_buffer
```

--------------------------------

### Configure ReActionView Validation Mode

Source: https://context7.com/marcoroth/reactionview/llms.txt

Set the validation mode for ReActionView to control how template errors are reported. Options include `:raise`, `:overlay`, and `:none`.

```ruby
ReActionView.configure do |config|
  config.validation_mode = :raise
end
```

```ruby
ReActionView.configure do |config|
  config.validation_mode = :overlay
end
```

```ruby
ReActionView.configure do |config|
  config.validation_mode = :none
end
```

--------------------------------

### Integrate Rails Helpers

Source: https://context7.com/marcoroth/reactionview/llms.txt

Utilize standard Rails view helpers including block syntax and conditional rendering.

```erb
<!-- link_to with block syntax -->
<%= link_to "/users", class: "btn" do %>
  Click me
<% end %>

<!-- content_tag helper -->
<%= content_tag :div, "Hello", class: "greeting" %>

<!-- Conditional rendering with link_to -->
<div class="user-card">
  <h2><%= @user[:name] %></h2>
  <%= if @user[:verified] %>
    <span class="badge">Verified</span>
  <% end %>
  <%= link_to user_path(@user[:id]), class: "btn btn-primary" do %>
    View Profile
  <% end %>
</div>

<!-- Nested content_tag with block -->
<% if true %>
  <%= content_tag(:div, class: "wrapper") do %>
    <p>Hello</p>
  <% end %>
<% else %>
  <%= content_tag(:div, class: "fallback") do %>
    <p>Fallback</p>
  <% end %>
<% end %>
```

--------------------------------

### Configure Debug Mode in ReactionView

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/guides/debug-mode.md

Enable or disable debug mode by setting the `debug_mode` configuration option. It is typically enabled by default in development environments.

```ruby
ReActionView.configure do |config|
  config.debug_mode = Rails.env.development?
end
```

--------------------------------

### Render User Card Component

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0010_user_card_with_conditional_and_link_to_compiled_351531c91827e79a1a9ab2f324c18ce9.txt

Directly manipulates the output buffer to render a user card with conditional verification badges and profile links.

```ruby
@output_buffer.safe_append='<div class="user-card">
  <h2>'.freeze; @output_buffer.append=(@user[:name]); @output_buffer.safe_append='</h2>
'.freeze;   if @user[:verified] 
 @output_buffer.safe_append='    <span class="badge">Verified</span>
'.freeze;   end 
 @output_buffer.safe_append='  '.freeze; @output_buffer.append= link_to user_path(@user[:id]), class: "btn btn-primary" do; @output_buffer.safe_append='
    View Profile
'.freeze;   end 
 @output_buffer.safe_append='</div>
'.freeze;
@output_buffer
```

--------------------------------

### Conditional Rendering with ReactionView

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0029_render_with_block_(e.g._component_with_do_end)_compiled_b5fda483cc761c0f82e314c67868839a.txt

Uses content_tag to wrap conditional HTML output within a wrapper or fallback div.

```ruby
 if true 
 @output_buffer.safe_append='  '.freeze; @output_buffer.append= content_tag(:div, class: "wrapper") do; @output_buffer.safe_append='
    <p>Hello</p>
'.freeze;   end 
 else 
 @output_buffer.safe_append='  '.freeze; @output_buffer.append= content_tag(:div, class: "fallback") do; @output_buffer.safe_append='
    <p>Fallback</p>
'.freeze;   end 
 end 
@output_buffer
```

--------------------------------

### Render JSON data to output buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0026_concat_compiled_f24bd5eb8c1b12581656d96eaf0c82f6.txt

Serializes data to JSON and appends it to the output buffer within a div tag.

```ruby
@output_buffer.safe_append='<div data-json="'.freeze; concat(@data.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Use Concat Helper for Buffer Output

Source: https://context7.com/marcoroth/reactionview/llms.txt

Append content directly to the output buffer using the `concat` helper, useful for embedding JSON in data attributes.

```erb
<div data-json="<% concat(@data.to_json) %>"></div>
```

--------------------------------

### Append HTML to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0007_multiple_expressions_compiled_082a93002fba858b87a75785cd88a2b7.txt

Appends HTML content to the output buffer. Use safe_append for literal HTML and append for variable content. Ensure proper string freezing for static parts.

```ruby
@output_buffer.safe_append='<h1>Hello '.freeze; @output_buffer.append=(@name); @output_buffer.safe_append='!</h1><p>'.freeze; @output_buffer.append=(@message); @output_buffer.safe_append='</p>'.freeze;
@output_buffer
```

--------------------------------

### Append HTML to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0003_template_with_expression_compiled_40e3b949384b06dd58f462a17aa0827b.txt

Appends HTML content to the output buffer. Use this for building HTML strings dynamically. Ensure content is safe if user-generated.

```ruby
@output_buffer.safe_append='<h1>Hello '.freeze; @output_buffer.append=(@name); @output_buffer.safe_append='</h1>'.freeze;
@output_buffer
```

--------------------------------

### Inject CSS variables via output buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0018_style_with_multiple_custom_properties_compiled_c8a812dec4c57c27fdb700952cb1311b.txt

Directly appends CSS variable definitions to the output buffer. Ensure @primary and @secondary variables are defined before execution.

```ruby
@output_buffer.safe_append='<style>:root { --primary: '.freeze; @output_buffer.append=(@primary); @output_buffer.safe_append='; --secondary: '.freeze; @output_buffer.append=(@secondary); @output_buffer.safe_append='; }</style>'.freeze;
```

```ruby
@output_buffer
```

--------------------------------

### Append to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0004_link_to_with_block_compiled_40217e77340228834673e9a7e119b890.txt

Directly appends content to the current output buffer using the link_to helper.

```ruby
@output_buffer.append= link_to "/users", class: "btn" do; @output_buffer.safe_append='Click me'.freeze; end;
@output_buffer
```

--------------------------------

### Configure ReActionView Debug Mode

Source: https://context7.com/marcoroth/reactionview/llms.txt

Enable or disable debug mode for ReActionView to control the injection of metadata attributes for debugging purposes.

```ruby
ReActionView.configure do |config|
  config.debug_mode = Rails.env.development?
end
```

```ruby
ReActionView.configure do |config|
  config.debug_mode = true
end
```

```ruby
ReActionView.configure do |config|
  config.debug_mode = false
end
```

--------------------------------

### Append HTML to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0011_complex_layout_with_helpers_compiled_3a9949064612857244b6b8987a2b6dc3.txt

Appends a string to the output buffer. Use safe_append for HTML strings to prevent double-escaping.

```ruby
@output_buffer.safe_append='<div class="container py-8">
  <h1 class="title">'.freeze; @output_buffer.append=(title "Events by Country"); @output_buffer.safe_append='</h1>

  '.freeze; @output_buffer.append=(ui_button "View all cities", url: cities_path, kind: :secondary); @output_buffer.safe_append=' 
'.freeze;
```

```ruby
if @show_countries 
 @output_buffer.safe_append='    <h2>Countries</h2>
    '.freeze; @output_buffer.append= link_to country_path("switzerland"), id: "country-ch", class: "event-item" do; @output_buffer.safe_append=' 
      <span class="event-name">🇨🇭 Switzerland</span>
      '.freeze; @output_buffer.append=(ui_badge(5, kind: :secondary, class: "event-count")); @output_buffer.safe_append=' 
'.freeze;     end 
 @output_buffer.safe_append='  '.freeze; end; @output_buffer.safe_append='
</div>
'.freeze;
```

--------------------------------

### Render Combobox Component

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0012_combobox_data_attribute_with_string_array_compiled_bb22b0813b6133e207dd1615af737c87.txt

Appends a combobox controller div to the output buffer with serialized choices.

```ruby
@output_buffer.safe_append='<div data-controller="combobox" data-combobox-choices-value="'.freeze; @output_buffer.append=(@choices.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Add Gem to Gemfile

Source: https://github.com/marcoroth/reactionview/blob/main/docs/docs/installation.md

Include the gem in your Rails application's Gemfile.

```ruby
gem "reactionview"
```

--------------------------------

### Manage Error Overlay Interactions

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0002_error_for_invalid_html_compiled_3cbc2f9969e183772ad5deb4cf0166f0.txt

Handles closing the overlay via UI elements and keyboard events, and manages body scroll state using a MutationObserver.

```javascript
toggle.textContent = '▶';
          }
        }
      }

      function closeErrorOverlay() {
        const overlay = document.querySelector('.herb-parser-error-overlay');
        if (overlay) overlay.style.display = 'none';
      }

      // Setup close button
      const closeBtn = document.querySelector('.herb-close-button');
      if (closeBtn) {
        closeBtn.addEventListener('click', closeErrorOverlay);
      }

      // Close when clicking on backdrop (outside the container)
      const overlay = document.querySelector('.herb-parser-error-overlay');
      const container = document.querySelector('.herb-error-container');
      if (overlay && container) {
        overlay.addEventListener('click', function(e) {
          if (e.target === overlay) {
            closeErrorOverlay();
          }
        });
      }

      // Setup section toggles
      document.querySelectorAll('.herb-section-header').forEach(header => {
        header.addEventListener('click', function() {
          const sectionId = this.getAttribute('data-section-id');
          if (sectionId) toggleSection(sectionId);
        });
      });

      // Close on Escape key
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          closeErrorOverlay();
        }
      });

      // Prevent body scroll when overlay is open
      document.body.style.overflow = 'hidden';

      // Restore scroll when closed (cleanup for navigation)
      const overlay = document.querySelector('.herb-parser-error-overlay');
      if (overlay) {
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (overlay.style.display === 'none') {
                document.body.style.overflow = '';
              }
            }
          });
        });
        observer.observe(overlay, { attributes: true });
      }
    })();
  </script>
</div>
</template>'.html_safe).to_s;
@output_buffer
```

--------------------------------

### Manage Error Overlay Visibility

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0002_error_for_invalid_html_evaluated_90bda078801ec604ddb029793b421979.txt

Functions to hide the overlay and attach event listeners for closing via UI elements or keyboard input.

```javascript
function closeErrorOverlay() {
        const overlay = document.querySelector('.herb-parser-error-overlay');
        if (overlay) overlay.style.display = 'none';
      }

      // Setup close button
      const closeBtn = document.querySelector('.herb-close-button');
      if (closeBtn) {
        closeBtn.addEventListener('click', closeErrorOverlay);
      }

      // Close when clicking on backdrop (outside the container)
      const overlay = document.querySelector('.herb-parser-error-overlay');
      const container = document.querySelector('.herb-error-container');
      if (overlay && container) {
        overlay.addEventListener('click', function(e) {
          if (e.target === overlay) {
            closeErrorOverlay();
          }
        });
      }

      // Setup section toggles
      document.querySelectorAll('.herb-section-header').forEach(header => {
        header.addEventListener('click', function() {
          const sectionId = this.getAttribute('data-section-id');
          if (sectionId) toggleSection(sectionId);
        });
      });

      // Close on Escape key
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          closeErrorOverlay();
        }
      });
```

--------------------------------

### Append content to output buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0006_template_with_newlines_compiled_ca45577d00c738a24540dfeb3f7885ef.txt

Directly appends content to the output buffer using safe_append and append methods.

```ruby
@output_buffer.safe_append='<div>
'.freeze; @output_buffer.append=(@content); @output_buffer.safe_append='
</div>'.freeze;
@output_buffer
```

--------------------------------

### Output ERB Expressions

Source: https://context7.com/marcoroth/reactionview/llms.txt

Use standard ERB syntax for outputting values, with automatic XSS protection and raw output options.

```erb
<!-- Standard output with automatic escaping -->
<h1>Hello <%= @name %></h1>

<!-- XSS protection: script tags are automatically escaped -->
<div><%= @unsafe_content %></div>
<!-- Input: '<script>alert("XSS")</script>' -->
<!-- Output: &lt;script&gt;alert("XSS")&lt;/script&gt; -->

<!-- Multiple expressions in a single template -->
<h1>Hello <%= @name %>!</h1>
<p><%= @message %></p>

<!-- Raw output (unescaped) using raw helper -->
<%= raw @safe_html %>

<!-- Raw output using double equals syntax -->
<%== @safe_html %>
```

--------------------------------

### Render JSON to HTML attributes

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0019_empty_json_structures_compiled_b55357f3dbb58a45ee489e361d040560.txt

Serializes empty array and object variables into data attributes for a div element. Requires the variables to be defined in the controller or view context.

```ruby
@output_buffer.safe_append='<div data-empty-array="'.freeze; @output_buffer.append=(@empty_array.to_json); @output_buffer.safe_append='" data-empty-object="'.freeze; @output_buffer.append=(@empty_object.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Dynamic CSS Styles with ERB

Source: https://context7.com/marcoroth/reactionview/llms.txt

Inject dynamic CSS custom properties and styles directly into style tags using ERB expressions.

```erb
<style>
  :root {
    --primary: <%= @primary %>;
    --secondary: <%= @secondary %>;
  }
</style>
<!-- With @primary = "#FF0000" and @secondary = "rgb(0, 255, 0)" -->
```

--------------------------------

### Append JSON Configuration to HTML

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0027_raw_helper_with_json_compiled_20403f778989be958c7c39c9c96e58c6.txt

Appends a JSON-encoded configuration to an HTML div element for client-side rendering. Ensure the @config object is properly serialized to JSON.

```ruby
@output_buffer.safe_append='<div data-config="'.freeze; @output_buffer.append=(raw @config.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Inject JSON data into script tags

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0021_script_with_javascript_expression_compiled_5d7430ade3b9269041920a8c7b032fa7.txt

Directly appends JSON-serialized data to the output buffer within a script tag context.

```ruby
@output_buffer.safe_append='<script>const data = '.freeze; @output_buffer.append=(@data.to_json.html_safe); @output_buffer.safe_append='; console.log(data);</script>'.freeze;
@output_buffer
```

--------------------------------

### Append JSON data to output buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0017_script_with_application_json_type_compiled_7d3a2482057022489495ec23f055dbbd.txt

Appends JSON-formatted data to the output buffer, ensuring it's safely rendered as HTML. This is useful for embedding dynamic data into web pages.

```ruby
@output_buffer.safe_append='<script type="application/json">'.freeze; @output_buffer.append=(@data.to_json.html_safe); @output_buffer.safe_append='</script>'.freeze;
@output_buffer
```

--------------------------------

### Render Chart Canvas Component

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0025_canvas_with_boolean_array_and_multiple_attributes_compiled_3a6660c58ab156795350bc91517160ad.txt

Uses the Rails output buffer to safely append a canvas element with data attributes for a Stimulus chart controller. Ensure @unit_type, @data, @labels, and @unit_label are defined in the controller before rendering.

```ruby
@output_buffer.safe_append='<canvas
data-controller="chart"
data-chart-unit-type-value="'.freeze; @output_buffer.append=(@unit_type); @output_buffer.safe_append='"
data-chart-data-value="'.freeze; @output_buffer.append=(@data.to_json); @output_buffer.safe_append='"
data-chart-labels-value="'.freeze; @output_buffer.append=(@labels.to_json); @output_buffer.safe_append='"
data-chart-unit-value="'.freeze; @output_buffer.append=(@unit_label); @output_buffer.safe_append='"
></canvas>
'.freeze;
@output_buffer
```

--------------------------------

### Append Data to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0022_data_attributes_with_json_compiled_d01a74b24b47ea4e29bcdde734bee55b.txt

Directly appends a JSON-encoded data object to the output buffer within an HTML div element.

```ruby
@output_buffer.safe_append='<div data-value="'.freeze; @output_buffer.append=(@data.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Render JSON to HTML Attribute

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0013_data_attribute_with_json_escape_helper_compiled_eb45ee6f875fa7c36ae5b1a64fdead64.txt

Injects a JSON-serialized object into a data attribute within an HTML div element using the output buffer.

```ruby
@output_buffer.safe_append='<div data-holidays-current-value="'.freeze; @output_buffer.append=(json_escape(@holidays.to_json)); @output_buffer.safe_append='"></div>'.freeze;
```

```ruby
@output_buffer
```

--------------------------------

### Inject JSON data into script tag

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0023_script_tag_with_json_compiled_2f7acc1a1e2f69ab1b4398fefda1541b.txt

Directly appends JSON-serialized data to the output buffer within a script tag. Ensure the data object is properly prepared before calling to_json.

```ruby
@output_buffer.safe_append='<script>window.data = '.freeze; @output_buffer.append=(@data.to_json.html_safe); @output_buffer.safe_append='</script>'.freeze;
@output_buffer
```

--------------------------------

### Manage Body Scroll State

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0002_error_for_invalid_html_evaluated_90bda078801ec604ddb029793b421979.txt

Disables body scrolling when the overlay is active and uses a MutationObserver to restore it when the overlay is hidden.

```javascript
// Prevent body scroll when overlay is open
      document.body.style.overflow = 'hidden';

      // Restore scroll when closed (cleanup for navigation)
      const overlay = document.querySelector('.herb-parser-error-overlay');
      if (overlay) {
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (overlay.style.display === 'none') {
                document.body.style.overflow = '';
              }
            }
          });
        });
        observer.observe(overlay, { attributes: true });
      }
```

--------------------------------

### Embed JSON in Script Tags

Source: https://context7.com/marcoroth/reactionview/llms.txt

Embed JSON data within script tags for JavaScript initialization. Use `html_safe` for raw JSON or assign to window variables.

```erb
<script type="application/json"><%= @data.to_json.html_safe %></script>
```

```erb
<script>window.config = <%= raw @config.to_json %></script>
```

```erb
<script>const data = <%= @data.to_json.html_safe %>; console.log(data);</script>
```

```erb
<script>
  window.railsVariables = <%= @hash.to_json.html_safe %>
</script>
```

--------------------------------

### Append JSON values to HTML element

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0020_json_with_primitive_types_compiled_f1457960b5bdcd77db4a1332adaa8bee.txt

Appends a JSON-serialized string of values to an HTML element's data attribute. Ensure @output_buffer and @values are properly initialized.

```Ruby
@output_buffer.safe_append='<div data-values="'.freeze; @output_buffer.append=(@values.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Inject Rails variables into script tag

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0024_multiline_script_with_hash_compiled_c9d7faf58ef399e031d791bd3fe43b98.txt

Uses the output buffer to safely append a JSON-serialized hash into a script tag for client-side access.

```ruby
@output_buffer.safe_append='<script>
  window.railsVariables = '.freeze; @output_buffer.append=(@hash.to_json.html_safe); @output_buffer.safe_append='
</script>
'.freeze;
@output_buffer
```

--------------------------------

### Append Safe HTML to Output Buffer

Source: https://github.com/marcoroth/reactionview/blob/main/test/snapshots/herb/template_handler_test/test_0015_special_html_characters_in_json_compiled_c654bbe36c73428a0b5c9986408889a8.txt

Appends a div with a data-value attribute to the output buffer. The value is JSON-encoded. Use when dynamically generating HTML content that includes data.

```ruby
@output_buffer.safe_append='<div data-value="'.freeze; @output_buffer.append=(@value.to_json); @output_buffer.safe_append='"></div>'.freeze;
@output_buffer
```

--------------------------------

### Embed JSON in HTML Data Attributes

Source: https://context7.com/marcoroth/reactionview/llms.txt

Use ERB to embed JSON data into HTML data attributes for JavaScript controllers. Ensure proper escaping for safe attribute embedding.

```erb
<div data-controller="combobox"
     data-combobox-choices-value="<%= @choices.to_json %>">
</div>
<!-- With @choices = ["Volkslied", "Weihnachtslied", "foo"] -->
```

```erb
<div data-config="<%= @config.to_json %>"></div>
<!-- With @config = { name: "Test", options: { enabled: true, count: 42 }, items: ["a", "b"] } -->
```

```erb
<div data-holidays-current-value="<%= json_escape(@holidays.to_json) %>"></div>
```

```erb
<div data-empty-array="<%= @empty_array.to_json %>"
     data-empty-object="<%= @empty_object.to_json %>">
</div>
<!-- With @empty_array = [] and @empty_object = {} -->
```

```erb
<canvas
  data-controller="chart"
  data-chart-unit-type-value="<%= @unit_type %>"
  data-chart-data-value="<%= @data.to_json %>"
  data-chart-labels-value="<%= @labels.to_json %>"
  data-chart-unit-value="<%= @unit_label %>">
</canvas>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.