JSON to HTML/Markdown Converter

Transform JSON data into beautifully formatted HTML or Markdown with real-time preview

Demo • Features • Quick Start • Usage • Tech Stack

---

Overview

A production-ready Nuxt 3 application that converts JSON data into structured HTML or Markdown with live preview capabilities. Perfect for API documentation, data visualization, and content generation workflows.

Key Highlights

• 🎨 Modern UI/UX - Clean, Apple-inspired interface with intuitive split-pane editor
• ⚡ Real-time Preview - Instant visual feedback as you edit JSON
• 🔄 Bidirectional Conversion - Seamlessly switch between HTML and Markdown output
• 🌐 API Integration - Fetch and transform data from any REST endpoint
• 📱 Responsive Design - Optimized for desktop, tablet, and mobile devices
• 🛡️ Type-Safe - Built with TypeScript for enhanced developer experience
• 🎯 Zero Config - Works out of the box with sensible defaults

---

Features

Core Functionality

• Dynamic JSON Parsing - Handles complex nested structures, arrays, and edge cases
• Smart Formatting - Automatically formats output with proper indentation and syntax
• HTML Sanitization - DOMPurify integration for secure HTML rendering
• Markdown Rendering - Powered by markdown-it with full GFM support
• PDF Export - Generate PDF documents from converted content (html2pdf.js)
• Error Handling - Graceful error states with helpful validation messages

Developer Experience

• SSR Support - Server-side rendering for optimal performance and SEO
• Hot Module Replacement - Lightning-fast development with instant updates
• Component Architecture - Modular, reusable Vue 3 Composition API components
• Tailwind CSS - Utility-first styling with custom design system
• Font Awesome - Professional icon library for enhanced UI

---

Tech Stack

Core Framework

• Nuxt 3 - Vue-based meta-framework with SSR/SSG capabilities
• Vue 3 - Composition API, <script setup>, and reactive state management
• TypeScript - Type-safe development with full IntelliSense

UI & Styling

• Tailwind CSS - Utility-first CSS framework
• Font Awesome - Icon library via @fortawesome/vue-fontawesome
• PostCSS & Autoprefixer - CSS processing and vendor prefixing

Libraries & Tools

• markdown-it - Markdown parser with plugin support
• DOMPurify - XSS sanitizer for HTML content
• html2pdf.js - Client-side PDF generation
• vue-markdown-render - Vue 3 markdown renderer

---

Quick Start

Prerequisites

• Node.js >= 18.x
• npm / pnpm / yarn / bun

Installation

# Clone the repository
git clone https://github.com/yourusername/html-parser.git
cd html-parser

# Install dependencies (choose one)
npm install
# or
pnpm install
# or
yarn install
# or
bun install

Development

Start the development server at http://localhost:3000:

npm run dev

The app features:

• 🔥 Hot module replacement
• 🎯 Auto-import for components and composables
• 📊 Vue DevTools integration

Build

Generate production-ready build:

npm run build

Preview production build locally:

npm run preview

Deployment

This app can be deployed to:

• Vercel / Netlify - Zero-config deployment
• Cloudflare Pages - Edge network with SSR support
• Node.js Server - Self-hosted with PM2 or Docker
• Static Hosting - Pre-render with npm run generate

See Nuxt Deployment Docs for detailed guides.

---

Usage

Basic Workflow

1. Input JSON Data

   • Paste JSON directly into the editor
   • Or fetch from any public API endpoint

2. Convert

   • Click "Convert to HTML" for HTML output
   • Click "Convert to Markdown" for Markdown output

3. Preview & Export

   • View formatted output in real-time
   • Copy or export as needed

Example API Endpoints

Try these public APIs:

# User data
https://reqres.in/api/users?page=2

# Posts
https://jsonplaceholder.typicode.com/posts

# GitHub repos
https://api.github.com/users/github/repos

Code Structure

html-parser/
├── app.vue                 # Root component with main logic
├── components/
│   └── ViewBox.vue        # Reusable code preview component
├── plugins/
│   └── fontawesome.js     # Font Awesome configuration
├── assets/
│   └── css/
│       └── main.css       # Global styles & Tailwind imports
├── nuxt.config.ts         # Nuxt configuration
├── tailwind.config.js     # Tailwind customization
└── tsconfig.json          # TypeScript configuration

---

Architecture

Component Design

The application follows Vue 3 Composition API patterns with:

• Reactive State Management - Using reactive() for mutable state
• Composable Utilities - Reusable logic extraction
• Type Safety - TypeScript interfaces for props and emits

Performance Optimizations

• Code Splitting - Automatic route-based chunks
• Lazy Loading - Dynamic imports for heavy libraries
• SSR Hydration - Fast initial page load with client takeover
• Tree Shaking - Minimal bundle size via ES modules

---

Roadmap

• Custom transformation templates
• JSON schema validation
• Batch file processing
• Export to React/Vue components
• Dark mode support
• Collaborative editing
• API authentication support

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is open source and available under the MIT License.

---

Acknowledgments

Built with modern web technologies and inspired by developer-first design principles.

Made with ❤️ using Nuxt 3 & Vue 3