DevTools Alpha

All-in-one developer toolkit. Each tool opens in its own tab — browse the sidebar or press ⌘ K to search.

Getting started

Pick a tool from the sidebar (grouped by category) or ⌘ K search.
Click to open it in a new tab.
Star favorites for quick access on Home.
Use Settings to enable or disable tools.

Project Data

Tools that work with editable documents (JSON, YAML, CSV, SQL, plain text, and similar) show a Project Data section in the sidebar — above Settings, collapsed by default.

New — create a named file with the tool’s default extension
Rename / Delete — right-click a file row
Switch files — your current work is saved automatically before the next file loads

Each tool keeps its own active file. Untitled buffers are promoted to Untitled, Untitled 2, … when you switch away with unsaved content. Files persist in the browser (IndexedDB) across reloads.

Tabs

Home — popular and recent tools
Tool tabs — one tab per open tool; close with × or ⌘⌥E (Ctrl+Alt+E on Windows)
Right-click a tab — Close, Close others, Close to the left/right, Close all
Settings — appearance and tool management
Documentation — this guide, changelog, and help for each tool (footer link or ? in the header)

Active tabs are highlighted by background and border; inactive tabs use muted text until hovered.

Theme

Follows system light/dark by default. Use the sun/moon button in the top bar to override, or Use system setting in Settings.

Tool help

Open Documentation while a tool is active to read its guide — what it does, how to use it, and practical tips. See Changelog under Guides for a summary of recent updates. App-wide keyboard shortcuts are listed at the bottom of each doc page.

Plugin UI design language

Every tool panel follows a shared visual system so the app feels like one product, not seventeen separate utilities.

Layout archetypes

Archetype	Best for	Examples
Editor	Resizable panes, code editor, optional inspector	JSON Editor, XML Editor, YAML Editor, File Editor, SQL Formatter
Converter	Transform input → output, optional options sidebar	CSV to JSON, Regex Playground, Base64, URL Encoder
Workbench	Multi-column domain UI	API Client, Password Generator, JWT Decoder
ColumnGrid	Fixed equal columns	Date & Time, Diff Checker

Surfaces and hierarchy

Main workspace — neutral background
Left options sidebar — background with right border (~280px)
Right reference sidebar — card surface with left border (~320px)
Validation strip — thin row above editor content (valid/invalid + stats)
Status footer — cursor, size, encoding, busy state at the bottom of a pane

Plugin name and description appear only in the tab and sidebar — not repeated inside the panel.

Toolbars and actions

Toolbar buttons are grouped left-to-right:

Input — Open, Paste, Sample
Edit — Clear, New
Transform — Format, mode toggles, dialect selects
Export — Copy, Download, open in another tool

Copy/Paste confirmations flash briefly beside the related group. Persistent numbers (line count, byte size, parse errors) belong in the validation strip or status footer.

Button tiers

Tier	When
Primary	One main action per view (e.g. Generate)
Toolbar outline	Open, Paste, Format, Copy, Export
Ghost field	Small actions on a field row
Icon utility	Editor clusters (Copy, Paste, Fullscreen) with `aria-label`

Responsive behavior

≤768px — sidebars collapse into tabs; toolbars wrap
≤1024px — inspector panes become slide-over drawers
Scroll inside panes, not on the whole plugin root

Accent color

Each tool picks one manifest color (purple, blue, green, etc.) used for icons and success states — not arbitrary per-panel colors.

For the full specification (tokens, typography classes, component API, and code examples), open Plugin UI design language or Plugin development in the Documentation sidebar.

Keyboard shortcuts

Action	Shortcut
Search tools	⌘ K
Close current tab	⌘⌥E (Ctrl+Alt+E on Windows)

Note: ⌘W closes the browser tab. ⌘⇧E focuses the Explorer in Cursor/VS Code. Use ⌘⌥E (Ctrl+Alt+E) to close the current tool tab (click inside the app first so the IDE does not steal the shortcut).