an alternative to HTML & ERB

write your files using ruby

Create a ruby file: hello.rb

hello.rb

header "Hello World!"

Now in terminal you can run this command to get HTML

rubyview render hello.rb

or inside of a ruby file

require 'rubyview'
RubyView.render("hello.rb")

You will see the following html be rendered

<h1>Hello World!</h1>

There are two correct ways to write rubyview code. 1 is using the html tag names directly this means you can directly write the html tags in ruby.

h1 "Hello world!"
p  "say whats up"

The other way is to use the custom DSL I built to abstract away from regular html tag names to other rememberable names.

header "Hello world!"
text  "say whats up"

Here is a full list of the custom DSL names mapped to the corresponding html tag

Works out of the box with Rails just add the gem to your app and then change your file extensions from .html.erb to .view

example: app/views/pages/home.view

header "Hello Ruby on Rails!"
text "This is rendered with RubyView"

To take things further you can define your own helper methods that allow you to render a component with custom classes included.

To do this you can use the RubyView.add_helper_method function. To do this in rails you can create a rubyview initializer file: config/initializers/rubyview.rb

RubyView.add_helper_method :vertical do |content = '', **html_opts, &block|
  custom_classes = 'flex flex-col'
  html_opts[:class] = merge_classes(html_opts[:class], custom_classes)
  div(content, **html_opts, &block)
end

Now in your code you can use the helper vertical for styling content with flex column plus any additional options.

The merge_classes method is provided for convenience to allow you to add combine two class strings to allow additional classes along with the default ones.

Inside of your custom method you have all of the methods from RubyView available to you. All of the html tags, rubyview DSL helpers and others.

One helpful function is the format_html_opts which converts an object of key value pairs into html tag options for example

format_html_opts({ class: "class-1 class-2", id: "element-1" }) => class="class-1 class-2" id="element-1"

This is automatically done when passing in options to a helper like container/div