XSLT Transform Tool
Developer tool
Browser-based XSLT transformation utility built with Next.js.
XSLT Transform Tool ๐
A powerful web-based XSLT transformation tool built with Next.js and Monaco Editor. Transform XML documents using XSLT stylesheets in real-time with a modern, intuitive interface.
๐ Live Demo
xml.viet.fi - Try it out now!
โจ Features
- ๐ Real-time XSLT transformation
- ๐จ Syntax highlighting for XML/XSLT
- โ ๏ธ Smart error reporting with line numbers
- ๐ Dark theme Monaco editor
- ๐พ Downloadable output
- ๐ฑ Responsive design
๐ ๏ธ How It Works
The application features a clean, three-panel interface:
Editor Panels
-
XML Input ๐
- Paste or write your XML document
- Syntax validation in real-time
- Auto-formatting support
- Error detection
-
XSLT Stylesheet ๐
- Write your XSLT transformation rules
- Immediate error feedback
- Syntax highlighting
- Code completion
-
Output Preview ๐๏ธ
- See transformed results instantly
- Download transformed XML
- Format output automatically
- Copy to clipboard
Key Features in Detail
๐ Smart Editor
- Real-time preview as you type
- Intelligent error detection
- Line-by-line error reporting
- Syntax highlighting
- Auto-indentation
- Code folding
๐ฏ Monaco Editor Integration
- Code completion
- Error highlighting
- Dark theme support
- Multiple language support
- Minimap navigation
- Multi-cursor editing
๐ Tech Stack
Frontend
- โ๏ธ Next.js 14 (App Router)
- ๐ TypeScript
- ๐จ TailwindCSS
- ๐ Monaco Editor
Core Features
- ๐ XSLTProcessor API
- ๐ฏ Real-time transformation
- ๐ Error handling
- ๐พ File operations
Development
- ๐ฆ npm/bun package managers
- ๐ ๏ธ ESLint configuration
- ๐จ Prettier formatting
- ๐งช Jest testing framework
๐ Getting Started
- Clone the repository:
git clone https://github.com/vieteri/livexslt.git
cd livexslt
- Install dependencies (choose one):
npm install
# or
bun install
- Start development server (choose one):
npm run dev
# or
bun dev
- Open http://localhost:3000 in your browser
๐ Deployment
Deploy easily on Vercel Platform, the creators of Next.js.