Back to Details

devtools-elements

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dev Tools Elements

开发工具Elements

8 developer utility components. Zero external dependencies.
8个开发者实用组件，无任何外部依赖。

Install Pattern

安装方式

bash
npx shadcn@latest add @elements/{name}
bash
npx shadcn@latest add @elements/{name}

Components

组件列表

ComponentInstallDescription
JSON Viewer
@elements/json-viewer
Collapsible JSON tree with search
API Response Viewer
@elements/api-response-viewer
HTTP response with status, headers, body
Code Diff Viewer
@elements/code-diff-viewer
Side-by-side or inline diff
CLI Output
@elements/cli-output
Terminal-like output renderer
Env Editor
@elements/env-editor
Environment variable editor
Error Boundary UI
@elements/error-boundary-ui
Error boundary with stack trace
Webhook Tester
@elements/webhook-tester
Webhook request/response tester
Schema Viewer
@elements/schema-viewer
JSON Schema / OpenAPI renderer
组件名安装命令描述
JSON Viewer
@elements/json-viewer
支持搜索的可折叠JSON树
API Response Viewer
@elements/api-response-viewer
展示HTTP响应的状态、头部、响应体
Code Diff Viewer
@elements/code-diff-viewer
并排或内嵌式差异对比
CLI Output
@elements/cli-output
类终端的输出渲染器
Env Editor
@elements/env-editor
环境变量编辑器
Error Boundary UI
@elements/error-boundary-ui
带堆栈追踪的错误边界
Webhook Tester
@elements/webhook-tester
Webhook请求/响应测试器
Schema Viewer
@elements/schema-viewer
JSON Schema / OpenAPI 渲染器

Quick Patterns

快速安装示例

bash
undefined
bash
undefined

API debugging

API调试

npx shadcn@latest add @elements/api-response-viewer @elements/json-viewer
npx shadcn@latest add @elements/api-response-viewer @elements/json-viewer

Dev dashboard

开发仪表盘

npx shadcn@latest add @elements/env-editor @elements/webhook-tester @elements/cli-output
npx shadcn@latest add @elements/env-editor @elements/webhook-tester @elements/cli-output

Error handling

错误处理

npx shadcn@latest add @elements/error-boundary-ui
npx shadcn@latest add @elements/error-boundary-ui

All dev tools

安装全部开发工具

npx shadcn@latest add @elements/json-viewer @elements/api-response-viewer @elements/code-diff-viewer @elements/cli-output @elements/env-editor @elements/error-boundary-ui @elements/webhook-tester @elements/schema-viewer
undefined
npx shadcn@latest add @elements/json-viewer @elements/api-response-viewer @elements/code-diff-viewer @elements/cli-output @elements/env-editor @elements/error-boundary-ui @elements/webhook-tester @elements/schema-viewer
undefined

Discovery

了解更多

Browse https://tryelements.dev/docs/devtools
访问 https://tryelements.dev/docs/devtools 浏览完整内容