formaty Documentation
Local-first data toolkit. Everything runs in your browser — no servers, no sign-up.
#Input & Output Formats
| Format | Description |
|---|---|
| JSON | The primary format. Beautify, minify, flatten, sort, validate, schema, diff, and more. |
| XML | Parse and convert to/from all other formats. |
| YAML | Parse and convert; ideal for configs and infrastructure files. |
| TOML | Parse and convert; Rust / systems-friendly config format. |
| CSV | Parse and convert (array of objects). Supports comma, tab , semicolon ;, and pipe |. |
| cURL | Paste any curl command. formaty executes it and renders the live API response as formatted JSON. |
Input format is auto-detected. Override via the format selector in the input toolbar.
#Workspace
The playground is split into an input pane (left) and an output pane (right), separated by a draggable splitter.
| Feature | Details |
|---|---|
| Drag splitter | Click and drag the center divider to resize input/output panes to any ratio. |
| Live transform | When enabled, output updates instantly as you type. Toggle via command palette. |
| Auto-format on paste | Automatically beautifies data when you paste into the input editor. Toggle via settings. |
| Import file | Upload any supported file directly into the input pane via command palette "Import file". |
| Maximize output | Expand the output pane to full width via command palette "Maximize output pane". |
| Window fullscreen | Enter true browser fullscreen via command palette "Enter fullscreen". |
| Find in output | Open find/replace in the output editor via command palette "Find in output". |
| Focus panes | Keyboard-navigate between panes: command palette "Focus input pane" / "Focus output pane". |
| Editor font size | Increase / decrease via command palette "Font size +" / "Font size -". |
| Line wrap | Toggle long-line wrapping in the Monaco editor via command palette. |
| Samples | Load built-in examples: GitHub API, Stripe webhook, Kubernetes manifest, OpenAPI schema. Search "load" or "sample" in the command palette. |
#Multi-Tab Mode
Work on multiple independent documents simultaneously. Each tab has its own input, output, format settings, and history.
| Action | How |
|---|---|
| Enable / disable | Command palette "Enable multi-tab mode". State persists across page refreshes. |
| New tab | Command palette "New tab" (only available when multi-tab is on). |
| Close tab | Hover the vertical tab label in the left rail then click the x button. |
| Switch tab | Click any tab in the vertical tab bar on the left edge of the input pane. |
| Persistence | Tab names and the enabled/disabled state are saved in localStorage and restored on refresh. |
Tabs are displayed as a compact vertical column on the left edge of the input pane, keeping the editor at full width.
#Transform Actions
| Action | Description |
|---|---|
| Beautify | Pretty-print with configurable indentation (0-10 spaces). |
| Minify | Remove all whitespace for the smallest possible output. |
| Flatten | Convert nested objects to dot-notation keys: a.b.c |
| Unflatten | Expand dot-notation keys back to nested objects. |
| Sort array items | Sort all array contents recursively (alphabetically / numerically). |
| Remove duplicates | Deep-deduplicate array values recursively. |
| Generate JSON Schema | Infer a JSON Schema draft from your sample data. |
| Validate against Schema | Paste a JSON Schema in the modal — formaty validates input and reports all errors. |
#Format Conversion
Convert between any supported format pair using the output format picker or command palette.
#Output Views
Raw
Monaco editor with syntax highlighting, folding, line numbers, and find/replace.
Tree
Expandable/collapsible explorer of the full data structure.
Graph
Interactive node graph — zoom, pan, drag to explore relationships.
Query
JSONPath / JMESPath live filter with highlighted matching nodes.
Table
Tabular grid for arrays of objects — ideal for CSV or flat data.
Pin any view to the output toolbar with ☆ for one-click switching.
#Type Generation
Generate strongly-typed interfaces and structs from your JSON data. Search generate in the command palette, or use the output format picker.
#Query Playground
Switch to Query view to run live path expressions against your output data.
| Language | Example | Notes |
|---|---|---|
| JSONPath | $.users[*].name | Recursive descent, filter expressions, array slices |
| JMESPath | users[].name | AWS-standard query language; projections & functions |
Matching nodes are highlighted. Results appear below the expression input.
#Format Options & Settings
| Option | Details |
|---|---|
| Indent | 0-10 spaces. Use the - / + buttons in the toolbar or reset to 2 (default). |
| Quote style | Double or single quotes for JSON string values. |
| Sort keys | Alphabetize all object keys in output. |
| Remove empty | Strip null, empty string, and empty array/object values from output. |
| CSV delimiter | Comma ,, Tab , Semicolon ;, or Pipe | |
| Live transform | Re-runs the active operation on every keystroke. Disable for large files. |
| Auto-format on paste | Automatically beautifies when pasting content into the input editor. |
| Line wrap | Wrap long lines inside the Monaco editor. |
| Editor font size | Increase / decrease via command palette "Font size +" / "Font size -". |
#Diff & Compare
Compare two documents side-by-side with full change highlighting.
- Enter diff mode — Actions → "Diff / Compare JSON" or command palette → "Diff".
- Side-by-side view — Two editable panes showing additions (green) and removals (red), default mode.
- Inline view — Toggle with the "Inline" button in the diff toolbar.
- Navigate diffs — Use the arrow buttons in the toolbar or search "diff next" / "diff prev" in the command palette.
- Exit diff — Command palette → "Exit Diff mode".
#Command Palette
Press Cmd K (or Ctrl K) anywhere — even inside the editor — to open the command palette. The last 3 used commands always appear first.
| Category | Examples |
|---|---|
| Recent | Last 3 executed commands at the top for fast re-run. |
| Actions | Beautify, Minify, Flatten, Unflatten, Sort arrays, Remove duplicates, Diff, Generate Schema, Validate... |
| Convert to | JSON, YAML, XML, TOML, CSV |
| View as | Raw, Tree, Graph, Query, Table |
| Generate Types | TypeScript, Go, Python, Java, C#, Rust, Kotlin, Swift, Protobuf, SQL... |
| Samples | Load JSON / YAML / CSV / cURL samples; GitHub API, Stripe, K8s, OpenAPI examples |
| Settings | Sort keys, Remove empty, Quote style, Indent, CSV delimiter, Live transform, Auto-format on paste, Line wrap, Font size... |
| Workspace | Paste, Import file, Copy output, Download, Share, Browse history, Multi-tab, Find in output, Fullscreen, Maximize output, Focus pane... |
| Theme | Light, Dark, System |
#Copy As
Search copy as in the command palette to copy output in alternate encodings:
Base64
btoa(output) — compact binary-safe encoding.
Escaped string
Output wrapped as a JSON string literal (escaped) for embedding in code.
URL-encoded
Percent-encoded for use in query parameters or form POST bodies.
Data URI
data:application/json;base64,... for inline embedding in HTML / CSS.
#Input History
Every paste, import, or edit batch is saved to an undo stack (up to 100 entries per tab).
- Undo / Redo — Cmd Z / Cmd Shift Z, toolbar arrow buttons, or command palette.
- Browse history panel — Command palette → "Browse history". Opens a side panel listing all entries. Click any entry to restore.
- Export history — Downloads all undo entries as a JSON file.
#Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Cmd K | Open command palette (works inside the editor) |
| Cmd Z | Undo input |
| Cmd Shift Z | Redo input |
| Cmd V | Paste from clipboard into input |
| Cmd C | Copy output to clipboard |
| Cmd Enter | Parse and transform (when live transform is off) |
| ESC | Close command palette / modal |
#Toolbar Pinning
Every item — format, view, action, type language, setting — has a ☆ icon. Click it to pin the item to the quick-access toolbar. Pinned items persist across sessions via localStorage. You can also pin/unpin via command palette → search pin.
#Privacy & Local-First
Your data never leaves your browser
formaty processes everything locally using a Web Worker. No input, output, or transform result is ever sent to any server — except when you explicitly click Share. Session state (pinned items, theme, tabs, settings) is stored in localStorage. Shared links can be disabled at any time from the status bar.
Ready to try it?
Open Playground →