{"id":32016276,"url":"https://github.com/rubymonolith/superview","last_synced_at":"2026-01-29T22:41:22.596Z","repository":{"id":189027290,"uuid":"679911330","full_name":"rubymonolith/superview","owner":"rubymonolith","description":"Create Rails applications entirely from Phlex, ViewComponents, or any object that responds to `#render_in`.","archived":false,"fork":false,"pushed_at":"2025-10-03T21:31:11.000Z","size":48,"stargazers_count":99,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-13T21:50:28.956Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rubymonolith.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-08-17T22:53:33.000Z","updated_at":"2025-11-29T11:37:32.000Z","dependencies_parsed_at":"2024-02-07T21:33:17.136Z","dependency_job_id":"61107551-7dc3-4216-bd95-8a32587444c4","html_url":"https://github.com/rubymonolith/superview","commit_stats":null,"previous_names":["rubymonolith/superview","beautifulruby/superview"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/rubymonolith/superview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubymonolith%2Fsuperview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubymonolith%2Fsuperview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubymonolith%2Fsuperview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubymonolith%2Fsuperview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubymonolith","download_url":"https://codeload.github.com/rubymonolith/superview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubymonolith%2Fsuperview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28888429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"ssl_error","status_checked_at":"2026-01-29T21:06:42.160Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-16T00:01:08.040Z","updated_at":"2026-01-29T22:41:22.589Z","avatar_url":"https://github.com/rubymonolith.png","language":"Ruby","funding_links":[],"categories":["Framework","Ruby"],"sub_categories":[],"readme":"# Superview\n\nBuild Rails applications, from the ground up, using [Phlex](https://www.phlex.fun/) or [ViewComponent](https://viewcomponent.org/) components, like this.\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n  include Superview::Actions\n\n  before_action :load_post\n\n  class Show \u003c Components::Base\n    attr_accessor :post\n\n    def view_template(\u0026)\n      h1 { @post.title }\n      div(class: \"prose\") { @post.body }\n    end\n  end\n\n  class Edit \u003c ViewComponent::Base\n    attr_accessor :post\n\n    def call\n      \u003c\u003c~HTML\n        \u003ch1\u003eEdit #{@post.title}\u003c/h1\u003e\n        \u003cform action=\"\u003c%= post_path(@post) %\u003e\" method=\"post\"\u003e\n          \u003cinput type=\"text\" name=\"title\" value=\"\u003c%= @post.title %\u003e\"\u003e\n          \u003ctextarea name=\"body\"\u003e\u003c%= @post.body %\u003e\u003c/textarea\u003e\n          \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e\n        \u003c/form\u003e\n      HTML\n    end\n  end\n\n  private\n    def load_post\n      @post = Post.find(params[:id])\n    end\nend\n```\n\nRead more about it at:\n\n* [Component driven development on Rails with Phlex](https://fly.io/ruby-dispatch/component-driven-development-on-rails-with-phlex/)\n* [Hacking Rails Implicit Rendering for View Components \u0026 Fun](https://fly.io/ruby-dispatch/hacking-rails-implicit-rendering-for-view-components/)\n\n## Installation\n\nInstall the gem and add to the application's Gemfile by executing:\n\n    $ bundle add superview\n\nIf bundler is not being used to manage dependencies, install the gem by executing:\n\n    $ gem install superview\n\n## Usage\n\nAdd `include Superview::Actions` to any controllers you'd like to render components as controller actions.\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n   # 🚨 Add this 👇 to your controller 🚨\n  include Superview::Actions\n\n  # Your code...\nend\n```\n\nThen add classes to your controller that map to the actions you'd like to render. The `Show` class will render when the `PostsController#show` action is called and the `Edit` class will render when the `PostsController#edit` action is called.\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n  include Superview::Actions\n\n  before_action :load_post\n\n  class Show \u003c Components::Base\n    attr_accessor :post\n\n    def view_template(\u0026)\n      h1 { @post.title }\n      div(class: \"prose\") { @post.body }\n    end\n  end\n\n  class Edit \u003c ViewComponent::Base\n    attr_accessor :post\n\n    def call\n      \u003c\u003c~HTML\n        \u003ch1\u003eEdit #{@post.title}\u003c/h1\u003e\n        \u003cform action=\"\u003c%= post_path(@post) %\u003e\" method=\"post\"\u003e\n          \u003cinput type=\"text\" name=\"title\" value=\"\u003c%= @post.title %\u003e\"\u003e\n          \u003ctextarea name=\"body\"\u003e\u003c%= @post.body %\u003e\u003c/textarea\u003e\n          \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e\n        \u003c/form\u003e\n      HTML\n    end\n  end\n\n  private\n    def load_post\n      @post = Post.find(params[:id])\n    end\nend\n```\n\n### Explicit rendering\n\nYou can explicitly render a component in a controller action method. In this example, we needed to render a the `Show` component in the `html` format and a JSON response in the `json` format.\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n  include Superview::Actions\n\n  # Your code...\n\n  class Show \u003c Components::Base\n    attr_accessor :post\n\n    def view_template(\u0026)\n      h1 { @post.title }\n      div(class: \"prose\") { @post.body }\n    end\n  end\n\n  def show\n    respond_to do |format|\n      # 👋 Renders the Show component\n      format.html { render component }\n\n      # 👉 These would also work...\n      # format.html { render Show.new.tap { _1.post = @post } }\n      # format.html { render component Show.new }\n      # format.html { render component Show }\n      # format.html { render component :show }\n      format.json { render json: @post }\n    end\n  end\n\n  # Your code...\nend\n```\n\n### Rendering other classes from different actions\n\nIt's common to have to render form actions from other actions when forms are saved. In this example the `create` method renders the `component New` view when the form is invalid.\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n  include Superview::Actions\n\n  def create\n    @post = Post.new(post_params)\n\n    if @post.save\n      redirect_to @post\n    else\n      # 👋 Renders the New component from the create action.\n      render component New\n\n      # 👉 These would also work...\n      # render New.new.tap { _1.post = @post }\n      # render component New.new\n      # render component New\n      # render component :new\n    end\n  end\n\n  # Your code...\nend\n```\n\n### Extracting inline views into the `./app/views` folder\n\nInline views are an amazingly productive way of prototyping apps, but as it matures you might be inclined to extract these views into the `./app/views` folders for organizational purposes or so you can share them between controllers.\n\nFirst let's extract the `Show` class into `./app/views/posts/show.rb`\n\n```ruby\n# ./app/views/posts/show.rb\nmodule Posts\n  class Show \u003c Components::Base\n    attr_accessor :post\n\n    def view_template(\u0026)\n      h1 { @post.title }\n      div(class: \"prose\") { @post.body }\n    end\n  end\nend\n```\n\nThen include the `Posts` module in the controllers you'd like to use the views:\n\n```ruby\n# ./app/controllers/posts_controller.rb\nclass PostsController \u003c ApplicationController\n  include Superview::Actions\n  # 🚨 Add this 👇 to your controller 🚨\n  include Posts\n\n  before_action :load_post\n\n  def show\n    respond_to do |format|\n      format.html { render Show.new.tap { _1.post = @post } }\n      format.json { render json: @post }\n    end\n  end\n\n  private\n    def load_post\n      @post = Post.find(params[:id])\n    end\nend\n```\n\nThat's it! Ruby includes all the classes in the `Posts` module, which Superview picks up and renders in the controller. If you have an `Index`, `Edit`, `New`, etc. class in the `Posts` namespace, those would be implicitly rendered for their respective action.\n\n### View path class mappings\n\nNot all component libraries are integrated into Rails views, so you might have to manually configure the view paths in your Rails application. This instructs the Rails code reloader, Zeitwerk, to load the components.\n\n```ruby\n# ./config/application.rb\nmodule MyApp\n  class Application \u003c Rails::Application\n    config.autoload_paths \u003c\u003c \"#{root}/app/views\"\n    config.autoload_paths \u003c\u003c \"#{root}/app/views/layouts\"\n    config.autoload_paths \u003c\u003c \"#{root}/app/views/components\"\n    # Your code\n  end\nend\n```\n\nFor example, the `Show` component in the `Posts` module would be loaded from `./app/views/posts/show.rb` and the `Layout` component in the `Layouts` module would be loaded from `./app/views/layouts/layout.rb`.\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/rubymonolith/superview. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/rubymonolith/superview/blob/main/CODE_OF_CONDUCT.md).\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the Superview project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/rubymonolith/superview/blob/main/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubymonolith%2Fsuperview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubymonolith%2Fsuperview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubymonolith%2Fsuperview/lists"}