diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8182df4695..d15475790e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,9 +37,11 @@ Here is a quick summary of the changes necessary to upgrade to LiveView v1.1:
       env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]},
     ```
 
-## Macro components and colocated hooks
+## Colocated hooks
 
-A `Phoenix.Component.MacroComponent` defines a compile-time transformation of a HEEx tag. This can be used to transform a tag and its content into something else, for example to perform compile time syntax highlighting, or even remove tags from the template entirely and write them elsewhere. `Phoenix.LiveView.ColocatedHook` is a macro component that allows you to co-locate LiveView [JavaScript hooks](https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook) next to the component code that uses them, while ensuring they are included in your regular JavaScript bundle. A colocated hook is defined by placing the special `:type` attribute on a `<script>` tag:
+When writing hooks for a specific component, the need to place the JavaScript code in a whole separate file often feels inconvenient. LiveView 1.1 introduces colocated hooks to allow writing the hook's JavaScript code in the same file as your regular component code.
+
+A colocated hook is defined by placing the special `:type` attribute on a `<script>` tag:
 
 ```elixir
 alias Phoenix.LiveView.ColocatedHook
@@ -80,7 +82,9 @@ Colocated hooks are extracted to a `phoenix-colocated` folder inside your `_buil
   })
 ```
 
-The `phoenix-colocated` folder has subfolders for each application that uses colocated hooks, therefore you'll need to adjust the `my_app` part of the import depending on the name of your project (defined in your `mix.exs`). You can read more about colocated hooks in the module documentation of `Phoenix.LiveView.ColocatedHook` and `Phoenix.LiveView.ColocatedJS`.
+The `phoenix-colocated` folder has subfolders for each application that uses colocated hooks, therefore you'll need to adjust the `my_app` part of the import depending on the name of your project (defined in your `mix.exs`). You can read more about colocated hooks in the module documentation of `Phoenix.LiveView.ColocatedHook`. There's also a more generalized version for colocated JavaScript, see the documentation for `Phoenix.LiveView.ColocatedJS`.
+
+We're planning to make the private `Phoenix.Component.MacroComponent` API that we use for those features public in a future release.
 
 ## Types for public interfaces
 
