diff --git a/.changeset/small-moons-taste.md b/.changeset/small-moons-taste.md
new file mode 100644
index 00000000..77fb1a57
--- /dev/null
+++ b/.changeset/small-moons-taste.md
@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Docs: Added documentation for importmaps workaround
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..65a498a1
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: [konnorrogers] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/docs/.tool-versions b/docs/.tool-versions
new file mode 100644
index 00000000..c2ca3d3d
--- /dev/null
+++ b/docs/.tool-versions
@@ -0,0 +1 @@
+nodejs 20.9.0
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
index fd285ee6..44cf482b 100644
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@@ -1,9 +1,9 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activemodel (7.1.3)
-      activesupport (= 7.1.3)
-    activesupport (7.1.3)
+    activemodel (7.1.3.2)
+      activesupport (= 7.1.3.2)
+    activesupport (7.1.3.2)
       base64
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
@@ -15,16 +15,16 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
-    amazing_print (1.5.0)
+    amazing_print (1.6.0)
     base64 (0.2.0)
-    bigdecimal (3.1.6)
-    bridgetown (1.3.2)
-      bridgetown-builder (= 1.3.2)
-      bridgetown-core (= 1.3.2)
-      bridgetown-paginate (= 1.3.2)
-    bridgetown-builder (1.3.2)
-      bridgetown-core (= 1.3.2)
-    bridgetown-core (1.3.2)
+    bigdecimal (3.1.7)
+    bridgetown (1.3.3)
+      bridgetown-builder (= 1.3.3)
+      bridgetown-core (= 1.3.3)
+      bridgetown-paginate (= 1.3.3)
+    bridgetown-builder (1.3.3)
+      bridgetown-core (= 1.3.3)
+    bridgetown-core (1.3.3)
       activemodel (>= 6.0, < 8.0)
       activesupport (>= 6.0, < 8.0)
       addressable (~> 2.4)
@@ -42,21 +42,20 @@ GEM
       listen (~> 3.0)
       rake (>= 13.0)
       roda (~> 3.46)
-      rouge (~> 3.0)
+      rouge (>= 3.0, < 5.0)
       serbea (~> 1.0)
       thor (~> 1.1)
       tilt (~> 2.0)
       zeitwerk (~> 2.5)
-    bridgetown-paginate (1.3.2)
-      bridgetown-core (= 1.3.2)
+    bridgetown-paginate (1.3.3)
+      bridgetown-core (= 1.3.3)
     bridgetown-quick-search (2.0.0)
       bridgetown (>= 1.2.0.beta2, < 2.0)
     colorator (1.1.0)
     concurrent-ruby (1.2.3)
     connection_pool (2.4.1)
-    csv (3.2.8)
-    drb (2.2.0)
-      ruby2_keywords
+    csv (3.3.0)
+    drb (2.2.1)
     erubi (1.12.0)
     faraday (2.9.0)
       faraday-net_http (>= 2.0, < 3.2)
@@ -67,17 +66,17 @@ GEM
     ffi (1.16.3)
     hash_with_dot_access (1.2.0)
       activesupport (>= 5.0.0, < 8.0)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (5.4.0)
-    listen (3.8.0)
+    liquid (5.5.0)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    minitest (5.21.2)
+    minitest (5.22.3)
     mutex_m (0.2.0)
     net-http (0.4.1)
       uri
@@ -90,26 +89,25 @@ GEM
     puma (5.6.5)
       nio4r (~> 2.0)
     racc (1.6.0)
-    rack (3.0.8)
+    rack (3.0.10)
     rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.6)
-    roda (3.76.0)
+    roda (3.78.0)
       rack
-    rouge (3.30.0)
-    ruby2_keywords (0.0.5)
+    rouge (4.2.1)
     serbea (1.0.1)
       activesupport (>= 6.0)
       erubi (>= 1.10)
       tilt (~> 2.0)
