Realizing DHH’s vision with modern front-end technologies.

Why Integrate Svelte?

Svelte offers the simplest and most elegant soulution to building reactive, high-performance front-end components.

See: Comparitions on the guide

Features

✍️ Sophisticated error messages
🚀 Cero-config deployment
🤝 Fully integrated with assets:precompile
😍 Contributor friendly

Known Issues

see issues

Description 👍

Renders Svelte components server-side and, together with @csedl/svelte-on-rails,
hydrates the component on the frontend.

Together with turbo-rails or turbolinks, if configured, it renders server-side only on initial requests
and delivers a empty tag that will be rendered by frontend.

If you have issues, please open one, and contributors are welcome!

Requirements

tested on
- ruby 3.2.2 and rails 7.1
- ruby 2.7.5 and rails 6.1
- vite@6 (v7 not supported, see issues)
- turbolinks and hotwired/turbo
vite_rails (the installer will install it by option –full or –vite)
svelte@5, @sveltejs/vite-plugin-svelte@5 (see: how to install svelte on rails/vite)
turbo (recommended / how to install turbo on rails)
npm on latest versions
actual node installed.
- if nvm is installed it gets the path to the node-binary from there.
  - When .nvmrc is present on projects root, it is respected
- If node is not included on the PATH you can configure your node path by environment variable SVELTE_ON_RAILS_NODE_BIN

PROPS ON RUBY <= 3

On ruby <3 Arguments can be misinterpreted, see issue-10

Installation

Required: vite_rails must be installed, it wants a app/frontend folder.

Check Svelte Installation: install svelte on rails

Within the app, add the gem

bundle add svelte-on-rails

and run the minimal installer (you are free to add any options from above)

rails g svelte_on_rails:install

Restart the server, add a hello world component app/frontend/javascript/HelloWorld.svelte like

  export let title


<h1>Svelte {title}</h1>

Add it to the view

&lt;%= svelte_component('HelloWorld', {title: 'Hello World'}) %&gt;

And you will see “Svelte Hello World” on the browser! 👍 🤗

Contributors welcome

see Guide / run your first test

Modules

Classes