@@ -209,7 +213,6 @@ To enable this, a new callback called `annotate_slot/4` was added. Custom implem
 * Add type annotations to all public JavaScript APIs ([#3789](https://github.com/phoenixframework/phoenix_live_view/pull/3789))
 * Add `Phoenix.LiveView.JS.ignore_attributes/1` to allow marking specific attributes to be ignored when LiveView patches an element ([#3765](https://github.com/phoenixframework/phoenix_live_view/pull/3765))
 * Add `Phoenix.LiveView.Debug` module with functions for inspecting LiveViews at runtime ([#3776](https://github.com/phoenixframework/phoenix_live_view/pull/3776))
-* Add `Phoenix.Component.MacroComponent` ([#3810](https://github.com/phoenixframework/phoenix_live_view/pull/3810))
 * Add `Phoenix.LiveView.ColocatedHook` and `Phoenix.LiveView.ColocatedJS` ([#3810](https://github.com/phoenixframework/phoenix_live_view/pull/3810))
 * Add `:update_only` option to `Phoenix.LiveView.stream_insert/4` ([#3573](https://github.com/phoenixframework/phoenix_live_view/pull/3573))
 * Use [`LazyHTML`](https://hexdocs.pm/lazy_html/) instead of [Floki](https://hexdocs.pm/floki) internally for LiveViewTest
diff --git a/lib/phoenix_component/macro_component.ex b/lib/phoenix_component/macro_component.ex
index bdfd540e4f..9155973821 100644
--- a/lib/phoenix_component/macro_component.ex
+++ b/lib/phoenix_component/macro_component.ex
@@ -1,125 +1,125 @@
 defmodule Phoenix.Component.MacroComponent do
-  @moduledoc """
-  A macro component is a special type of component that can modify its content
-  at compile time.
-
-  Instead of introducing a special tag syntax like `<#macro-component>`, LiveView
-  implements them using a special `:type` attribute as the most useful macro
-  components take their content and extract it to somewhere else, for example
-  to a file in the local file system. A good example for this is `Phoenix.LiveView.ColocatedHook`
-  and `Phoenix.LiveView.ColocatedJS`.
-
-  ## AST
-
-  Macro components work by defining a callback module that implements the
-  `Phoenix.LiveView.MacroComponent` behaviour. The module's `c:transform/2` callback
-  is called for each macro component used while LiveView compiles a HEEx component:
-
-  ```heex
-  <div id="hey" phx-hook=".foo">
-    <!-- content -->
-  </div>
-
-  <script :type={ColocatedHook} name=".foo">
-    export default {
-      mounted() {
-        this.el.firstElementChild.textContent = "Hello from JS!"
-      }
-    }
-  </script>
-  ```
-
-  In this example, the `ColocatedHook`'s `c:transform/2` callback will be invoked
-  with the AST of the `<script>` tag:
-
-  ```elixir
-  {"script",
-    [{"name", ".foo"}],
-    [
-      "\\n  export default {\\n    mounted() {\\n      this.el.firstElementChild.textContent = \\"Hello from JS!\\"\\n    }\\n  }\\n"
-    ]}
-  ```
-
-  This module provides some utilities to work with the AST, which uses
-  standard Elixir data structures:
-
-  1. A HTML tag is represented as `{tag, attributes, children, meta}`
-  2. Text is represented as a plain binary
-  3. Attributes are represented as a list of `{key, value}` tuples where
-     the value is an Elixir AST (which can be a plain binary for simple attributes)
-
-  > #### Limitations {: .warning}
-  > The AST is not whitespace preserving. When using macro components,
-  > the original whitespace between attributes is lost.
-  >
-  > Also, macro components can currently only contain simple HTML. Any interpolation
-  > like `<%= @foo %>` or components inside are not supported.
-
-  ## Example: a compile-time markdown renderer
-
-  Let's say we want to create a macro component that renders markdown as HTML at
-  compile time. First, we need some library that actually converts the markdown to
-  HTML. For this example, we use [`mdex`](https://hex.pm/packages/mdex).
-
-  We start by defining the module for the macro component:
-
-  ```elixir
-  defmodule MyAppWeb.MarkdownComponent do
-    @behaviour Phoenix.Component.MacroComponent
-
-    @impl true
-    def transform({"pre", attrs, children}, _meta) do
-      markdown = Phoenix.Component.MacroComponent.to_string(children)
-      html_doc = MDEx.to_html!(markdown)
-
-      {"div", attrs, [html_doc]}
-    end
-  end
-  ```
-
-  That's it. Since the div could contain nested elements, for example when using
-  an HTML code block, we need to convert the children to a string first, using the
-  `Phoenix.Component.MacroComponent.ast_to_string/1` function.
-
-  Then, we can simply replace the element's contents with the returned HTML string from
-  MDEx.
-
-  We can now use the macro component inside our HEEx templates:
-
-      defmodule MyAppWeb.ExampleLiveView do
-        use MyAppWeb, :live_view
-
-        def render(assigns) do
-          ~H\"\"\"
-          <pre :type={MyAppWeb.MarkdownComponent} class="prose mt-8">
-          ## Hello World
-
-          This is some markdown!
-
-          ```elixir
-          defmodule Hello do
-            def world do
-              IO.puts "Hello, world!"
-            end
-          end
-          ```
-          </pre>
-          \"\"\"
-        end
-      end
-
-  Note: this example uses the `prose` class from TailwindCSS for styling.
-
-  One trick to prevent issues with extra whitespace is that we use a `<pre>` tag in the LiveView
-  template, which prevents the `Phoenix.LiveView.HTMLFormatter` from indenting the contents, which
-  would mess with the markdown parsing. When rendering, we replace it with a `<div>` tag in the
-  macro component.
-
-  Another example for a macro component that transforms its content is available in
-  LiveView's end to end tests: a macro component that performs
-  [syntax highlighting at compile time](https://github.com/phoenixframework/phoenix_live_view/blob/38851d943f3280c5982d75679291dccb8c442534/test/e2e/support/colocated_live.ex#L4-L35)
-  using the [Makeup](https://hexdocs.pm/makeup/Makeup.html) library.
-  """
+  @moduledoc false
+
+  #   A macro component is a special type of component that can modify its content
+  #   at compile time.
+  #
+  #   Instead of introducing a special tag syntax like `<#macro-component>`, LiveView
+  #   implements them using a special `:type` attribute as the most useful macro
+  #   components take their content and extract it to somewhere else, for example
+  #   to a file in the local file system. A good example for this is `Phoenix.LiveView.ColocatedHook`
+  #   and `Phoenix.LiveView.ColocatedJS`.
+  #
+  #   ## AST
+  #
+  #   Macro components work by defining a callback module that implements the
+  #   `Phoenix.LiveView.MacroComponent` behaviour. The module's `c:transform/2` callback
+  #   is called for each macro component used while LiveView compiles a HEEx component:
+  #
+  #   ```heex
+  #   <div id="hey" phx-hook=".foo">
+  #     <!-- content -->
+  #   </div>
+  #
+  #   <script :type={ColocatedHook} name=".foo">
+  #     export default {
+  #       mounted() {
+  #         this.el.firstElementChild.textContent = "Hello from JS!"
+  #       }
+  #     }
+  #   </script>
+  #   ```
+  #
+  #   In this example, the `ColocatedHook`'s `c:transform/2` callback will be invoked
+  #   with the AST of the `<script>` tag:
+  #
+  #   ```elixir
+  #   {"script",
+  #     [{"name", ".foo"}],
+  #     [
+  #       "\\n  export default {\\n    mounted() {\\n      this.el.firstElementChild.textContent = \\"Hello from JS!\\"\\n    }\\n  }\\n"
+  #     ]}
+  #   ```
+  #
+  #   This module provides some utilities to work with the AST, which uses
+  #   standard Elixir data structures:
+  #
+  #   1. A HTML tag is represented as `{tag, attributes, children, meta}`
+  #   2. Text is represented as a plain binary
+  #   3. Attributes are represented as a list of `{key, value}` tuples where
+  #      the value is an Elixir AST (which can be a plain binary for simple attributes)
+  #
+  #   > #### Limitations {: .warning}
+  #   > The AST is not whitespace preserving. When using macro components,
+  #   > the original whitespace between attributes is lost.
+  #   >
+  #   > Also, macro components can currently only contain simple HTML. Any interpolation
+  #   > like `<%= @foo %>` or components inside are not supported.
+  #
+  #   ## Example: a compile-time markdown renderer
+  #
+  #   Let's say we want to create a macro component that renders markdown as HTML at
+  #   compile time. First, we need some library that actually converts the markdown to
+  #   HTML. For this example, we use [`mdex`](https://hex.pm/packages/mdex).
+  #
+  #   We start by defining the module for the macro component:
+  #
+  #   ```elixir
+  #   defmodule MyAppWeb.MarkdownComponent do
+  #     @behaviour Phoenix.Component.MacroComponent
+  #
+  #     @impl true
+  #     def transform({"pre", attrs, children}, _meta) do
+  #       markdown = Phoenix.Component.MacroComponent.to_string(children)
+  #       html_doc = MDEx.to_html!(markdown)
+  #
+  #       {"div", attrs, [html_doc]}
+  #     end
+  #   end
+  #   ```
+  #
+  #   That's it. Since the div could contain nested elements, for example when using
+  #   an HTML code block, we need to convert the children to a string first, using the
+  #   `Phoenix.Component.MacroComponent.ast_to_string/1` function.
+  #
+  #   Then, we can simply replace the element's contents with the returned HTML string from
+  #   MDEx.
+  #
+  #   We can now use the macro component inside our HEEx templates:
+  #
+  #       defmodule MyAppWeb.ExampleLiveView do
+  #         use MyAppWeb, :live_view
+  #
+  #         def render(assigns) do
+  #           ~H\"\"\"
+  #           <pre :type={MyAppWeb.MarkdownComponent} class="prose mt-8">
+  #           ## Hello World
+  #
+  #           This is some markdown!
+  #
+  #           ```elixir
+  #           defmodule Hello do
+  #             def world do
+  #               IO.puts "Hello, world!"
+  #             end
+  #           end
+  #           ```
+  #           </pre>
+  #           \"\"\"
+  #         end
+  #       end
+  #
+  #   Note: this example uses the `prose` class from TailwindCSS for styling.
+  #
+  #   One trick to prevent issues with extra whitespace is that we use a `<pre>` tag in the LiveView
+  #   template, which prevents the `Phoenix.LiveView.HTMLFormatter` from indenting the contents, which
+  #   would mess with the markdown parsing. When rendering, we replace it with a `<div>` tag in the
+  #   macro component.
+  #
+  #   Another example for a macro component that transforms its content is available in
+  #   LiveView's end to end tests: a macro component that performs
+  #   [syntax highlighting at compile time](https://github.com/phoenixframework/phoenix_live_view/blob/38851d943f3280c5982d75679291dccb8c442534/test/e2e/support/colocated_live.ex#L4-L35)
+  #   using the [Makeup](https://hexdocs.pm/makeup/Makeup.html) library.
 
   @type tag :: binary()
   @type attribute :: {binary(), Macro.t()}
diff --git a/lib/phoenix_live_view/colocated_hook.ex b/lib/phoenix_live_view/colocated_hook.ex
index bd2968ca45..1126512cb7 100644
--- a/lib/phoenix_live_view/colocated_hook.ex
+++ b/lib/phoenix_live_view/colocated_hook.ex
@@ -1,11 +1,11 @@
 defmodule Phoenix.LiveView.ColocatedHook do
   @moduledoc ~S'''
-  A `Phoenix.Component.MacroComponent` that extracts [hooks](js-interop.md#client-hooks-via-phx-hook)
+  A special HEEx `:type` that extracts [hooks](js-interop.md#client-hooks-via-phx-hook)
   from a co-located `<script>` tag at compile time.
 
   ## Introduction
 
-  Colocated hooks are defined as macro components with `:type={Phoenix.LiveView.ColocatedHook}`:
+  Colocated hooks are defined as with `:type={Phoenix.LiveView.ColocatedHook}`:
 
       defmodule MyAppWeb.DemoLive do
         use MyAppWeb, :live_view
diff --git a/lib/phoenix_live_view/colocated_js.ex b/lib/phoenix_live_view/colocated_js.ex
index 2180791aaa..ac9a368b64 100644
--- a/lib/phoenix_live_view/colocated_js.ex
+++ b/lib/phoenix_live_view/colocated_js.ex
@@ -1,6 +1,6 @@
 defmodule Phoenix.LiveView.ColocatedJS do
   @moduledoc """
-  A `Phoenix.Component.MacroComponent` that extracts any JavaScript code from a co-located
+  A special HEEx `:type` that extracts any JavaScript code from a co-located
   `<script>` tag at compile time.
 
   Colocated JavaScript is a more generalized version of `Phoenix.LiveView.ColocatedHook`.