Import Sort Preview
Preview how your source code imports will be formatted and sorted.
Programming Languagesbeta
TYPESCRIPT
About Import Sort Preview
The Import Sort Preview tool lets you upload or paste your source code and instantly preview how your imports would be cleanly sorted and organized according to standard community conventions.
How to Use
1
Select the 'Upload' tab to drag and drop a source file, or select the 'Paste Code' tab to enter it manually.
2
Choose the programming language from the dropdown, or let the tool auto-detect it based on file extension.
3
Click 'Preview' to see the sorted results alongside your original code.
Real-World Examples
Sorting React Imports
Paste a messy block of React imports and watch them get organized into third-party, local, and type imports.
Input
import { useState } from 'react';
import { Button } from '@/components/ui';
import axios from 'axios';Output
import axios from 'axios';
import { useState } from 'react';
import { Button } from '@/components/ui';Best Practices
- Use organized imports to reduce merge conflicts and improve code readability.
- Configure your IDE or CI pipeline to enforce import sorting automatically.
Pro Tips
You can load sample code to test out the sorting rules for different languages.
Frequently Asked Questions
Which languages are supported?
Currently, we support JavaScript, TypeScript, Python, Go, and Java.
Does this save the file to my computer?
No, this is purely a preview tool. You can copy the sorted result manually.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
CtrlC | Copy the sorted output (if you click the copy button) |
CtrlV | Paste text into the Monaco editor |
Security & Privacy
All formatting logic runs natively inside your browser. Your source code is never sent to a server.