# Use AMP with Remix

If for any reason, you want to add AMP to your Remix app, there are a few things you need to do.

First, go to your `app/root` file and change the component with this:

```tsx
export default function App() {
  return (
    <html amp lang="en">
      <head>
        <Meta />
        <script async src="https://cdn.ampproject.org/v0.js" />
        <Links />
        <style
          amp-boilerplate
          dangerouslySetInnerHTML={{
            __html:
              "body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}",
          }}
        />
        <noscript>
          <style
            amp-boilerplate
            dangerouslySetInnerHTML={{
              __html:
                "body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}",
            }}
          />
        </noscript>
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}
```

The important changes are

- Add `amp` non-standard attribute to the `<html>` tag.
- Add a script to load `https://cdn.ampproject.org/v0.js` (you may want to preload it).
- Add a `<style>` tag with the non-standard `amp-boilerplate` attribute and some CSS inside.
- Add a `<noscript>` tag with a `<style>` tag inside with again the same `amp-boilerplate` attribute and other styles.
- Remove the `<Scripts />` component from Remix so your app doesn't hydrate.

Then, you can start using any AMP custom element. For example, go to your `app/routes/index` file and render an `amp-img`:

```tsx
export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix with AMP</h1>

      <amp-img
        src="https://source.unsplash.com/random/600x400"
        width="600"
        height="400"
      />
    </div>
  );
}
```

That's it. You can now use any other AMP custom element in your HTML.