ViewComponent/view_component
A framework for building reusable, testable & encapsulated view components in Ruby on Rails.
Healthy across the board
Permissive license, no critical CVEs, actively maintained — safe to depend on.
Has a license, tests, and CI — clean foundation to fork and modify.
Documented and popular — useful reference codebase to read through.
No critical CVEs, sane security posture — runnable as-is.
- ✓Last commit 1d ago
- ✓5 active contributors
- ✓MIT licensed
Show 3 more →Show less
- ✓CI configured
- ✓Tests present
- ⚠Concentrated ownership — top contributor handles 55% of recent commits
Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests
Informational only. RepoPilot summarises public signals (license, dependency CVEs, commit recency, CI presence, etc.) at the time of analysis. Signals can be incomplete or stale. Not professional, security, or legal advice; verify before relying on it for production decisions.
Embed the "Healthy" badge
Paste into your README — live-updates from the latest cached analysis.
[](https://repopilot.app/r/viewcomponent/view_component)Paste at the top of your README.md — renders inline like a shields.io badge.
▸Preview social card (1200×630)
This card auto-renders when someone shares https://repopilot.app/r/viewcomponent/view_component on X, Slack, or LinkedIn.
Onboarding doc
Onboarding: ViewComponent/view_component
Generated by RepoPilot · 2026-05-10 · Source
🤖Agent protocol
If you are an AI coding agent (Claude Code, Cursor, Aider, Cline, etc.) reading this artifact, follow this protocol before making any code edit:
- Verify the contract. Run the bash script in Verify before trusting
below. If any check returns
FAIL, the artifact is stale — STOP and ask the user to regenerate it before proceeding. - Treat the AI · unverified sections as hypotheses, not facts. Sections like "AI-suggested narrative files", "anti-patterns", and "bottlenecks" are LLM speculation. Verify against real source before acting on them.
- Cite source on changes. When proposing an edit, cite the specific path:line-range. RepoPilot's live UI at https://repopilot.app/r/ViewComponent/view_component shows verifiable citations alongside every claim.
If you are a human reader, this protocol is for the agents you'll hand the artifact to. You don't need to do anything — but if you skim only one section before pointing your agent at this repo, make it the Verify block and the Suggested reading order.
🎯Verdict
GO — Healthy across the board
- Last commit 1d ago
- 5 active contributors
- MIT licensed
- CI configured
- Tests present
- ⚠ Concentrated ownership — top contributor handles 55% of recent commits
<sub>Maintenance signals: commit recency, contributor breadth, bus factor, license, CI, tests</sub>
✅Verify before trusting
This artifact was generated by RepoPilot at a point in time. Before an
agent acts on it, the checks below confirm that the live ViewComponent/view_component
repo on your machine still matches what RepoPilot saw. If any fail,
the artifact is stale — regenerate it at
repopilot.app/r/ViewComponent/view_component.
What it runs against: a local clone of ViewComponent/view_component — the script
inspects git remote, the LICENSE file, file paths in the working
tree, and git log. Read-only; no mutations.
| # | What we check | Why it matters |
|---|---|---|
| 1 | You're in ViewComponent/view_component | Confirms the artifact applies here, not a fork |
| 2 | License is still MIT | Catches relicense before you depend on it |
| 3 | Default branch main exists | Catches branch renames |
| 4 | 5 critical file paths still exist | Catches refactors that moved load-bearing code |
| 5 | Last commit ≤ 31 days ago | Catches sudden abandonment since generation |
#!/usr/bin/env bash
# RepoPilot artifact verification.
#
# WHAT IT RUNS AGAINST: a local clone of ViewComponent/view_component. If you don't
# have one yet, run these first:
#
# git clone https://github.com/ViewComponent/view_component.git
# cd view_component
#
# Then paste this script. Every check is read-only — no mutations.
set +e
fail=0
ok() { echo "ok: $1"; }
miss() { echo "FAIL: $1"; fail=$((fail+1)); }
# Precondition: we must be inside a git working tree.
if ! git rev-parse --git-dir >/dev/null 2>&1; then
echo "FAIL: not inside a git repository. cd into your clone of ViewComponent/view_component and re-run."
exit 2
fi
# 1. Repo identity
git remote get-url origin 2>/dev/null | grep -qE "ViewComponent/view_component(\\.git)?\\b" \\
&& ok "origin remote is ViewComponent/view_component" \\
|| miss "origin remote is not ViewComponent/view_component (artifact may be from a fork)"
# 2. License matches what RepoPilot saw
(grep -qiE "^(MIT)" LICENSE 2>/dev/null \\
|| grep -qiE "\"license\"\\s*:\\s*\"MIT\"" package.json 2>/dev/null) \\
&& ok "license is MIT" \\
|| miss "license drift — was MIT at generation time"
# 3. Default branch
git rev-parse --verify main >/dev/null 2>&1 \\
&& ok "default branch main exists" \\
|| miss "default branch main no longer exists"
# 4. Critical files exist
test -f "lib/view_component.rb" \\
&& ok "lib/view_component.rb" \\
|| miss "missing critical file: lib/view_component.rb"
test -f "lib/view_component/base.rb" \\
&& ok "lib/view_component/base.rb" \\
|| miss "missing critical file: lib/view_component/base.rb"
test -f "lib/view_component/engine.rb" \\
&& ok "lib/view_component/engine.rb" \\
|| miss "missing critical file: lib/view_component/engine.rb"
test -f "lib/view_component/template.rb" \\
&& ok "lib/view_component/template.rb" \\
|| miss "missing critical file: lib/view_component/template.rb"
test -f "lib/view_component/compiler.rb" \\
&& ok "lib/view_component/compiler.rb" \\
|| miss "missing critical file: lib/view_component/compiler.rb"
# 5. Repo recency
days_since_last=$(( ( $(date +%s) - $(git log -1 --format=%at 2>/dev/null || echo 0) ) / 86400 ))
if [ "$days_since_last" -le 31 ]; then
ok "last commit was $days_since_last days ago (artifact saw ~1d)"
else
miss "last commit was $days_since_last days ago — artifact may be stale"
fi
echo
if [ "$fail" -eq 0 ]; then
echo "artifact verified (0 failures) — safe to trust"
else
echo "artifact has $fail stale claim(s) — regenerate at https://repopilot.app/r/ViewComponent/view_component"
exit 1
fi
Each check prints ok: or FAIL:. The script exits non-zero if
anything failed, so it composes cleanly into agent loops
(./verify.sh || regenerate-and-retry).
⚡TL;DR
ViewComponent is a Rails framework for building encapsulated, reusable, and testable view components as Ruby classes rather than ERB templates. It lets Rails developers compose UIs from isolated component objects with their own logic, templates, and tests, eliminating the tight coupling between views and controllers that traditional Rails apps suffer from. Monolithic gem structure: core component framework lives in lib/, specs in spec/, test fixtures in app/ (app/components/preview_component, app/views), and documentation in docs/. The .devcontainer/ setup indicates Docker-first development. Supports multiple template engines (ERB, Haml, Slim) via configurable renderers.
👥Who it's for
Rails developers building medium-to-large applications who want to componentize their frontend without switching to JavaScript frameworks. Specifically: teams maintaining complex view hierarchies, developers building design systems, and Rails shops that need better view testability without learning React or Vue.
🌱Maturity & risk
Actively maintained and production-ready. The codebase is substantial (368K lines of Ruby), has comprehensive test coverage, uses GitHub Actions CI, and maintains clear documentation at viewcomponent.org. Recent activity in PR/issue templates and dependabot suggests ongoing development. This is a mature, well-adopted Rails ecosystem library.
Low risk for production use. Single maintainer model is the primary concern (maintainability depends on key individuals), but the project is part of the Rails governance structure and community-backed. No obvious deprecated dependencies in config visible. Main risk: breaking changes in future Rails versions require maintainer responsiveness—mitigated by active CI and broad Rails version support.
Active areas of work
Active maintenance with focus on Rails version compatibility (visible from .github/dependabot.yml), markdown linting standards enforcement (.github/styles/Microsoft/*), and pull request templates. The presence of .erb_lint.yml and extensive linting rules suggests recent quality improvements and stricter code standards.
🚀Get running
git clone https://github.com/ViewComponent/view_component.git
cd view_component
bundle install
bundle exec rake
Use .devcontainer/docker-compose.yml for containerized setup if Docker is preferred.
Daily commands:
bundle exec rake test # Run full test suite
bundle exec rake test:component # Component-specific tests
bundle exec rails s # Start preview/docs server (inferred from Rails gem structure)
Documentation: visit viewcomponent.org for generated guides.
🗺️Map of the codebase
lib/view_component.rb— Main entry point that loads and initializes the ViewComponent framework; required reading for understanding the library's architecture.lib/view_component/base.rb— Core base class that all view components inherit from; defines the fundamental component lifecycle and API.lib/view_component/engine.rb— Rails engine integration that sets up view component loading, template resolution, and framework hooks.lib/view_component/template.rb— Handles template compilation and rendering logic for component view files.lib/view_component/compiler.rb— Compiles component template methods and manages caching during development and production.Gemfile— Declares all dependencies; essential for understanding test setup and development toolchain..github/workflows/ci.yml— CI/CD pipeline configuration that runs tests across multiple Rails and Ruby versions; shows testing expectations.
🧩Components & responsibilities
- ViewComponent::Base (Ruby, ActionView) — Core component class handling initialization, lifecycle, template resolution, and rendering
- Failure mode: Broken component instantiation or missing render method halts view rendering
- Compiler (ERB, Ruby metaprogramming) — Transforms ERB template files into executable Ruby methods; manages cache
- Failure mode: Compilation error prevents component from rendering; missing cache invalidation causes stale output
- Template Resolver (File I/O, Rails conventions) — Locates component template files in the filesystem via Rails conventions
- Failure mode: Template not found raises error; incorrect resolution order delivers wrong template
- Engine (Rails Railtie/Engine API) — Rails engine that integrates ViewComponent into ActionView and sets up initialization hooks
- Failure mode: Engine initialization failure breaks all component rendering; missing hooks prevent lifecycle execution
- Preview system (Ruby reflection, HTTP routing) — Introspects component preview classes to generate browsable preview interface
- Failure mode: Preview server crashes blocks development workflow; broken preview methods render blank pages
🔀Data flow
Rails view template→ViewComponent::Base— View calls render(ComponentClass.new(args)) passing component instanceViewComponent::Base→Compiler— Component requests template method compilation or retrieval from cacheCompiler→Template Resolver— Compiler requests physical template file path based on component class nameTemplate Resolver→Filesystem— Resolver reads ERB template file from app/components/Compiler→ViewComponent::Base— Compiled render_template method attached to component instanceViewComponent::Base→Rails view output— render_template executes and returns HTML string to Rails rendererPreview system→HTTP server— Development preview classes serialized and served as browsable component gallery
🛠️How to make changes
Create a new view component
- Create a component class inheriting from ViewComponent::Base in app/components/my_component.rb (
lib/view_component/base.rb) - Define component state via initialize method with parameters that describe the component's data (
lib/view_component/base.rb) - Create the template file at app/components/my_component.html.erb with view logic (
lib/view_component/template.rb) - Use the component in views via render(MyComponent.new(arg1, arg2)) (
lib/view_component/base.rb)
Add component lifecycle hooks and validations
- Override initialize for component setup and attribute assignment (
lib/view_component/base.rb) - Define before_render or after_initialize hooks for pre-render logic (
lib/view_component/base.rb) - Add private validation methods to ensure component state is valid (
lib/view_component/base.rb)
Create component previews for documentation
- Create a preview class inheriting from ViewComponent::Preview in test/previews/my_component_preview.rb (
lib/view_component/preview.rb) - Define preview methods that instantiate the component with different example parameters (
lib/view_component/preview.rb) - Access component previews via the preview server to see live examples during development (
lib/view_component/preview.rb)
Configure framework behavior globally
- Edit config/initializers/view_component.rb or use ViewComponent.configure block (
lib/view_component/config.rb) - Set options like view_component_path, generate configuration, preview_path (
lib/view_component/config.rb)
🔧Why these technologies
- Ruby on Rails — ViewComponent is a Rails framework extension that integrates with ActionView and the Rails rendering pipeline.
- ERB templates — Standard Rails view templating language; components use ERB files matching Rails conventions.
- RSpec — Industry-standard Ruby testing framework used throughout ViewComponent's test suite.
- ActionView — ViewComponent extends and hooks into Rails' ActionView for template resolution and rendering.
⚖️Trade-offs already made
-
Components are classes that inherit from ViewComponent::Base rather than plain partials
- Why: Provides encapsulation, testability, and state management over Rails partials.
- Consequence: Developers must adopt component-oriented thinking; slight overhead vs. bare partials for trivial views.
-
Template compilation happens at runtime (with caching in production)
- Why: Allows dynamic template discovery and keeps development feedback loop fast.
- Consequence: Initial render of a new template has compilation overhead; caching mitigates this in production.
-
Framework supports both inline and file-based templates
- Why: Flexibility for simple vs. complex components; follows Rails philosophy.
- Consequence: Adds complexity to template resolution logic; developers must understand both patterns.
🚫Non-goals (don't propose these)
- Does not provide client-side component rendering or JavaScript framework integration (pure server-side)
- Does not handle asset compilation or CSS/JS bundling (delegates to Rails asset pipeline)
- Does not implement real-time or WebSocket updates (stateless HTTP request/response only)
- Does not enforce specific design system or UI component library (framework-agnostic)
⚠️Anti-patterns to avoid
- Tight coupling to ActionView helpers (Medium) —
lib/view_component/base.rb: Components that heavily depend on Rails helpers reduce testability; should encapsulate behavior instead - Mutable state in component instances (Medium) —
lib/view_component/base.rb: Components with mutable attributes modified after initialization can cause bugs; prefer immutable design - Complex template logic in ERB —
lib/view_component/template.rb: Heavy Ruby logic in templates should be moved to component methods; keeps templates readable
🪤Traps & gotchas
ViewComponent components must be mounted in views via <%= render(YourComponent.new(...)) %> syntax, not traditional Rails partials—mixing patterns breaks encapsulation. Ruby version compatibility is strict (check Gemfile for minimum); running on unsupported Ruby may cause cryptic failures. The preview system requires specific directory structure (app/components/**/*_component.rb); components in other paths won't be discoverable. Template file names must match component class names exactly (MyComponent → my_component.html.erb) or rendering fails silently.
🏗️Architecture
💡Concepts to learn
- Component Encapsulation — ViewComponent's core philosophy: each component owns its logic, template, and tests as a single unit, eliminating the Rails view/controller coupling that causes bugs and makes testing difficult.
- Server-Side Component Rendering — Unlike client-side frameworks, ViewComponent renders components on the server (in-request), keeping state server-side and reducing JavaScript bundle size—critical for Rails shops avoiding full SPA adoption.
- Template Engine Abstraction (Tilt) — ViewComponent supports ERB, Haml, Slim, and other templates via Tilt; understanding template loader patterns lets you support new engines without modifying core.
- Rails Renderer Injection — ViewComponent hooks into Rails' render pipeline by registering a custom handler; understanding how it overrides default view resolution is key to debugging integration issues.
- Slot-Based Component Composition — ViewComponent uses slots (named content blocks) to allow parents to inject content into children, enabling flexible component composition without tight coupling—modern alternative to Rails yield patterns.
- Preview/Storybook Pattern — ViewComponent's built-in preview system lets teams browse and test components in isolation without routing through controllers, similar to Storybook in JavaScript frameworks.
- Lazy Loading and Caching — ViewComponent supports lazy-rendering (defer expensive component logic) and caching decorators; critical for performance optimization in large component hierarchies.
🔗Related repos
rails/rails— ViewComponent integrates directly into Rails' rendering pipeline via ActionView; understanding Rails partials and view architecture is essential context.thoughtbot/view_component_preview— Earlier component abstraction approach for Rails; ViewComponent improved upon this pattern with better encapsulation and testing.palkan/view_component_refactor— Reference repository for refactoring existing Rails apps to use ViewComponent; practical examples of migration patterns.ViewComponent/rails-asset-pipeline-compatible-component— Companion tooling for ViewComponent to integrate CSS/JS assets per-component without breaking Rails asset pipeline.rails/stimulus-rails— Stimulus provides the JavaScript companion for ViewComponent; often used together to add interactivity to encapsulated components.
🪄PR ideas
To work on one of these in Claude Code or Cursor, paste:
Implement the "<title>" PR idea from CLAUDE.md, working through the checklist as the task list.
Add comprehensive linting CI workflow for documentation and style validation
The repo has extensive GitHub linting configuration (.github/lint/markdown.json, .github/styles/ with Microsoft, proselint, and inclusive-language rules) but no visible CI workflow file to enforce these lints. This creates a gap where contributors could merge PRs with style violations. Adding a GitHub Actions workflow would ensure all documentation adheres to the established standards.
- [ ] Create .github/workflows/lint.yml that runs markdown linting using the existing .github/lint/markdown.json config
- [ ] Add Vale linting step to enforce .github/styles/ rules (Microsoft, proselint, inclusive-language) against documentation files
- [ ] Configure the workflow to run on pull_request events targeting documentation and markdown files
- [ ] Add lint status check to the pull-request-template.md as a reminder for contributors
Create integration tests for devcontainer setup and Docker environment
The repo has a complete .devcontainer setup (Dockerfile, docker-compose.yml, devcontainer.json, create-db-user.sql) but likely lacks tests verifying the dev environment works correctly. New contributors using devcontainers might encounter silent setup failures. Adding tests ensures the containerized development environment remains reliable.
- [ ] Create test file: test/devcontainer_setup_test.rb to verify database initialization from .devcontainer/create-db-user.sql
- [ ] Add step in .github/workflows to build and test the devcontainer Docker image on PR
- [ ] Document the devcontainer setup verification in docs/CONTRIBUTING.md with reference to the new tests
- [ ] Add validation that docker-compose.yml services (likely Rails app + PostgreSQL) start correctly and can communicate
Add Dependabot configuration validation and update documentation
The .github/dependabot.yml file exists but the repository likely lacks documented guidance on how dependency updates are tested and merged. This is critical for a widely-used framework. Adding validation workflow and updating CONTRIBUTING.md would guide contributors on handling dependency PRs safely.
- [ ] Create .github/workflows/dependabot-approve.yml to automatically run full test suite on Dependabot PRs (Rails compatibility tests, gem version matrix)
- [ ] Document in docs/CONTRIBUTING.md the process for reviewing and merging Dependabot PRs, including required test coverage
- [ ] Add configuration to .github/dependabot.yml to group minor/patch updates and enable auto-merge for security patches after CI passes
- [ ] Reference the Dependabot workflow in the pull-request-template.md for contributor awareness
🌿Good first issues
- Add integration test coverage for Slim template rendering (lib/view_component/template.rb handles multiple template engines but spec/lib/view_component/template_test.rb may lack Slim-specific test cases).
- Expand docs/CONTRIBUTING.md with step-by-step troubleshooting for common .devcontainer setup failures and Docker-Compose gotchas.
- Write missing component lifecycle documentation: document the order and triggers of initialize → before_render → render → after_render hooks with real examples.
⭐Top contributors
Click to expand
Top contributors
- @joelhawksley — 55 commits
- @dependabot[bot] — 22 commits
- @github-actions[bot] — 19 commits
- @andyw8 — 3 commits
- @armstrjare — 1 commits
📝Recent commits
Click to expand
Recent commits
6873b25— Merge pull request #2627 from ViewComponent/more-yard-lint (joelhawksley)63fdc5a— spacing (joelhawksley)7c3e5e2— Merge pull request #2628 from ViewComponent/dependabot/bundler/docs/bundler-c700c4fcbe (github-actions[bot])e63e74c— Bump nokogiri in /docs in the bundler group across 1 directory (dependabot[bot])a6d1fa9— Enable yard-lint Tags/TagGroupSeparator rule (joelhawksley)55c4f7f— Enable yard-lint Documentation/BlankLineBeforeDefinition rule (joelhawksley)0d2008d— Merge pull request #2619 from ViewComponent/joelhawksley/fix-form-helper-yield-location (joelhawksley)dc9e726— Apply suggestion from @joelhawksley (joelhawksley)2031138— Merge branch 'main' into joelhawksley/fix-form-helper-yield-location (joelhawksley)5444686— add changelog (joelhawksley)
🔒Security observations
The ViewComponent repository demonstrates good security practices with a defined security policy for vulnerability reporting and clear support version guidelines. The project appears well-maintained as an open-source framework. However, the static analysis is limited by incomplete file content. Main concerns are: (1) inability to audit dependencies without access to dependency manifests, (2) unverified Docker/infrastructure configuration, and (3) development-only configuration files that require verification. No evidence of hardcoded secrets, injection vulnerabilities, or significant misconfigurations is apparent from the provided file structure. The project follows responsible disclosure practices with private vulnerability reporting guidelines in place.
- Medium · Missing Dependencies File Analysis —
Root directory - dependency manifests not provided. No package dependency file (Gemfile, package.json, etc.) was provided for analysis. This prevents identification of known vulnerable dependencies that may be used in the ViewComponent framework. Fix: Provide Gemfile, Gemfile.lock, or package.json for dependency vulnerability scanning. Use tools like 'bundle audit' for Ruby gems or 'npm audit' for Node packages. - Low · Docker Image Base Not Specified —
.devcontainer/Dockerfile. The .devcontainer/Dockerfile is present but content not provided. Without viewing the base image and dependencies, potential unpatched vulnerabilities in the container image cannot be assessed. Fix: Ensure Dockerfile uses a specific pinned version of base images (not 'latest'), regularly rebuild images with security patches, and scan with tools like Trivy or Snyk. - Low · Database Configuration File Present —
.devcontainer/create-db-user.sql. The file .devcontainer/create-db-user.sql exists. While this appears to be a development-only configuration, SQL files should never contain sensitive credentials or hardcoded passwords. Fix: Verify this file does not contain hardcoded credentials. Use environment variables for all sensitive database configuration. Ensure this file is excluded from production deployments.
LLM-derived; treat as a starting point, not a security audit.
👉Where to read next
- Open issues — current backlog
- Recent PRs — what's actively shipping
- Source on GitHub
Generated by RepoPilot. Verdict based on maintenance signals — see the live page for receipts. Re-run on a new commit to refresh.