-    thor (1.3.0)
+    thor (1.3.1)
     tilt (2.3.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uri (0.13.0)
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-21
diff --git a/docs/Rakefile b/docs/Rakefile
index d96d383a..131a9071 100644
--- a/docs/Rakefile
+++ b/docs/Rakefile
@@ -27,12 +27,12 @@ end
 namespace :frontend do
   desc "Build the frontend with esbuild for deployment"
   task :build do
-    sh "yarn run esbuild"
+    sh "pnpm run esbuild"
   end
 
   desc "Watch the frontend with esbuild during development"
   task :dev do
-    sh "yarn run esbuild-dev"
+    sh "pnpm run esbuild-dev"
   rescue Interrupt
   end
 end
diff --git a/docs/frontend/javascript/entrypoints/syntax-highlighting.css b/docs/frontend/javascript/entrypoints/syntax-highlighting.css
index 7bf71a1a..120404c6 100644
--- a/docs/frontend/javascript/entrypoints/syntax-highlighting.css
+++ b/docs/frontend/javascript/entrypoints/syntax-highlighting.css
@@ -37,7 +37,7 @@ hue-6-2: #e6c07b
   color: #abb2bf;
   background: #0d0d0d;
   color: inherit;
-  font-size: 0.8rem;
+  font-size: 0.95em;
   padding: 0;
 }
 
