You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/9.posts/1.pluggable-extensible-playful-devtools.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -140,13 +140,13 @@ We are still exploring the APIs and practices around discoverability, permission
140
140
141
141
### Built-in Devframes
142
142
143
-
Real tools make the abstraction convincing. To test Devframe's capabilities and framework-neutral design, we ship a few [built-in devframes](/plugins) as reusable working examples. They intentionally use **different UI frameworks**, and each can run through a standalone adapter or mount into a supported host framework.
143
+
Real tools make the abstraction convincing. To test Devframe's capabilities and framework-neutral design, we ship a few [built-in devframes](/add-ons) as reusable working examples. They intentionally use **different UI frameworks**, and each can run through a standalone adapter or mount into a supported host framework.
144
144
145
145
Here are a few examples:
146
146
147
147
#### Data Inspector
148
148
149
-
[`@devframes/plugin-data-inspector`](/plugins/data-inspector) is built with Vue and provides an interactive workbench for live node-side objects. A tool can register an object as a data source, then explore and query it with [Jora](https://discoveryjs.github.io/jora/) inside the process that owns it.
149
+
[`@devframes/plugin-data-inspector`](/add-ons/devframes/data-inspector) is built with Vue and provides an interactive workbench for live node-side objects. A tool can register an object as a data source, then explore and query it with [Jora](https://discoveryjs.github.io/jora/) inside the process that owns it.
150
150
151
151
Through its standalone adapters, it can inspect JSON or JSONL files, build a self-contained report, or attach to a running Node.js process. This is useful for inspecting stores, caches, framework contexts, build metadata, or other states that usually require custom logging.
152
152
@@ -165,7 +165,7 @@ When mounted, other tools contribute data sources. A Vite plugin could expose it
165
165
166
166
#### Terminals
167
167
168
-
[`@devframes/plugin-terminals`](/plugins/terminals) is built with Svelte and provides a browser-based terminal panel supporting read-only process output and interactive PTY sessions.
168
+
[`@devframes/plugin-terminals`](/add-ons/devframes/terminals) is built with Svelte and provides a browser-based terminal panel supporting read-only process output and interactive PTY sessions.
169
169
170
170
This separates the process-running capability from the tool that renders it. A DevTools host can give multiple tools a consistent place for subprocess output and interactive commands while keeping the user's main terminal focused.
171
171
@@ -189,7 +189,7 @@ This opens the interactive terminal directly in your browser. You can use it to
189
189
190
190
#### Accessibility Inspector
191
191
192
-
[`@devframes/plugin-a11y`](/plugins/a11y) is built with Solid. Its page script scans the user app with [axe-core](https://github.com/dequelabs/axe-core), lists WCAG violations, and highlights the corresponding elements on the page. It can also turn the findings into fix prompts for coding agents, connecting visual inspection with a coding-agent workflow.
192
+
[`@devframes/plugin-a11y`](/add-ons/devframes/a11y) is built with Solid. Its page script scans the user app with [axe-core](https://github.com/dequelabs/axe-core), lists WCAG violations, and highlights the corresponding elements on the page. It can also turn the findings into fix prompts for coding agents, connecting visual inspection with a coding-agent workflow.
193
193
194
194
With a standalone adapter, its panel and page script can inspect any page. Inside a DevTools host, the same findings can also be mirrored into the shared message feed.
195
195
@@ -202,7 +202,7 @@ It is heavily inspired by [`@nuxt/a11y`](https://github.com/nuxt/a11y), which br
202
202
203
203
#### More Built-in Devframes
204
204
205
-
Other built-in devframes cover a [VS Code editor on the web](/plugins/code-server), [asset management](/plugins/assets), a [Git panel](/plugins/git), [Open Graph previews](/plugins/og), and [Devframe's own RPC and state inspector](/plugins/inspect). They share the devframe definition and protocol while each chooses its own UI framework.
205
+
Other built-in devframes cover a [VS Code editor on the web](/add-ons/devframes/code-server), [asset management](/add-ons/devframes/assets), a [Git panel](/add-ons/devframes/git), [Open Graph previews](/add-ons/devframes/og), and [Devframe's own RPC and state inspector](/add-ons/devframes/inspect). They share the devframe definition and protocol while each chooses its own UI framework.
206
206
207
207
These built-in devframes show what Devframe can support and offer starting points for communities to build their own. We believe many more interesting DevTools will emerge over time. You can follow the growing list on [Built with Devframe](/guide/built-with).
0 commit comments