Quick Start
This documentation covers everything you need to know to get started with remix-development-tools.
Prerequisites
- Remix version 2.8 or higher.
- Your project needs to run on ESM. If you are using CommonJS, you will need to convert your project to ESM.
- Remix has to run on Vite.
Why ESM and Vite?
If you don't already know, Remix has become a Vite plugin. This means that Remix is now using Vite for bundling
and development instead of their own custom solution. Due to this remix-development-tools is also built on top of
Vite and uses it extensively.
In order to use the full feature-set of Vite the project has to run on ESM. This is because Vite exposes a websocket
that remix-development-tools uses to communicate with the server. This websocket is only available in ESM projects
because it's exposed by import.meta which is only available in ESM.
To avoid creating user confusion and giving you a subpar experience, we have decided to only support ESM projects running on Vite.
Why use remix-development-tools?
remix-development-tools is a set of tools that help you to develop your Remix application.
They help you, but are not limited to, to do the following things:
- Loader data display - You can see the data that is being loaded by your loaders.
- Route display - You can see the routes that are being used by your application in list/tree format.
- Error tracking - You can see invalid HTML rendered on your page and where it's coming from.
- Hydration mismatch tracking - You can see if there are any hydration mismatches in your application, what was rendered on the client and what was rendered on the server.
- Server logs - You can see the logs of your server in the browser.
- Route boundaries - You can see the route boundaries by hovering over elements.