diff --git a/docs/frontend/javascript/index.js b/docs/frontend/javascript/index.js
index a7b2a7e8..7326ee7c 100644
--- a/docs/frontend/javascript/index.js
+++ b/docs/frontend/javascript/index.js
@@ -57,9 +57,17 @@ Object.entries(controllers).forEach(([filename, controller]) => {
 
   function enhanceCodeBlocks () {
     document.querySelectorAll(":is(.language-bash, .language-shell, .language-zsh, .language-sh, .language-console).highlighter-rouge pre.highlight > code").forEach((el) => {
-      el.innerHTML = el.innerHTML.split("\n").map((str) => {
-        return str.replace(/^(\w)/, "<span class='highlight-command-line-start'>$</span>$1")
-      }).join("\n")
+      if (el.dataset.enhanced === "true") {
+        return
+      }
+
+      el.dataset.enhanced = "true"
+
+      el.innerHTML = el.innerHTML.split(/\n/).map((str, index, ary) => {
+        if (!str && ary.length - 1 === index) return ""
+        // return str.replace(/^([])/, "<span class='highlight-command-line-start'>$</span>$1")
+        return "<span class='highlight-command-line-start'>$</span>" + str
+      }).join("\n").trimEnd()
     })
   }
 
diff --git a/docs/frontend/styles/_content.css b/docs/frontend/styles/_content.css
index e4f9d834..35d97a1c 100644
--- a/docs/frontend/styles/_content.css
+++ b/docs/frontend/styles/_content.css
@@ -10,7 +10,7 @@ pre.highlight {
 .highlighter-rouge,
 .highlight {
   border-radius: 8px;
-  font-size: 0.85rem;
+  font-size: 0.925em;
   line-height: 1.4;
   font-family: var(--sl-font-mono);
 }
@@ -25,7 +25,7 @@ code.highlight,
 code.highlighter-rouge {
   /** Layout */
   display: inline-block;
-  font-size: 0.85em;
+  font-size: 0.925em;
   padding: 0.1em 0.4em;
   margin: 4px 0;
   border-radius: 6px;
diff --git a/docs/frontend/styles/_normalize.css b/docs/frontend/styles/_normalize.css
index a8d929c9..af68033b 100644
--- a/docs/frontend/styles/_normalize.css
+++ b/docs/frontend/styles/_normalize.css
@@ -1,7 +1,6 @@
 html {
   box-sizing: border-box;
   height: 100%;
-  font-size: 16px;
   /* letter-spacing: 0.025em; */
 }
 
@@ -23,6 +22,7 @@ body {
   min-height: 100%;
   margin: 0;
   padding: 0;
+  font-size: 115%;
 }
 
 [hidden] {
@@ -66,33 +66,33 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 main p {
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 h1 {
-  font-size: 1.25rem;
+  font-size: 1.25em;
   margin: 0;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 h2 {
-  font-size: 1.15rem;
+  font-size: 1.15em;
 }
 
 h3, h4 {
-  font-size: 1.1rem;
+  font-size: 1.1em;
 }
 
 h5, h6 {
-  font-size: 1.05rem;
+  font-size: 1.05em;
 }
 
 p {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   padding: 0;
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 p, li {
@@ -100,7 +100,7 @@ p, li {
 }
 
 li {
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 ul {
@@ -189,7 +189,7 @@ a external-icon {
 
 blockquote {
   border-inline-start: 4px solid var(--divider-color);
-  margin-inline-start: 0.5rem;
-  padding: 0.75rem;
+  margin-inline-start: 0.5em;
+  padding: 0.75em;
   background-color: var(--sl-color-neutral-50);
 }
diff --git a/docs/frontend/styles/components/_alert.css b/docs/frontend/styles/components/_alert.css
index 3dcb24e2..ddf71dd9 100644
--- a/docs/frontend/styles/components/_alert.css
+++ b/docs/frontend/styles/components/_alert.css
@@ -8,6 +8,11 @@ sl-alert p {
 }
 
 sl-alert::part(base) {
+  font-size: 1em;
   box-shadow: 3px 3px 6px 1px var(--sl-color-neutral-100);
 }
 
+sl-alert[variant="danger"]::part(base) {
+  --sl-panel-background-color: var(--sl-color-red-100);
+  color: var(--sl-color-red-800);
+}
diff --git a/docs/frontend/styles/components/_clipboard.css b/docs/frontend/styles/components/_clipboard.css
index ad48358e..93f1b0f0 100644
--- a/docs/frontend/styles/components/_clipboard.css
+++ b/docs/frontend/styles/components/_clipboard.css
@@ -11,7 +11,7 @@
 }
 
 .clipboard sl-icon {
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 .clipboard__icon--success, .clipboard__icon--idle {
diff --git a/docs/frontend/styles/components/_contact.css b/docs/frontend/styles/components/_contact.css
index 646b0de5..82b3bd91 100644
--- a/docs/frontend/styles/components/_contact.css
+++ b/docs/frontend/styles/components/_contact.css
@@ -1,6 +1,6 @@
 .contact__title {
   line-height: 1.3;
-  font-size: 1.25rem;
+  font-size: 1.25em;
   margin-bottom: 0;
 }
 
diff --git a/docs/frontend/styles/components/_header.css b/docs/frontend/styles/components/_header.css
index fb2eaec1..f8ee4d2b 100644
--- a/docs/frontend/styles/components/_header.css
+++ b/docs/frontend/styles/components/_header.css
@@ -3,9 +3,9 @@
   grid-template-columns: minmax(0, 1fr);
   padding: 0.5rem;
   padding-inline-end: 1.5rem;
-  font-size: 1.05em;
+  font-size: 0.85em;
   justify-items: space-between;
   border-bottom: 1px solid var(--sl-color-neutral-200);
-	background-color: var(--body-color);
+  background-color: var(--body-color);
   min-height: var(--header-height);
 }
diff --git a/docs/frontend/styles/components/_hero.css b/docs/frontend/styles/components/_hero.css
index ca02ccdf..0dd672f8 100644
--- a/docs/frontend/styles/components/_hero.css
+++ b/docs/frontend/styles/components/_hero.css
@@ -19,7 +19,7 @@
 }
 
 .hero--mobile .logo__text{
-  font-size: 2rem;
+  font-size: 2em;
 }
 
 .hero__caption {
diff --git a/docs/frontend/styles/components/_main_list.css b/docs/frontend/styles/components/_main_list.css
index e98d3042..0fe1d60d 100644
--- a/docs/frontend/styles/components/_main_list.css
+++ b/docs/frontend/styles/components/_main_list.css
@@ -9,7 +9,7 @@
   padding: 8px;
   max-width: 100%;
   line-height: 1.3;
-  font-size: 1.25rem;
+  font-size: 1.25em;
   text-align: center;
 }
 
diff --git a/docs/frontend/styles/components/_pagination.css b/docs/frontend/styles/components/_pagination.css
index dfbd0d7a..958aaff5 100644
--- a/docs/frontend/styles/components/_pagination.css
+++ b/docs/frontend/styles/components/_pagination.css
@@ -37,7 +37,7 @@ pagination-title {
   display: block;
   max-width: 100%;
   overflow: hidden;
-  font-size: 1.15rem;
+  font-size: 1.15em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
diff --git a/docs/frontend/styles/components/_side_nav.css b/docs/frontend/styles/components/_side_nav.css
index 726b2821..fa9a82bb 100644
--- a/docs/frontend/styles/components/_side_nav.css
+++ b/docs/frontend/styles/components/_side_nav.css
@@ -17,7 +17,7 @@ ul.side-nav__menu li::marker {
   padding: 8px;
   max-width: 100%;
   line-height: 1.3;
-  font-size: 1rem;
+  font-size: 1em;
   font-weight: normal;
 }
 
@@ -68,7 +68,7 @@ ul.side-nav__menu li::marker {
 }
 
 .side-nav__category-header {
-  font-size: 1.25rem;
+  font-size: 1.25em;
   margin-bottom: 0.5rem;
 }
 
diff --git a/docs/frontend/styles/components/_table_of_contents.css b/docs/frontend/styles/components/_table_of_contents.css
index 77d87e4a..65750203 100644
--- a/docs/frontend/styles/components/_table_of_contents.css
+++ b/docs/frontend/styles/components/_table_of_contents.css
@@ -14,7 +14,7 @@
   padding-top: 1rem;
   font-weight: normal;
   color: var(--sl-color-neutral-800);
-  font-size: 1.05rem;
+  font-size: 1.05em;
 }
 
 .table-of-contents__list {
diff --git a/docs/frontend/styles/components/_top_nav.css b/docs/frontend/styles/components/_top_nav.css
index 62dcff30..41d363d5 100644
--- a/docs/frontend/styles/components/_top_nav.css
+++ b/docs/frontend/styles/components/_top_nav.css
@@ -48,7 +48,7 @@
 }
 
 .top-nav__github sl-icon {
-  font-size: 2rem;
+  font-size: 2em;
 }
 
 .top-nav__github {
diff --git a/docs/src/_documentation/tutorials/01-getting-started.md b/docs/src/_documentation/tutorials/01-getting-started.md
index 43d82fc9..08c29a27 100644
--- a/docs/src/_documentation/tutorials/01-getting-started.md
+++ b/docs/src/_documentation/tutorials/01-getting-started.md
@@ -3,13 +3,16 @@ title: Getting Started
 permalink: /tutorials/getting-started/
 ---
 
-The first step to working with the Rhino Editor is installing it!
+The first step to working with the Rhino Editor is installing it! There are 2 ways to install it.
+
+You can either [install with npm](#install-with-npm) or [install with importmaps](#manual-importmaps-installation)
+
+## Install with npm
 
 <%= render Syntax.new("bash") do %>
 npm install rhino-editor
 <% end %>
 
-
 After installing, we can import it in our project.
 
 <%= render Syntax.new("js") do %>
@@ -21,9 +24,60 @@ import "rhino-editor/exports/styles/trix.css"
 The above will auto-register the `<rhino-editor>` element for you.
 For more ways to initialize the editor, checkout the [Setup](/tutorials/setup) page.
 
+### Manual importmaps installation
+
+As of v2.x [importmaps-rails](https://github.com/rails/importmap-rails) vendors by default.
+Unfortunately, the typical importmap flow doesn't work as expected with RhinoEditor. So,
+here is a manual installation workaround until it gets fixed.
+
+<%= render Alert.new(type: :danger) do %>
+  Make sure to run the following commands at the root of your Rails project!
+<% end %>
+
+First we'll start by pulling down the Trix CSS file, and the precompiled JS bundle.
+
+CSS File: <https://unpkg.com/rhino-editor/cdn/styles/trix.css>
+
+JS File: <https://unpkg.com/rhino-editor/exports/bundle/index.module.js>
+
+```bash
+curl -Lo ./app/assets/stylesheets/rhino-editor.css https://unpkg.com/rhino-editor/cdn/styles/trix.css
+curl -Lo ./vendor/javascript/rhino-editor.js https://unpkg.com/rhino-editor/exports/bundle/index.module.js
+# Remove actiontext css to avoid conflicts.
+rm ./app/assets/stylesheets/actiontext.css
+```
+
+Once you have downloaded the files into `app/assets/stylesheets/rhino-editor.css` and
+`vendor/javascript/rhino-editor.js`, the Rhino Editor CSS file will automatically be included in your stylesheets as part of the AssetPipeline.
+
+To get the JavaScript portion to work, you need to modify your `config/importmap.rb` to point to the `rhino-editor.js`
+vendored file. We can also remove the Trix + ActionText pins if you don't plan to use them. Like so:
+
+```diff
+# config/importmap.rb
+# ...
+- pin "trix"
+- pin "@rails/actiontext", to: "actiontext.esm.js"
++ pin "rhino-editor", to: "rhino-editor.js"
+```
+
+And then in your `application.js`, we can do the same thing. Import Rhino Editor, remove Trix + ActionText.
+
+```js
+// app/javascript/application.js
+// ...
+- import "trix"
+- import "@rails/actiontext"
++ import "rhino-editor"
+```
+
+And you should be ready to go!
+
 <br>
 
-Finally, to see it appear on a page you can write the following HTML:
+## Usage
+
+To see Rhino Editor appear on your page you can write the following HTML:
 
 <%= render Syntax.new("html") do %>
 <rhino-editor></rhino-editor>
@@ -32,3 +86,5 @@ Finally, to see it appear on a page you can write the following HTML:
 And you're on your way! But you're not done yet!
 
 Head on over to [Setup](/tutorials/setup) for a more in-depth explanation of setting up the editor!
+
+If you're using Rails, check out [Usage with Rails](/tutorials/usage-with-rails/)
diff --git a/docs/src/_partials/_pagination.erb b/docs/src/_partials/_pagination.erb
index 5d8cc8f2..c32d5b37 100644
--- a/docs/src/_partials/_pagination.erb
+++ b/docs/src/_partials/_pagination.erb
@@ -6,11 +6,11 @@
     <% if previous_page %>
       <sl-button class="previous-page" href="<%= previous_page.relative_url %>">
         <span slot="prefix">
-          <sl-icon name="arrow-left" style="font-size: 1.5rem; display: block;"></sl-icon>
+          <sl-icon name="arrow-left" style="font-size: 1.5em; display: block;"></sl-icon>
         </span>
 
         <span style="text-align: end; display: block;">
-          <span style="display: block; color: var(--sl-color-neutral-500); font-size: 0.85rem;">
+          <span style="display: block; color: var(--sl-color-neutral-500); font-size: 0.85em;">
             Previous Page
           </span>
           <pagination-title><%= previous_page.data.title %></pagination-title>
@@ -24,14 +24,14 @@
     <% if next_page %>
       <sl-button class="next-page" href="<%= next_page.relative_url %>">
         <span style="text-align: start; display: block;">
-          <span style="display: block; color: var(--sl-color-neutral-500); font-size: 0.85rem;">Next Page</span>
+          <span style="display: block; color: var(--sl-color-neutral-500); font-size: 0.85em;">Next Page</span>
           <pagination-title>
             <%= next_page.data.title %>
           </pagination-title>
         </span>
 
         <span slot="suffix">
-          <sl-icon name="arrow-right" style="font-size: 1.5rem; display: block;"></sl-icon>
+          <sl-icon name="arrow-right" style="font-size: 1.5em; display: block;"></sl-icon>
         </span>
 
       </sl-button>
diff --git a/esbuild.config.js b/esbuild.config.js
index a77feccb..9acd0e68 100644
--- a/esbuild.config.js
+++ b/esbuild.config.js
@@ -113,6 +113,7 @@ function BuildTimer () {
       outfile: "exports/bundle/index.module.js",
       format: "esm",
       minify: true,
+      splitting: false,
     },
     {
       ...defaultConfig,
@@ -136,7 +137,7 @@ function BuildTimer () {
       splitting: true,
       minify: false,
       chunkNames: 'chunks/[name]-[hash]'
-    }
+    },
   ]
 
   if (!watchMode) {