Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, Active Page, Terminal and Routes, along with a side tab called Timeline. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more.
The Active Page tab in Remix Development Tools allows you to gain insights into the current page you are working on. It provides valuable information and data that can assist you in debugging and understanding the behavior of your application.
Key features include:
- URL Parameters: Easily view and analyze the URL parameters associated with the current page.
- Server Responses: Inspect and review the server responses received by the application for the current page.
- Loader Data: Monitor and track the loader data used by the application during page rendering.
- Outlet boundaries Activate the Show Route Boundaries option to see each Outlet and route boundaries by coloring the background. This needs to make a GET request to the current route when the dev tools are mounted for the first time to work properly and hence it is locked behind a flag. You can enable it by passing
showRouteBoundariesprop totruein theRemixDevToolscomponent.
The Routes tab enables you to manage and explore the routes within your Remix project. This tab offers an intuitive interface to perform the following tasks:
- Route Overview: View an organized list of all the routes available in your project.
- Wildcard Values: Add and manage wildcard values for dynamic routing.
- Browser Integration: Open routes directly in your preferred web browser for quick testing and verification.
- VS Code Integration: Seamlessly connect to the Remix Forge VS Code extension and leverage its capabilities to open routes within your VS Code environment and easily add new routes.
The Timeline side tab provides a timeline view of events occurring during the development process. This tab helps you track the sequence of actions and events, providing valuable insights into the execution flow of your application.
The terminal tab allows you to run terminal commands from the Remix Dev Tools. This is useful for running commands like npm run typecheck or npm run lint:fix without having to switch to the terminal in VS code. The tab requires you to connect to Remix Forge VS Code extension to work properly.
You can press Arrow Up and Arrow Down to cycle through the history of commands you have run in the terminal.
You can press Arrow Left and Arrow Right to cycle through all available commands in your projects package.json file.
You can press Ctrl + C to cancel the current command.
You can press Ctrl + L to clear the terminal.
To install and utilize Remix Development Tools, follow these steps:
- Install the package via npm:
npm install remix-development-tools -D- Add the following to your application
root.tsxfile:
// We'll lazy load RemixDevTools to ensure it doesn't contribute to production bundle size
+ import { lazy } from "react";
+ import rdtStylesheet from "remix-development-tools/stylesheet.css";
+ const RemixDevTools =
+ process.env.NODE_ENV === "development"
+ ? React.lazy(() => import("remix-development-tools"))
+ : undefined;
+ export const links: LinksFunction = () => [
+ ...(rdtStylesheet && process.env.NODE_ENV === "development" ? [{ rel: "stylesheet", href: rdtStylesheet }] : []),
+ ];
...
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
+ {RemixDevTools && <RemixDevTools />}
</body>
</html>
);
}The RemixDevTools component accepts the following props:
port: The port number to use for the Remix Development Tools connection to Remix Forge. If you want to change the port and connect to your Remix Forge VS code extension you need to change the port in VS Code too. Defaults to3003.defaultOpen: Whether to open the Remix Development Tools by default. Defaults tofalse.position: The position of the Remix Development Tools trigger. Defaults tobottom-right.requireUrlFlag: Requires rdt=true to be present in the URL search to open the Remix Development Tools. Defaults tofalse.showRouteBoundaries: Allows you to see each Outlet and route boundaries by coloring the background. Defaults tofalse.
Contributions to Remix Development Tools are welcome! To contribute, please follow these guidelines:
- Fork the repository and clone it locally.
- Create a new branch for your feature or bug fix.
- Run
npm run setupto get your development environment set up. - Run
npm run devto start the development server. - Implement your changes, adhering to the existing code style and best practices.
- Please add tests for any new features or bug fixes.
- Commit and push your changes to your forked repository.
- Open a pull request, providing a clear description of your changes and their purpose.
If you want to contribute to the VS Code extension integration follow the steps above and then:
- Clone the repo for Remix Forge locally.
- Open it in VS Code.
- Run
npm install - Run
npm run dev - Click
F5which will launch a debugger instance of VS Code. - In the debugger instance of VS Code, start the remix dev tools
- Click
Connect to Remix Forgein the Remix Dev Tools - Code on!
If you like Remix Development Tools consider starring the repository. If you have any questions, comments, or suggestions, please feel free to reach out!
Remix Development Tools is open-source software released under the MIT License.
Remix Development Tools was inspired by the Remix framework and aims to enhance the development experience for Remix users.
Feel free to explore Remix Development Tools, and we hope it significantly improves your Remix development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!
Thanks to all the contributors on this project and the support to the community. You guys are awesome!
Devoted to my loving wife.
In loving memory of my late Grandfather, who taught me to always be curious, never stop learning, and to always be kind to others. I miss you, Grandpa.