Developer tools plugin for ETools - JSON formatter, Base64 encoder/decoder, URL encoder, and more
npm install @etools-plugin/devtoolsDeveloper tools plugin for ETools - A collection of useful developer utilities with a modern UI that follows etools design system.
- JSON Formatter: Format and validate JSON data
- Base64 Encoder/Decoder: Encode and decode Base64 strings
- URL Encoder/Decoder: Encode and decode URL components
- Hash Generator: Generate MD5, SHA-1, and SHA-256 hashes
- Timestamp Converter: Convert Unix timestamps to readable dates
- UUID Generator: Generate random UUID v4
- Interactive UI: Visual interface using etools design system (local plugin only)
This plugin is available in the ETools Plugin Marketplace.
1. Open ETools
2. Go to Settings → Plugins
3. Search for "Developer Tools"
4. Click Install
#### JSON Formatter
```
json: {"name":"test","value":123}
#### Base64 Encode
``
base64: Hello World
#### Base64 Decode
``
base64: SGVsbG8gV29ybGQ=
#### URL Encode
``
url: hello world
#### Hash Generator
``
hash:md5 mytext
hash:sha1 mytext
hash:sha256 mytext
#### Timestamp Converter
``
ts: 1704067200
#### UUID Generator
``
uuid:
When installed as a local plugin, this plugin provides a visual interface:
``
ui:
The UI features:
- Tool selection grid with icons and descriptions
- Real-time input/output display
- Visual feedback with badges and status indicators
- Quick action buttons for common use cases
- Consistent design using etools design tokens
The plugin UI follows etools design system guidelines:
, Button, Input, Card, Badge)
- Proper state management and error handling
- Accessible keyboard navigation
- Loading states and visual feedback$3
- CSS Modules for component isolation
- Design token variables for theming
- Support for light and dark modes
- Smooth animations and transitionsDevelopment
$3
- Node.js 18+
- npm or pnpm
$3
`bash
Install dependencies
npm installBuild without UI
npm run buildBuild with UI
npm run build:uiWatch mode (without UI)
npm run devWatch mode (with UI)
npm run dev:ui
`$3
`
etools-devtools-plugin/
├── src/
│ ├── index.ts # Main plugin logic
│ ├── ui.tsx # React UI component
│ ├── ui.css # Component styles
│ └── types.ts # Type definitions
├── dist/ # Build output
├── package.json
├── tsconfig.json
└── README.md
`$3
The UI component uses:
- React 18+ for component rendering
- etools plugin-sdk for UI components
- CSS Modules + Design Tokens for styling
- TypeScript for type safety
When building with UI support:
1. Ensure React is installed as a peer dependency
2. Use
npm run build:ui to include UI components
3. The getUIComponent() function allows dynamic loading$3
`bash
Build without UI (NPM package)
npm run build
Output: dist/index.mjs, dist/index.d.mts
Build with UI (local plugin)
npm run build:ui
Output: Includes dist/ui.mjs, dist/ui.d.mts
`Design Guidelines
When contributing to this plugin:
1. Follow etools Design System
- Use design tokens from
design-tokens.css
- Match spacing, typography, and color scales
- Maintain consistent component styling2. Component Usage
- Prefer etools UI components over custom ones
- Use
PluginUIContainer for consistency
- Follow component variant patterns3. Accessibility
- Ensure keyboard navigation works
- Provide proper ARIA labels
- Maintain focus management
4. Performance
- Lazy load UI components
- Use React.memo where appropriate
- Optimize re-renders
License
MIT © ETools Team
Support
- GitHub Issues: https://github.com/etools-team/devtools-plugin/issues
- Documentation: https://github.com/etools-team/etools
- UI Guidelines: See
etools/example-plugins/ui-consistency-demo/`