This project demonstrates the parsing of uploaded XML files on the client side. As an MVP, the focus is on extracting and formatting headings, lists, paragraphs, basic styling, and indentations.
- Vue 3 for the core application logic
- Tailwind CSS for styling
- Shadow DOM to isolate the document’s content area
XML documents contain various attributes and properties that must be processed to achieve an accurate representation. However, achieving a pixel-perfect match takes time and dedication. For this MVP, the goal is not perfect visual fidelity but rather extracting and displaying readable information.
-
Upload an XML file
- Drag and drop the file into the designated drop zone.
- Alternatively, click the upload area to select a file.
-
View the Parsed Output
- The document is parsed immediately.
- The extracted content is rendered on the screen for easy readability.
This MVP serves as a foundation for future improvements, aiming to enhance XML parsing capabilities while maintaining usability and performance.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
pnpm installpnpm devpnpm buildRun Unit Tests with Vitest
pnpm test:unitLint with ESLint
pnpm lint