Skip to content

Commit ba84ffb

Browse files
authored
Merge pull request #22 from TanStack/chore/fix-docs-general
chore: update the docs more
2 parents 8407ea2 + 45ed72b commit ba84ffb

File tree

3 files changed

+99
-5
lines changed

3 files changed

+99
-5
lines changed

docs/config.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,24 @@
88
"sections": [
99
{
1010
"label": "Getting Started",
11-
"children": [],
11+
"children": [
12+
{
13+
"label": "Overview",
14+
"to": "overview"
15+
},
16+
{
17+
"label": "Quick Start",
18+
"to": "quick-start"
19+
},
20+
{
21+
"label": "Configuration",
22+
"to": "configuration"
23+
},
24+
{
25+
"label": "Installation",
26+
"to": "installation"
27+
}
28+
],
1229
"frameworks": [
1330
{
1431
"label": "react",

docs/overview.md

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,30 @@ title: Overview
33
id: overview
44
---
55

6-
TanStack Devtools is...
6+
TanStack Devtools is a framework-agnostic devtool for managing and debugging *devtool devtools*
7+
8+
We offer you all the tools you need to build and maintain your own devtools with ease.
9+
10+
We will continue to improve and expand the capabilities of TanStack Devtools, so you can focus on building great applications while we take care of the heavy lifting. We offer you an easy way
11+
to add your own custom devtools and merge multiple instances of TanStack Devtools into a single cohesive experience.
712

813
> [!IMPORTANT]
914
> TanStack Devtools is currently in **alpha** and its API is subject to change.
1015
1116
## Origin
1217

13-
Coming soon...
18+
Have you ever wanted to build your own devtools? Then you start work on them, and you realize how complex and time-consuming it can be. First of all, you have to deal with the dreaded z-indexes!
19+
Create the trigger, make sure you can move it, style the panel, handle the interactions, make sure
20+
it's not getting in the way... The list keeps going on, and you're just trying to build your
21+
next feature in half the time!
22+
23+
24+
Well, that's where TanStack Devtools comes in. We provide a solid foundation for building your own devtools, so you can focus on what matters most: your application. We provide everything you need
25+
out of the box and all you have to do is plug the simple custom devtool panel into your app!
1426

1527
## Key Features
1628

17-
Coming soon...
29+
- **Framework Agnostic**: Works with any framework or library.
30+
- **Customizable**: Easily add your own devtools and plugins.
31+
- **Lightweight**: Minimal impact on your application's performance.
32+
- **Easy to Use**: Plug and play with your existing setup.

docs/quick-start.md

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,66 @@ title: Quick Start
33
id: quick-start
44
---
55

6-
TanStack Devtools is...
6+
TanStack Devtools is a framework-agnostic devtool for managing and debugging *devtool devtools*
7+
8+
To get up and running install the correct adapter for your framework:
9+
10+
- **React**: `npm install @tanstack/react-devtools`
11+
- **Solid**: `npm install @tanstack/solid-devtools`
12+
13+
Then import the devtools into the root of your application:
14+
15+
```javascript
16+
import { TanstackDevtools } from '@tanstack/react-devtools'
17+
18+
function App() {
19+
return (
20+
<>
21+
<YourApp />
22+
<TanstackDevtools />
23+
</>
24+
)
25+
}
26+
```
27+
28+
And you're done! If you want to add custom plugins, you can do so by using the `plugins` prop:
29+
30+
```javascript
31+
import { TanstackDevtools } from '@tanstack/react-devtools'
32+
33+
function App() {
34+
return (
35+
<>
36+
<YourApp />
37+
<TanstackDevtools plugins={[
38+
// Add your custom plugins here
39+
]} />
40+
</>
41+
)
42+
}
43+
```
44+
45+
For example, if you want to add TanStack query & router you could do so in the following way:
46+
```javascript
47+
import { TanstackDevtools } from '@tanstack/react-devtools'
48+
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
49+
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
50+
51+
function App() {
52+
return (
53+
<QueryClientProvider client={queryClient}>
54+
<YourApp />
55+
<TanstackDevtools plugins={[
56+
{
57+
name: 'Tanstack Query',
58+
render: <ReactQueryDevtoolsPanel />,
59+
},
60+
{
61+
name: 'Tanstack Router',
62+
render: <TanStackRouterDevtoolsPanel />,
63+
},
64+
]} />
65+
</QueryClientProvider>
66+
)
67+
}
68+
```

0 commit comments

Comments
 (0)