Skip to content
Preact integration for Ruby on Rails
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Preact integration for Ruby on Rails.

Getting started

  1. Add webpacker and preact-rails to your Gemfile
gem 'webpacker'
gem 'preact-rails'
  1. Install the gems by running bundle install
  2. Install the Preact UJS driver by running yarn add preact_ujs or npm i preact_ujs
  3. Include your Preact components in your application.js Update app/javascript/packs/application.js, add the following lines:
    var componentRequireContext = require.context("components", true);
    var PreactRailsUJS = require("preact_ujs");
  4. Create the directory app/javascript/components. That's where your Preact components will reside.
  5. Create your first Preact component - create the file app/javascript/components/Button.js and add the following lines:
    import { h, Component } from "preact"
    class Button extends Component {
      render (props, state) {
        return (
          <button className="button" type={props.type}>{props.label}</button>
    export default Button
  6. Link the javascript Pack in Rails, add <%= javascript_pack_tag 'application' %> to app/views/layouts/application.html.erb
  7. Render your Preact component in a view
    <%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>
You can’t perform that action at this time.