lowfidelity

High-Fidelity to Low-Fidelity

Sometimes in life you need your Rails apps to go from Hi-Fi to Lo-Fi — and this gem does exactly that.

Drop it in, hit the floating lo-fi button, and your polished UI turns into a hand-drawn-looking black-and-white wireframe. Great for design reviews, screenshots, "what if it was a sketch" critique, and convincing stakeholders that the layout matters more than the gradient.

Install

# Gemfile
group :development do
  gem "lowfidelity"
end

bundle install

That's it. A Railtie auto-mounts the middleware in development. Restart your server and you'll see a small lo-fi button in the bottom-right corner of every HTML page.

Use

Click the button. Click it again. State persists across reloads via localStorage. Turbo Drive / Frames / Streams are left alone.

Configure (optional)

# config/initializers/lowfidelity.rb
Lowfidelity.configure do |c|
  c.path_filter = ->(path) { path.start_with?("/facilitator") }  # default: all paths
  c.font        = "Caveat"          # any Google Font name; try "Patrick Hand"
  c.default_on  = false             # auto-enable on first visit
  c.button      = true              # show the floating toggle
  # c.enabled   = true              # force-enable outside development
end

How it works

A tiny Rack middleware sniffs text/html responses and injects a <style> block, a <script>, and a Google Font link before </body>. Lo-fi mode is a single CSS class (html.lowfi-mode) that:

  • desaturates the page (filter: grayscale(1))
  • forces dashed black borders, square corners, no shadows
  • swaps every font for handwriting (Caveat by default)
  • fades images and SVGs

Skipped automatically: Turbo Frame requests, Turbo Stream responses, gzipped bodies, non-HTML content.

Caveats

  • Strict CSP without 'unsafe-inline' will block the inline payload. Fine for development; nonce support is on the roadmap.
  • This gem is dev-mode by default for a reason. Don't ship lo-fi to production unless you really mean it.

License

MIT