diff --git a/README.md b/README.md index 55eead88..66264b2f 100644 --- a/README.md +++ b/README.md @@ -1,131 +1,103 @@ -![TanStack Devtools Header](https://github.com/tanstack/devtools/raw/main/media/repo-header.png) +
+ +
-# [TanStack](https://tanstack.com) Devtools v0 +
-Coming soon... - - - #TanStack - - +
+ + + +
+ +
semantic-release - - Join the discussion on Github + + Release + + + Follow @TanStack - - - - - - - -## Enjoy this library? - -Try other [TanStack](https://tanstack.com) libraries: - -- [TanStack Router](https://github.com/TanStack/router) -- [TanStack Query](https://github.com/TanStack/query) -- [TanSack Table](https://github.com/TanStack/table) -- [TanStack Virtual](https://github.com/TanStack/virtual) -- [TanStack Form](https://github.com/TanStack/form) -- [TanStack Store](https://github.com/TanStack/store) -- [TanStack Ranger](https://github.com/TanStack/ranger) -- [TanStack Pacer](https://github.com/TanStack/pacer) -- [TanStack Devtools](https://github.com/TanStack/devtools) -- [TanStack Config](https://github.com/TanStack/config) - -## Visit [tanstack.com/devtools](https://tanstack.com/devtools) for docs, guides, API and more! - -You may know **TanSack Devtools** by our adapter names, too! - -- [**React Devtools**](https://tanstack.com/devtools/latest/docs/framework/react/basic-setup) -- [**Solid Devtools**](https://tanstack.com/devtools/latest/docs/framework/solid/basic-setup) - -## Summary - -TanStack Devtools is a powerful set of tools designed to help developers inspect and debug applications built with various frameworks, including React, Solid, and Vanilla JS. It provides a unified interface to monitor application state, track changes, and identify issues in real-time. - -It is built with a plugin architecture, allowing for easy extension and customization. The devtools vite plugin can be integrated into your application, which enhances the development experience by providing better console logs, a server event bus, and improved debugging capabilities. - -## Quick Features - -- Inspect and debug your application's state and behavior in real-time -- Support for multiple frameworks (React, Solid, Vanilla JS, etc.) -- Plugin architecture to extend functionality -- Production mode support with tree-shaking to remove devtools code -- Customizable UI -- Event bus for communication between the devtools and your application -- Go-to-source functionality for easy debugging -- Works seamlessly with TanStack Query, Router, and other TanStack libraries - -## Installation - -Install one of the following packages based on your framework of choice: - -```bash -# Npm -npm install @tanstack/react-devtools -npm install @tanstack/solid-devtools -npm install @tanstack/devtools # no framework, just vanilla js -``` - -## Usage - -### React - -```tsx -import { TanStackDevtools } from '@tanstack/react-devtools' -import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' -import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' - -function App() { - return ( -
-

My App

- , - }, - { - name: 'TanStack Router', - render: , - }, - ]} - /> -
- ) -} -``` - -## Development - -To contribute to the development of TanStack Devtools, you can clone the repository and run the following commands: - -```bash -pnpm install -pnpm dev -``` - -Then go to any of the example directories and run: - -```bash -pnpm dev -``` - -## How to help? - -### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/) +
+ +
+ +### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) +
+ +# TanStack Devtools + +A debugging toolkit that provides a unified interface for inspecting, monitoring, and extending your applications. + +- Inspect and debug state and behavior in real time +- Works with React, Solid, Vanilla JS, and more +- Extensible plugin architecture with customizable UI +- Seamless integration with TanStack Query, Router, and other libraries + +### Read the docs → + +## Get Involved + +- We welcome issues and pull requests! +- Participate in [GitHub discussions](https://github.com/TanStack/devtools/discussions) +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) +- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions + +## Partners + + + + + + +
+ + + + + CodeRabbit + + + + + + + + Cloudflare + + +
+ +
+Devtools & you? +

+We're looking for TanStack Devtools Partners to join our mission! Partner with us to push the boundaries of TanStack Devtools and build amazing things together. +

+LET'S CHAT +
+ +## Explore the TanStack Ecosystem + +- TanStack Config – Tooling for JS/TS packages +- TanStack DB – Reactive sync client store +- TanStack Form – Type‑safe form state +- TanStack Pacer – Debouncing, throttling, batching +- TanStack Query – Async state & caching +- TanStack Ranger – Range & slider primitives +- TanStack Router – Type‑safe routing, caching & URL state +- TanStack Start – Full‑stack SSR & streaming +- TanStack Store – Reactive data store +- TanStack Table – Headless datagrids +- TanStack Virtual – Virtualized rendering + +… and more at TanStack.com » diff --git a/media/header_devtools.png b/media/header_devtools.png new file mode 100644 index 00000000..09eca2cc Binary files /dev/null and b/media/header_devtools.png differ diff --git a/media/partner_logo.svg b/media/partner_logo.svg new file mode 100644 index 00000000..2021ff6b --- /dev/null +++ b/media/partner_logo.svg @@ -0,0 +1,26 @@ + + + + + + DEVTOOLS + + + + + + + + + + + YOU? + + \ No newline at end of file